Chromium a récemment intégré une nouvelle fonctionnalité HTML5: les feuilles de style à portée limitée.
<style scoped>. Un auteur Web peut limiter les règles de style à une partie d'une page en définissant l'attribut "scope" sur un élément <style> qui est l'enfant direct de l'élément racine de la sous-arborescence à laquelle vous souhaitez appliquer les styles. Cela permet de limiter les styles à l'élément parent de l'élément <style> et à tous ses descendants.
Exemple
Voici un document simple utilisant 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 appliquent une couleur rouge au texte dans n'importe quelle <div> et dans n'importe quelle <span> en vert:
une div ! une étendue !
une balise div ! un segment !
une balise div ! un segment !
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>
puis limite les règles de style afin qu'elles s'appliquent au <div> englobant qui est le parent de l'élément <style scoped>, et à tout ce qui se trouve à l'intérieur de cet élément <div> uniquement. C'est ce que nous appelons "scope". Le résultat se présente comme suit:
un élément div ! un segment !
un tag div ! un segment !
un tag div ! un segment !
Bien entendu, vous pouvez effectuer cette opération n'importe où dans le balisage. Ainsi, si vous êtes aventureux, vous pouvez imbriquer autant que vous le souhaitez des styles restreints dans d'autres parties du balisage afin de contrôler précisément où ils sont appliqués.
Cas d'utilisation
À quoi cela sert-il ?
Le contenu syndiqué est un cas d'utilisation courant: lorsque vous souhaitez, en tant qu'auteur Web, intégrer le contenu d'un tiers, y compris tous ses styles, sans risquer que ces styles polluent d'autres parties de la page qui ne sont pas liées. L'avantage réside dans la possibilité de combiner le contenu d'autres sites comme yelp, Twitter, ebay, etc. en une seule page, sans avoir besoin de les isoler à l'aide d'un <iframe> ni de modifier le contenu externe à la volée.
Si vous utilisez un système de gestion de contenu (CMS) qui vous envoie des extraits de balisage qui sont tous combinés pour former une page finale, il s'agit d'une excellente fonctionnalité pour s'assurer que chaque extrait est stylisé indépendamment de tout autre élément de la page. Cela peut également être tout aussi utile pour un wiki.
Lorsque vous souhaitez créer un code de démonstration attrayant sur une page, il est facile de limiter les styles au contenu de la démo. Vous pouvez ainsi vous lancer avec le CSS dans la version de démonstration, mais rien d'autre sur la page ne sera affecté.
Autre cas d'utilisation : l'encapsulation : par exemple, si votre page Web comporte un menu latéral, il est judicieux de placer les styles spécifiques à ce menu dans une section <style scoped> de cette partie du balisage. Ces règles de style n'auront aucun effet sur l'affichage des autres parties de la page, qui les séparent parfaitement du contenu principal.
Le modèle de composant Web est probablement l'un des cas d'utilisation les plus convaincants. Les composants Web constituent un excellent moyen de créer des éléments tels que des curseurs, des menus, des sélecteurs de date, des widgets d'onglet, etc. En fournissant les styles délimités, un concepteur peut créer un widget et l'empaqueter avec ses styles sous la forme d'une unité autonome que d'autres peuvent saisir et combiner dans une application Web enrichie. Nous prévoyons d'utiliser massivement <style scoped> avec les composants Web et le Shadow DOM (qui peut déjà être activé en définissant l'indicateur expérimental "Shadow DOM" dans chrome://flags). Pour le moment, il n'existe pas de très bon moyen de s'assurer que les styles sont limités aux composants Web sans avoir recours à des pratiques négatives telles que les styles intégrés. Les styles délimités sont donc parfaitement adaptés à cette approche.
Pourquoi inclure l'élément parent ?
La méthode la plus naturelle consiste à 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 délimitées de manière "défensive" pour les navigateurs qui ne sont pas encore compatibles avec <style scoped>, en préfixant les règles avec un ID ou un sélecteur de classe comme remplacement:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Cela imite l'effet de l'utilisation de styles lorsque le champ d'application est défini, mais avec une perte de performances au moment de l'exécution en raison du sélecteur plus complexe. L'avantage de cette approche est qu'elle permet d'effectuer un remplacement en douceur jusqu'au jour où <style scoped> est largement pris en charge et où les sélecteurs d'ID peuvent simplement être supprimés.
État
Étant donné que l'implémentation de feuilles de style limitées est encore récente, elles sont actuellement masquées par un indicateur d'exécution dans Chrome. Pour les activer, vous devez disposer d'une version de Chrome 19 ou ultérieure (Chrome Canary pour le moment), localiser l'entrée "Activer <style scoped>" dans chrome://flags (vers la fin), cliquer sur "Activer", puis redémarrer le navigateur.
Il n'y a aucun bug connu pour le moment, mais @global et les versions délimitées de @keyframes et @-webkit-region sont toujours en cours d'implémentation. De plus, @font-face est ignoré pour le moment, car il est fort probable que la spécification soit modifiée.
Nous invitons toutes les personnes intéressées par cette fonctionnalité à l'essayer et à nous faire part de vos expériences, qu'elles soient positives ou négatives.