Les couches (layer) et la directive @layer.

@layer

Résumé des caractéristiques de la directive @layer

Description rapide
Définit les couches de cascade (layer) pour faciliter la gestion des priorités entre les règles CSS.
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Module W3C
Module CSS - Cascade et héritage
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

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 couche-1, couche-2, ... couche-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 couche-1 est la moins prioritaire, et couche-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, couche-1 reste la couche avec la plus faible priorité :

    @layer couche-1, couche-2, couche-3; @layer couche-3, couche-2, couche-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 couche-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 couche-1, couche-2, couche-3; @layer couche-4, couche-3, couche-2;

  • @layer couche-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.

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

    1. La directive @charset. En effet, cette directive doit être unique et figurer au tout début de la feuille de styles.
    2. 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.
    3. La directive @import. Voir la syntaxe plus loin pour importer des styles dans une couche de cascade.
  • @import url("feuille.css") layer(couche-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="nom-couche">

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.

<p id="intro" class="edito">...</p> <style> #intro {color:red;} .edito {color:blue;} p {color:black;} </style>

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 :

Sélecteur par identifiant     ⟵ Priorité la plus forte
Sélecteur par classe
Sélecteur par balise
Sélecteur * (étoile) ⟵ Priorité la plus faible

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.

L'option !important.

Lorsque le développeur souhaite surcharger une règle déjà existante et qui comporte un sélecteur de forte priorité, il peut ajouter l'option !important à la fin de la nouvelle règle. Les règles comportant cette option deviennent prioritaires sur toutes les autres.

.edito {color: blue !important;}

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é */ }

A l'intérieur d'une même couche, les priorités sont gérées par le mécanisme habituel : le type de sélecteur définit la priorité.

Note : les règles CSS qui ne sont pas associées à une couche restent prioritaires sur celles qui sont associées à une couche.

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 groupe-1 { @layer couche-1 { ... } @layer couche-2 { ... } }

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

@layer groupe-1.couche-1, groupe-1.couche-2; @layer groupe-1.couche-1 { ... } @layer groupe-1.couche-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 pour les gros sites, ou les sites qui utilisent des composants créés par des tiers et qui comportent leurs propres styles

Colonne 1
Support par les navigateurs des couches de cascade, qui autorise l'organisation des styles et de leurs priorité.
Colonne 2
Support par les navigateurs de la directive @layer, qui définit des couches de cascade.
1
Couches
de cascade
2
Directive
@layer
Estimation de la prise en charge globale.
94%
93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Opéra

Safari

Firefox

Chrome pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Opéra mini

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

Évolution de la directive @layer.

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

La spécification "Module CSS - Cascade et héritage" (CSS Cascading and Inheritance) 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 :

all
Initialisation de toutes les propriétés.

Directives :

@import
Importation d'une feuille de styles.

Valeurs:

!important
Rend une règle prioritaire sur toutes les autres.
inherit
Donne à une propriété la même valeur que celle de l'élément parent.
initial
Redonne à une propriété sa valeur initiale.
revert
Donne à une propriété la valeur définie par le navigateur.
revert-layer
Rétablit la valeur d'une propriété à la valeur qu'elle avait à la couche précédente.
unset
Donne à une propriété la valeur qu'elle aurait eu si aucun style ne l'avait changée.