rel="alternate stylesheet"
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
La paire de mots-clés alternate stylesheet, lorsqu'elle est utilisée comme valeur pour l'attribut rel de l'élément <link>, indique que la ressource cible est une feuille de style alternative. Définir des feuilles 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 les fonctions média CSS prefers-color-scheme et prefers-contrast.
Firefox permet aux utilisateur·ice·s de sélectionner des feuilles de style alternatives via le sous-menu Affichage > Style de la page, qui affiche les valeurs des attributs title. 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 attributs rel="alternate stylesheet" et title="…". 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-menu Style 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 style reset.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, mais dé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 attribut title 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ême title font partie du même choix. Les feuilles de style liées sans attribut title sont toujours appliquées.
Utilisez rel="stylesheet" pour lier le style par défaut, et rel="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 |
Compatibilité des navigateurs
Loading…