Couches en cascade

Nouveau membre de CSS: @layer

Une nouvelle fonctionnalité est apparue dans le champ CSS: @layer . C'est grâce à Miriam Suzanne, qui a joué un rôle clé dans l'influence du développement du CSS. J'ai déjà entendu parler de cette fonctionnalité, mais elle apparaît dans un navigateur expérimental.

Bramus a écrit un merveilleux article qui explore cette fonctionnalité en profondeur:

L'émergence de @layer nous offre aux développeurs plus d'outils pour contrôler les feuilles de style Cascade. Ce qui est vraiment puissant à propos de @layer , c'est sa position unique dans la feuille de style en cascade: avant la spécificité du sélecteur et l'ordre d'occurrence. Pour cette raison, nous n'avons pas à nous soucier de la spécificité du sélecteur du CSS utilisé dans d'autres couches, ni de l'ordre dans lequel CSS est chargé à ces couches - ceci est très utile pour les grandes équipes ou lors du chargement du CSS tiers.

Bramus van Damme , «L'avenir de CSS: couche (CSS @ couche) *»

(La partie audacieuse est soulignée dans le texte d'origine)

La clé est: il s'agit d'une nouvelle fonctionnalité qui affecte la priorité des sélecteurs. Cela nous oblige à réajuster notre compréhension de CSS, car @layer est un mécanisme complètement nouveau et puissant qui détermine le style d'application réelle.

Je dis que c'est puissant car le style "plus haut calque" peut battre des sélecteurs traditionnellement plus forts, même si les sélecteurs de cette couche sont eux-mêmes plus faibles.

 / * Premier étage * /
@layer-couche de base {
  corps # foo {
    Contexte: Tan;
  }
}
/ * Niveau supérieur, donc gagner, même si le sélecteur est faible * /
@layer-thème-couche {
  body.foo {
    Contexte: #eee;
  }
}

/* Avis! Les styles lanciers sont plus puissants que les styles en couches, même si le sélecteur est plus faible * /
corps {
  Contexte: rouge;
}

Parce que le segment inférieur de CSS n'est pas placé dans aucune couche du tout, il gagne, même si le sélecteur est faible.

Et, vous n'êtes pas limité à un seul niveau. Vous pouvez les définir et les utiliser comme vous le souhaitez.

 @layer reset; / * créer la première couche appelée "réinitialiser" /
@Layer Base; / * Créez une deuxième couche nommée "base" *
@layer thème; / * créer une troisième couche nommée "thème" *
@Layer Utilities; / * Créer une quatrième couche appelée "Utilitaires" *
/ * Ou, @layer reset, base, thème, utilits; * /


@layer reset {/ * Ajouter au calque nommé "réinitialiser" * /
  / * ... * /
}

@layer thème {/ * Ajouter au calque nommé "thème" * /
  / * ... * /
}

@Layer Base {/ * Ajoutez au calque nommé "base" * /
  / * ... * /
}

@layer thème {/ * Ajouter au calque nommé "thème" * /
  / * ... * /
}

C'est vraiment choquant.

Comment allons-nous l'utiliser?

Je me demande si un modèle commun deviendra ...

1. Superposez tout pour que la priorité soit très claire. Peut-être que seul le CSS déverrouillé est autorisé pour une couverture super puissante, mais idéalement, même cela devrait être une couche de haut niveau.
2. Réinitialiser comme le niveau le plus bas.
3. Utilisez du contenu tiers comme couche intermédiaire.
4. Prenez tout ce que l'équipe écrit comme le plus haut niveau.

Vous n'avez pas à vous soucier de laisser de l'espace entre les couches (comme lorsque vous utilisez z-index ), car vous pouvez l'ajuster à tout moment sans fixer des nombres.

Le temps nous dira.

déboguer

Je veux que les outils du développeur expriment très clairement les hiérarchies car il peut y avoir une grave confusion au fil du temps lorsque nous voyons que les sélecteurs qui semblent plus faibles en raison de la position de la hiérarchie gagnent.

Support de navigateur

Il semble que Caniuse ait remarqué ce problème!

Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette version et plus tard.

Bureau

Mobile / tablette

renouveler

Ce sont très nouveaux (au moment de la rédaction), donc l'instabilité peut être attendue. On dirait que le 6 octobre 2021, les gens ont décidé que le style délavé est en fait le plus fort, pas le plus faible. J'ai essayé de mettre à jour l'article pour le montrer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!