Chromium a récemment implémenté une nouvelle fonctionnalité à partir de HTML5: les feuilles de style limitées.
<style scoped>. Un auteur Web peut limiter les règles de style pour qu'elles ne s'appliquent qu'à une partie d'une page. Pour ce faire, il doit définir l'attribut "limité" au niveau d'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 limite les styles pour qu'ils n'affectent que 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 associent le texte à une couleur <div> rouge et <span> vert:
un div ! un div !
un div ! un div !
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>
Ensuite, elle 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 dans cette <div>. Nous appelons cela un "champ d'application" et le résultat se présente comme suit:
un div ! un span !
un div ! un div !
un div ! un span !
Cette opération peut bien sûr être effectuée n'importe où dans le balisage. Par conséquent, si vous êtes téméraire, vous pouvez imbriquer des styles restreints dans d'autres parties du balisage, autant que vous le souhaitez, afin de contrôler précisément où les styles sont appliqués.
Cas d'utilisation
À quoi sert-elle ?
Le contenu syndiqué est un cas d'utilisation courant: en tant qu'auteur Web, vous souhaitez incorporer le contenu d'un tiers, y compris tous ses styles, sans risquer que ces styles "pollent" d'autres parties de la page sans aucun rapport. L'avantage ici 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> ou en modifiant le contenu externe à la volée.
Si vous utilisez un système de gestion de contenu (CMS) qui envoie des extraits de balisage tous regroupés dans une page finale, cette fonctionnalité vous permet de vous assurer que le style de chaque extrait est isolé de tout autre élément de la page. Cela peut également être tout aussi utile pour un wiki.
Lorsque vous voulez écrire un bon code de démonstration sur une page, il est facile de limiter les styles au contenu de la démo. Cela vous permet de vous amuser avec le CSS dans la version de démonstration, sans que rien d'autre sur la page ne soit 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> au sein de 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épare bien du contenu principal.
L'un des cas d'utilisation les plus intéressants concerne sans doute le modèle de composants Web. Les composants Web vont être 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 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 l'indicateur expérimental "Shadow DOM" dans chrome://flags). Pour l'instant, il n'existe aucun moyen efficace de s'assurer que les styles sont limités aux composants Web sans recourir à de mauvaises pratiques telles que les styles intégrés. Les styles délimités sont donc parfaits pour cela.
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 limitées de manière "défensive" pour les navigateurs qui n'acceptent pas encore <style scoped>, en ajoutant en remplacement aux règles un ID ou un sélecteur de classe:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Cela imite l'effet de l'utilisation de styles lorsque l'attribut "limité" est implémenté, mais avec une incidence sur les performances au moment de l'exécution en raison du sélecteur plus complexe. L'avantage de cette approche est qu'elle permet une approche de remplacement élégante jusqu'au jour où <style scoped> sera largement pris en charge et où les sélecteurs d'ID pourraient simplement être supprimés.
État
Étant donné que l'implémentation des feuilles de style de portée est encore nouvelle, 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 actuellement), puis localiser l'entrée "Activer <style scoped>" sur chrome://flags (vers la fin), cliquer sur "Activer" et redémarrer le navigateur.
Il n'y a actuellement aucun bug connu, mais @global et des versions 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 les spécifications changent.
Nous invitons toutes les personnes intéressées par cette fonctionnalité à l'essayer et à nous faire part de votre expérience, qu'elle soit positive ou non, et (éventuellement) sur les bugs.