Frühe Tage für CSS Scoping

Die CSS -Scoping gewinnt an Traktion, wobei eine aktuelle Arbeitsentwurfspezifikation erhebliche Fortschritte darstellt. Dieser von Miriam Suzanne angeführte Vorschlag befasst sich mit Einschränkungen früherer Versuche.

Das Kernkonzept dreht sich um das Erstellen von Stilen, die explizit auf bestimmte HTML -Komponenten abzielen. Die @scope -Regel erleichtert dies:

<code><div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Frühe Tage für CSS Scoping"><div>
    <p>...</p>
  </div>
</div></code>

Das Styling dieser "Komponente" wird stark fokussiert:

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

Zu den wichtigsten Vorteilen gehören:

1. Klares Styling auf Komponentenebene, Vereinfachung der Wartung.
2. Vermeidet Benennungskonflikte; Stile sind in der Komponente enthalten.

Während die Vorbereitung der Elternklasse ähnliche Scoping ( .media , .media img , .media .content ) bietet, bietet CSS -Nesting eine prägnantere Alternative:

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

@scope bietet jedoch einzigartige Funktionen. "Donut Scoping" ermöglicht eine präzise Kontrolle über Umfanggrenzen:

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

Dies verhindert, dass Style -Leckage über den gewünschten Bereich hinausgeht:

<code><div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Frühe Tage für CSS Scoping"><p>Dies ist im Umfang stilbar.</p>
  <div>
    <p>Dies ist im Bereich nicht stilbar.</p>
  </div>
</div></code>

Die Spezifikation verarbeitet auch elegant "nächste Vorfahren" -Szenarien, eine signifikante Verbesserung gegenüber bestehenden Methoden. Miriams Blog enthält detaillierte Erklärungen dieser und anderer Komplexität, einschließlich überlappender Bereiche und Interaktionen mit der Nistung. Eine weitere Untersuchung ihrer Arbeiten wird dringend empfohlen.

Das obige ist der detaillierte Inhalt vonFrühe Tage für CSS Scoping. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!