Chromium a récemment implémenté une nouvelle fonctionnalité de HTML5: les feuilles de style à portée, également appelées
<style scoped>. Un auteur Web peut limiter les règles de style à une partie d'une page en définissant l'attribut "scoped" sur un élément <style> qui est l'enfant direct de l'élément racine du sous-arbre auquel vous souhaitez appliquer les styles. Les styles ne s'appliquent donc qu'à l'élément parent de l'élément <style> et à tous ses descendants.
Exemple
Voici un document simple qui utilise un style standard:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
Les règles de style spécifiées colorent le texte dans tous les <div> en rouge et dans tous les <span> en vert:
un div un span
un div un span
un div un span
Toutefois, si nous définissons scoped sur l'élément <style>:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
Il limite ensuite les règles de style afin qu'elles soient appliquées à l'<div> englobant qui est le parent de l'élément <style scoped> et à tout ce qui se trouve dans cet <div>. C'est ce que nous appelons "couverture". Le résultat se présente comme suit:
un div ! un span !
un div ! un span !
un div ! un span !
Bien entendu, vous pouvez le faire n'importe où dans le balisage. Si vous le souhaitez, vous pouvez imbriquer des styles à portée dans d'autres parties de la balise à portée pour contrôler précisément où les styles sont appliqués.
Cas d'utilisation
À quoi cela sert-il ?
Un cas d'utilisation courant est le contenu syndiqué: lorsque vous souhaitez, en tant qu'auteur Web, intégrer le contenu d'un tiers, y compris tous ses styles, mais que vous ne voulez pas risquer que ces styles "polluent" d'autres parties sans rapport de la page. L'un des grands avantages de cette fonctionnalité est la possibilité de combiner le contenu d'autres sites tels que Yelp, Twitter, eBay, etc. sur une seule page, sans avoir à les isoler à l'aide d'un <iframe> ni à modifier le contenu externe instantanément.
Si vous utilisez un système de gestion de contenu (CMS) qui vous envoie des extraits de balisage qui sont tous mélangés dans une page finale, cette fonctionnalité est idéale pour vous assurer que chaque extrait est stylisé indépendamment de tout autre élément de la page. Cela peut être tout aussi utile pour un wiki.
Lorsque vous souhaitez créer du code de démonstration sur une page, il est facile de limiter les styles au contenu de la démonstration. Vous pouvez ainsi vous amuser avec le CSS de la démonstration, sans que rien d'autre sur la page ne soit affecté.
Un autre cas d'utilisation est simplement l'encapsulation: par exemple, si votre page Web comporte un menu latéral, il est logique de placer les styles spécifiques à ce menu dans une section <style scoped> dans cette partie du balisage. Ces règles de style n'auront aucun effet lors de l'affichage d'autres parties de la page, ce qui les séparera bien du contenu principal.
Le modèle de composant Web est probablement l'un des cas d'utilisation les plus intéressants. Les composants Web sont un excellent moyen de créer des éléments tels que des curseurs, des menus, des sélecteurs de date, des widgets d'onglets, etc. En fournissant des styles de portée, un concepteur peut créer un widget et le conditionner avec ses styles en tant qu'unité autonome que d'autres peuvent récupérer et combiner dans une application Web riche. Nous prévoyons d'utiliser <style scoped> de manière intensive avec les composants Web et le Shadow DOM (qui peut déjà être activé en définissant le flag expérimental "Shadow DOM" dans chrome://flags). Pour le moment, il n'existe pas de bon moyen de s'assurer que les styles sont limités aux composants Web sans avoir recours à de mauvaises pratiques telles que le style en ligne. Les styles de portée sont donc parfaits pour cela.
Pourquoi inclure l'élément parent ?
Le moyen le plus naturel est d'inclure l'élément parent afin que les règles <style scoped> puissent, par exemple, définir une couleur d'arrière-plan commune pour l'ensemble du champ d'application. Il permet également d'écrire des feuilles de style à portée de manière "défensive" pour les navigateurs qui ne prennent pas encore en charge <style scoped>, en ajoutant un sélecteur d'ID ou de classe en tant que solution de secours:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Cela imite l'effet de l'utilisation de styles lorsque le champ d'application est implémenté, mais avec une pénalité de performances d'exécution en raison du sélecteur plus complexe. L'avantage de cette approche est qu'elle permet d'utiliser une approche de remplacement élégante jusqu'au jour où <style scoped> sera largement pris en charge et que les sélecteurs d'ID pourront simplement être supprimés.
État
Étant donné que l'implémentation des feuilles de style à portée limitée est encore récente, elles sont actuellement masquées derrière un indicateur d'exécution dans Chrome. Pour les activer, vous devez obtenir une version de Chrome dont le numéro de version est égal ou supérieur à 19 (Chrome Canary pour le moment), puis rechercher l'entrée "Enable <style scoped>" (Activer <style scoped>) dans chrome://flags (vers la fin), cliquer sur "Enable" (Activer) et redémarrer le navigateur.
Il n'y a actuellement aucun bug connu, mais @global et les versions avec portée de @keyframes et @-webkit-region sont toujours en cours d'implémentation. De plus, @font-face est ignoré pour le moment, car il est probable que la spécification change.
Nous invitons tous les utilisateurs intéressés à tester cette fonctionnalité et à nous faire part de leurs commentaires: les bons, les mauvais et (peut-être) les bugs.