Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
rel="alternate stylesheet"
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La paire de mots-clésalternate stylesheet, lorsqu'elle est utilisée comme valeur pour l'attributrel de l'élément<link>, indique que la ressource cible est unefeuille de style alternative. Définir desfeuilles de style alternatives dans une page web permet aux utilisateur·ice·s de voir plusieurs versions d'une page selon leurs besoins ou préférences.
Note :Cette fonctionnalité n'est pas bien prise en charge dans les navigateurs sans extension. Pour proposer des présentations alternatives qui fonctionnent avec les préférences existantes de l'utilisateur·ice, voir lesfonctions média CSSprefers-color-scheme etprefers-contrast.
Firefox permet aux utilisateur·ice·s de sélectionner desfeuilles de style alternatives via le sous-menuAffichage > Style de la page, qui affiche les valeurs des attributstitle. Les autres navigateurs nécessitent une extension pour activer cette fonctionnalité. La page web peut aussi fournir sa propre interface utilisateur pour permettre de changer de style.
Exemples
Définir des feuilles de style alternatives
Les feuilles de style alternatives sont spécifiées à l'aide d'éléments<link> avec les attributsrel="alternate stylesheet" ettitle="…". Par exemple :
<link href="reset.css" rel="stylesheet" /><link href="default.css" rel="stylesheet" title="Style par défaut" /><link href="fancy.css" rel="alternate stylesheet" title="Fantaisie" /><link href="basic.css" rel="alternate stylesheet" title="Basique" />Dans cet exemple, les styles « Style par défaut », « Fantaisie » et « Basique » seront listés dans le sous-menuStyle de la page de Firefox, avec « Style par défaut » pré-sélectionné. Lorsque l'utilisateur·ice sélectionne un autre style, la page est immédiatement re-rendue avec cette feuille de style.
Quel que soit le style sélectionné, les règles de la feuille de stylereset.css seront toujours appliquées.
Exemple interactif
Détails
Toute feuille de style dans un document appartient à l'une des catégories suivantes :
- Persistante (a
rel="stylesheet", pas detitle="") : toujours appliquée au document. - Préférée (a
rel="stylesheet"avec un attributtitle="…"spécifié) : appliquée par défaut, maisdésactivée si une feuille de style alternative est sélectionnée.Il ne peut y avoir qu'une seule feuille de style préférée, donc fournir des feuilles de style avec des attributs title différents fera que certaines seront ignorées. - Alternative (
rel="alternate stylesheet"avec un attributtitle="…"spécifié) : désactivée par défaut, peut être sélectionnée.
Dans les cas où un menu de feuilles de style existe, lorsque les feuilles de style sont référencées avec un attributtitle sur l'élément<link rel="stylesheet"> ou<style>, le titre devient l'un des choix proposés à l'utilisateur·ice. Les feuilles de style liées avec le mêmetitle font partie du même choix. Les feuilles de style liées sans attributtitle sont toujours appliquées.
Utilisezrel="stylesheet" pour lier le style par défaut, etrel="alternate stylesheet" pour lier des feuilles de style alternatives. Cela indique au navigateur quel titre de feuille de style doit être sélectionné par défaut, et fait que cette sélection par défaut s'applique dans les navigateurs qui ne prennent pas en charge les feuilles de style alternatives.
Spécifications
| Specification |
|---|
| HTML # rel-alternate |
| HTML # the-link-is-an-alternative-stylesheet |
| HTML # attr-style-title |
| HTML # attr-meta-http-equiv-default-style |
| CSS Object Model (CSSOM) # css-style-sheet-collections |