Premiers jours pour la portée CSS

La portée CSS gagne du terrain, avec un projet de spécification de travail représentant des progrès significatifs. Cette proposition, menée par Miriam Suzanne, traite des limites des tentatives précédentes.

Le concept de base se concentre sur la création de styles ciblés explicitement sur des composants HTML spécifiques. La règle @scope facilite ceci:

<code><div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Premiers jours pour la portée CSS"><div>
    <p>...</p>
  </div>
</div></code>

Le style de ce "composant" devient très concentré:

 <code>@scope (.media) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... } }</code>

Les avantages clés comprennent:

1. Effacer le style au niveau des composants, simplifiant la maintenance.
2. Évite de nommer les conflits; Les styles sont contenus dans le composant.

Alors que la classe de parent adéfini offre une portée similaire ( .media , .media img , .media .content ), CSS Nesting fournit une alternative plus concise:

 <code>.media { & img { } & .content { } }</code>

Cependant, @scope offre des capacités uniques. "Donut Scoping" permet un contrôle précis sur les limites de la portée:

 <code>@scope (.media) to (.content) { p { } }</code>

Cela empêche les fuites de style au-delà de la zone souhaitée:

<code><div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Premiers jours pour la portée CSS"><p>C'est une portée stylable.</p>
  <div>
    <p>Ce n'est pas de portée styléable.</p>
  </div>
</div></code>

La spécification gère également élégamment les scénarios «ancêtres les plus proches», une amélioration significative par rapport aux méthodes existantes. Le blog de Miriam fournit des explications détaillées de cette complexité et d'autres, notamment des lunettes qui se chevauchent et des interactions avec la nidification. Une exploration plus approfondie de son travail est fortement recommandée.

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!