Les couches (layer) et la directive @layer.

Description de la directive @layer.

La directive @layer définit les couches de cascades (layers), et surtout organise leurs priorités. Un tutoriel sur les couches de cascade est présenté un peu plus loin sur cette page. En gros, les couches de cascade permettent de modifier les règles de priorité habituelles du CSS.

Pour réviser les règles de priorité habituelles du CSS, reportez-vous à la page Les priorités.

Syntaxes de la directive @layer.

• @layer layer-1, layer-2, ... layer-n;

  Cette écriture, généralement positionnée au début de la feuille de styles, définit une série de couches de cascade. Il suffit d'énumérer les noms de ces couches en les séparant par des virgules. Les noms choisis doivent commencer par une lettre et peuvent comporter des lettres, des chiffres, des tirets et des tirets bas. Mais autant conserver les bonnes habitudes de CSS et adopter une écriture en kebab-case : layer-1 plutôt que layer_1.

  La priorité de ces couches entre elles est également définie par l'ordre dans lequel elles sont énumérées : dans notre exemple layer-1 est la moins prioritaire, et layer-n est celle qui a la priorité la plus haute.

  Une fois qu'elles sont définies, ces priorités ne pourront pas changer, même si une deuxième directive @layer apparaît ensuite. Ainsi, dans l'exemple ci-dessous, layer-1 reste la couche avec la plus faible priorité :

  @layer layer-1, layer-2, layer-3; @layer layer-3, layer-2, layer-1;

  Mais il est possible de définir de nouvelles couches. Dans ce cas, étant déclarées après, ces nouvelles couches auront une priorité plus grande. Dans ce deuxième exemple, une couche layer-4 est créée avec une priorité supérieure à toutes les autres couches déjà existantes. Les priorités des couches de 1 à 3 ne changent pas.

  @layer layer-1, layer-2, layer-3; @layer layer-4, layer-3, layer-2;

  Toutes les syntaxes CSS peuvent être insérées dans une couche de cascade, sauf :

  • La directive @charset. En effet, cette directive doit être unique et figurer au tout début de la feuille de styles.
  • La directive @namespace qui définit un espace de noms. Cette directive est surtout utilisée lorsque les styles sont appliqués à un document XML.
  • La directive @import. Voir la syntaxe plus loin pour importer des styles dans une couche de cascade.
• @layer layer-1 { <selecteur> { <propriété>: <valeur>; <propriété>: <valeur>; } }

  Dans cette deuxième syntaxe, @layer est utilisée pour associer des propriétés CSS à une couche de cascade. La priorité de ces propriétés sera modifiée par la priorité de la couche de cascade.

  Si le nom spécifié pour la couche et déjà existant, la priorité de cette couche ne sera pas modifiée. Si le nom n'a pas encore été défini, une nouvelle couche est créée avec ce nom, et avec la priorité la plus forte.

• @import url("styles.css") layer(layer-1);

  Une syntaxe complémentaire, qui n'utilise pas la directive @layer mais la directive @import. Elle permet de charger une feuille de styles externe directement dans la couche de cascade spécifiée.

  Reportez-vous à la directive @import pour des précisions complémentaires.

  Pour information, la balise HTML link permet également de préciser le nom de la couche de cascade dans laquelle les styles doivent être insérés :

  <link rel="stylesheet" href="styles.css" layer="layer-1">

Tutoriel sur les couches de cascade.

Rappel : les priorités en CSS.

CSS applique des règles très particulières pour résoudre les conflits entre plusieurs règles dont les sélecteurs pointent sur des éléments identiques. Prenons l'exemple ci-dessous, qui présente un fragment de code HTML et quelques styles. Les trois règles CSS s'appliquent au paragraphe de l'exemple, mais en utilisant des sélecteurs différents.

Les règles de priorité classiques définissent que le paragraphe doit s'afficher en rouge, et donc que la deuxième et la troisième règle doivent être ignorées. En effet, la priorité de chacune des règles est fonction du type du sélecteur :

Pour des explications plus détaillées, consultez la page sur Les priorités en CSS.

En quoi ce fonctionnement pose-t-il un problème ?

Soyons clair : ce mécanisme des priorités est pratiquement toujours très efficace et pose rarement des problèmes.

