In Chromium wurde vor Kurzem eine neue Funktion aus HTML5 implementiert: stylesheets mit Bereichsbeschränkung, auch
<style scoped>. Webautoren können Stilregeln so einschränken, dass sie nur auf einen Teil einer Seite angewendet werden. Dazu setzen sie das Attribut „scoped“ auf ein <style>-Element, das ein direktes untergeordnetes Element des Stammelements des untergeordneten Baums ist, auf den die Stile angewendet werden sollen. Dadurch werden die Stile nur auf das Element angewendet, das übergeordnet zum Element <style> ist, und auf alle seine Nachkommen.
Beispiel
Hier ist ein einfaches Dokument mit Standardstil:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
Mit den angegebenen Stilregeln wird Text in <div> rot und in <span> grün dargestellt:
a div! a span!
a div! a span!
a div! a span!
Wenn wir jedoch scoped für das <style>-Element festlegen:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
Dann werden die Stilregeln so eingeschränkt, dass sie auf das umschließende <div> angewendet werden, das dem <style scoped>-Element übergeordnet ist, und auf alles innerhalb dieses <div>. Wir nennen das „auf bestimmte Bereiche beschränkt“. Das Ergebnis sieht so aus:
ein div! ein span!
ein div! ein span!
ein div! ein span!
Das kann natürlich an jeder Stelle im Markup erfolgen. Wenn Sie also experimentierfreudig sind, können Sie stilisierte Bereiche beliebig oft in andere stilisierte Bereiche des Markups verschachteln, um genau festzulegen, wo Stile angewendet werden.
Anwendungsfälle
Wozu ist das gut?
Ein häufiger Anwendungsfall sind syndizierte Inhalte: Wenn Sie als Webautor Inhalte von Drittanbietern einschließlich aller Stile einbinden möchten, aber nicht riskieren möchten, dass diese Stile andere, nicht zusammenhängende Teile der Seite „verschmutzen“. Ein großer Vorteil ist die Möglichkeit, Inhalte von anderen Websites wie Yelp, Twitter oder eBay auf einer einzigen Seite zu kombinieren, ohne sie mithilfe eines <iframe> zu isolieren oder die externen Inhalte direkt zu bearbeiten.
Wenn Sie ein Content-Management-System (CMS) verwenden, das Ihnen Markup-Snippets sendet, die alle zusammen zu einer endgültigen Seitenanzeige zusammengeführt werden, ist dies eine hervorragende Funktion, um sicherzustellen, dass jedes Snippet unabhängig von anderen Elementen auf der Seite formatiert wird. Das kann auch für ein Wiki nützlich sein.
Wenn Sie auf einer Seite einen schönen Democode erstellen möchten, können Sie die Stile ganz einfach auf die Demoinhalte beschränken. So können Sie das CSS in der Demo so anpassen, wie Sie möchten, ohne dass sich das auf andere Elemente auf der Seite auswirkt.
Ein weiterer Anwendungsfall ist die einfache Kapselung: Wenn Ihre Webseite beispielsweise ein Seitenmenü hat, ist es sinnvoll, Stile, die für dieses Menü spezifisch sind, in einen <style scoped>-Abschnitt in diesem Teil des Markups einzufügen. Diese Stilregeln haben keine Auswirkungen auf das Rendern anderer Teile der Seite, wodurch sie gut vom Hauptinhalt getrennt bleiben.
Einer der überzeugendsten Anwendungsfälle ist das Webkomponentenmodell. Webkomponenten sind eine gute Möglichkeit, Dinge wie Schieberegler, Menüs, Datumsauswahlen und Tab-Widgets zu erstellen. Durch die Bereitstellung der begrenzten Stile kann ein Designer ein Widget erstellen und es mit seinen Stilen als eigenständige Einheit verpacken, die andere verwenden und in eine umfangreiche Webanwendung einbinden können. Wir planen, <style scoped> in Kombination mit Web-Komponenten und dem Shadow DOM zu verwenden. Letzteres kann bereits aktiviert werden, indem das experimentelle Flag „Shadow DOM“ unter chrome://flags gesetzt wird. Derzeit gibt es keine wirklich gute Möglichkeit, dafür zu sorgen, dass Stile auf Webkomponenten beschränkt sind, ohne auf schlechte Praktiken wie Inline-Styling zurückzugreifen. Daher eignen sich stilbezogene Stile perfekt dafür.
Warum sollte das übergeordnete Element eingeschlossen werden?
Am einfachsten ist es, das übergeordnete Element einzubeziehen, damit die <style scoped>-Regeln beispielsweise eine gemeinsame Hintergrundfarbe für den gesamten Umfang festlegen können. Außerdem können Sie Stylesheets mit begrenztem Umfang „vorbeugend“ für Browser schreiben, die <style scoped> noch nicht unterstützen, indem Sie Regeln als Fallback mit einer ID- oder Klassenauswahl vorangestellt werden:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Dies ahmt den Effekt der Verwendung von Stilen nach, wenn „scoped“ implementiert ist, jedoch mit einer gewissen Leistungseinbuße bei der Laufzeit aufgrund der komplexeren Auswahl. Der Vorteil dieses Ansatzes besteht darin, dass er einen reibungslosen Fallback ermöglicht, bis <style scoped> weithin unterstützt wird und die ID-Auswahlen einfach entfernt werden können.
Status
Da die Implementierung von Stylesheets mit Bereichsbeschränkung noch relativ neu ist, sind sie in Chrome derzeit hinter einem Laufzeitflag ausgeblendet. Wenn Sie sie aktivieren möchten, benötigen Sie eine Version von Chrome mit der Versionsnummer 19 oder höher (aktuell Chrome Canary). Suchen Sie dann unter chrome://flags nach dem Eintrag „<style scoped> aktivieren“ (gegen Ende), klicken Sie auf „Aktivieren“ und starten Sie den Browser neu.
Derzeit sind keine bekannten Fehler bekannt. @global und die versionsspezifischen Versionen von @keyframes und @-webkit-region werden jedoch noch implementiert. Außerdem wird @font-face vorerst ignoriert, da die Spezifikation mit hoher Wahrscheinlichkeit geändert wird.
Wir möchten alle Nutzer, die an der Funktion interessiert sind, dazu ermutigen, sie auszuprobieren und uns ihre Erfahrungen mitzuteilen – ob positiv, negativ oder (möglicherweise) fehlerhaft.