Nommez jusqu’à huit couches, ajoutez leurs règles CSS et organisez leur ordre de déclaration. Copiez la déclaration et les blocs @layer dans votre feuille de style.
Fonctionne localement dans votre navigateurLe planificateur tient une seule liste de couches de cascade. Chaque entrée porte un nom et les règles qui lui appartiennent, et l’export écrit une déclaration unique — @layer reset, tokens, base, components, utilities; — puis un bloc par couche dans cet ordre. La pile de droite est cette même liste lue de haut en bas : la première carte est déclarée en premier, la dernière l’emporte quand deux couches fixent la même propriété.
Le plan part de cinq couches (reset, tokens, base, components et utilities), avec une courte règle d’exemple chacune, et la quatrième est sélectionnée. Aucun bouton de lancement n’est nécessaire : la pile, la lecture et le panneau de code suivent chaque frappe, et Copier CSS place ce texte dans le presse-papiers.
Les couches de cascade se résolvent dans l’ordre où elles sont déclarées : la couche nommée en dernier l’emporte quand les deux fixent la même propriété. La pile étiquette les deux extrémités de cet ordre — Déclaré en premier · priorité plus faible sur la première carte, Déclaré en dernier · priorité plus élevée sur la dernière —, les couches intermédiaires ne portant que la marque @layer.
Déclarer plus tôt et Déclarer plus tard déplacent la couche sélectionnée d’une position à la fois, et la ligne de déclaration en tête est réécrite aussitôt : les couches visibles dans la pile sont exactement les noms de la déclaration, dans cet ordre.
Un nom de couche devient un identifiant CSS : le planificateur le passe en minuscules, remplace tout ce qui sort de a-z, 0-9, _ et - par un tiret, coupe les tirets aux extrémités et ajoute x- quand il commence par un chiffre. MAIN LAYER sort donc en main-layer, et un champ vide en layer.
L’atelier impose deux limites : un plan accepte d’une à huit couches, et le champ de nom s’arrête à 36 caractères. Supprimer la dernière couche ou ajouter la neuvième ne change rien au plan, la raison s’affiche au-dessus du panneau.
Renommer une couche avec un nom déjà utilisé est permis, mais l’export répète ce nom et le navigateur fusionne les deux blocs en une seule couche : les règles des deux cartes se retrouvent ensemble. L’atelier le signale dès que cela se produit, pour que le doublon soit visible avant la copie.
Le plan ne quitte pas la page : la liste, les règles et la déclaration sont construites dans le navigateur, Copier CSS les écrit directement dans le presse-papiers, et il n’y a ni envoi, ni compte, ni bouton de lancement. Réinitialiser ramène à tout moment les cinq couches par défaut.