Cependant des composants sont souvent intégrés à un site web, et certains d'entre eux sont accompagnés d'une feuille de styles. Pour que l'intégration visuelle soit correcte, le développeur souhaite souvent surcharger les styles livrés avec le composant. Si ces derniers utilisent des sélecteurs par identifiant, il ont d'ores et déjà une priorité forte et seront difficiles à surcharger.

Prenons un exemple. Ci dessous le composant est livré avec une feuille de styles qui définit en bleu l'élément principal du composant. Ce dernier est ciblé par son identifiant component. Il est dès lors difficile de changer sa couleur dans la feuille de styles du site. Il faut trouver un sélecteur de priorité plus forte, ce qui est fait dans l'exemple en faisant précéder l'identifiant par div.
Sélecteur #component : spécificité de 100.
Sélecteur div#component : spécificité de 101.

Ca marche mais ce n'est pas très élégant; De plus cela suppose de savoir que l'élément principal du composant est un div.

L'option !important.

Une autre solution pour surcharger une règle déjà existante, et qui comporte un sélecteur de forte priorité, consiste à ajouter l'option !important à la fin de la nouvelle règle. Les règles comportant cette option deviennent prioritaires sur toutes les autres.

On devine cependant que cette solution manque de subtilité : elle détruit le mécanisme habituel des priorités qui est malgré tout, dans la plupart des cas, très pratique et nécessaire. Et si on doit surcharger une règle qui comporte déjà l'option !important, il faudra remettre cette option sur le nouvelle règle. On constate souvent qu'après avoir détruit une fois le mécanisme des priorités, on est obligé de mettre !important de partout.

Les couches de cascade.

Les couches de cascade permettent une gestion beaucoup plus fine des priorités : il est possible de définir autant de couches que nécessaire et de définir leur priorité les unes par rapport aux autres. Les règles CSS associées à chacune des couches prennent la priorité de leur couche. Le mieux est de prendre un exemple.

On définit 3 couches dans l'ordre de priorité croissant base à la priorité la plus faible, special a la priorité la plus haute @layer base, theme, special; Des règles sont ensuite associées aux couches @layer base { .classe {color: black;} /* faible priorité */ } @layer special { .classe {color: red;} /* forte priorité */ }

Notes : à l'intérieur d'une même couche, les priorités sont gérées par le mécanisme habituel : la spécificité du sélecteur définit la priorité.
Les règles CSS qui ne sont pas associées à une couche restent prioritaires sur celles qui sont associées à une couche.

Écrivons à nouveau les styles pour notre composant en utilisant les couches de cascade :

Imbrication des couches de cascade.

Des directives @layer peuvent être imbriquées les unes dans les autres. Cela permet de définir des couches de cascade à plusieurs niveaux.

@layer group-1 { @layer layer-1 { ... } @layer layer-2 { ... } }

Mais il est souvent plus simple d'utiliser une notation pointée pour décrire l'imbrication des couches :

@layer group-1.layer-1, group-1.layer-2; @layer group-1.layer-1 { ... } @layer group-1.layer-2 { ... }

La valeur revert-layer.

Cette nouvelle valeur, introduite dans le niveau 5 du module de standardisation "CSS Cascading and Inheritance", annule les modifications apportées à la valeur d'une propriété dans la même couche de cascade. les modifications apportées dans une autre couche de cascade sont maintenues.

Reportez vous à la page revert-layer pour des précisions complémentaires.

Compatibilité des navigateurs avec la directive @layer.

Les couches de cascade sont maintenant bien gérées par les navigateurs. Il est donc très intéressant de les utiliser, surtout si vous écrivez des composants qui utilisent leurs propres styles.

1

Couches
de cascade

2

Directive
@layer

Estimation de la prise en charge globale.

96%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Opéra

Safari sur IOS

Safari

Firefox

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Évolution de la directive @layer.

• Module CSS - Cascade et héritage - Niveau 5

  Ce module de spécification introduit la notion de couches de styles, la directive @layer, et la valeur revert-layer.

  Concernant @layer Introduction des couches de cascade et de la directive @layer.
  

  19 Janvier 2021

  Document de travail.

  

  13 Janvier 2022

  Candidat à la recommandation.

  

  

Voir aussi, au sujet de l'organisation des feuilles de styles.

La spécification "Module CSS - Cascade et héritage" (Module CSS - Cascade et héritage) regroupe les outils disponibles pour organiser les styles dans les cas complexes (nombreuses feuilles de styles, cascade d'héritages volumineuse, etc.

Propriétés :

Directives :

Valeurs: