Chromium hat vor Kurzem eine neue Funktion von HTML5 implementiert: Bereichsbasierte Stylesheets, auch bekannt als
<style scoped>. Ein Webautor kann Stilregeln so einschränken, dass sie nur auf einen Teil einer Seite angewendet werden. Dazu legt er das Attribut „Scope“ für ein <style>-Element fest, das dem Stammelement der Unterstruktur, auf das die Stile angewendet werden sollen, direkt untergeordnet ist. Dadurch werden die Stile auf das Element beschränkt, das dem <style>-Element übergeordnet ist, und nur dessen untergeordnete Elemente.
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 den Roten <div> und innerhalb von <span> Grün eingefärbt:
Ein Div! Eine Spanne!
Eine Spanne! Eine Spanne!
Eine Div! Eine Spanne!
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>
werden die Stilregeln so eingeschränkt, dass sie auf das einschließende <div>-Element angewendet werden, das dem <style scoped>-Element übergeordnet ist, und auf alles innerhalb dieses <div>. Wir nennen dies „Scope“ und das Ergebnis sieht so aus:
Ein Div! Eine Spanne!
Ein Div! Eine Spanne!
Ein Div! Eine Spanne!
Natürlich ist dies überall im Markup möglich. Wenn Sie also experimentierfreudig sind, können Sie Stile in anderen auf einen Bereich reduzierten Teilen des Markups beliebig verschachteln, um genau zu steuern, wo Stile angewendet werden.
Anwendungsfälle
Wozu ist das gut?
Ein häufiger Anwendungsfall sind syndizierte Inhalte: Wenn Sie als Webautor Inhalte von einem Drittanbieter integrieren möchten, einschließlich aller Stile, aber nicht riskieren möchten, dass diese Stile andere, nicht zusammenhängende Teile der Seite „verschmutzen“. Ein großer Vorteil hierbei ist die Möglichkeit, Inhalte von anderen Websites wie Yelp, Twitter, eBay usw. auf einer einzigen Seite zusammenzufassen, ohne sie mit einem <iframe> isolieren oder spontan die externen Inhalte bearbeiten zu müssen.
Wenn Sie ein Content-Management-System (CMS) verwenden, das Ihnen Markup-Snippets sendet, die alle zu einer abschließenden Seitenanzeige kombiniert werden, ist dies eine großartige Funktion, um sicherzustellen, dass jedes Snippet isoliert von allen anderen Elementen auf der Seite gestaltet wird. Bei einem Wiki kann dies ebenso nützlich sein.
Wenn Sie ansprechenden Democode auf einer Seite erstellen möchten, können Sie die Stile einfach auf den Demo-Inhalt beschränken. So können Sie den CSS-Code in der Demo ausprobieren, aber die anderen Seiten sind davon nicht betroffen.
Ein weiterer Anwendungsfall ist die einfache Datenkapselung. Wenn Ihre Webseite beispielsweise ein seitliches Menü hat, ist es sinnvoll, Designs, die für dieses Menü spezifisch sind, in einen <style scoped>-Abschnitt in diesem Teil des Markups zu platzieren. Diese Stilregeln haben keine Auswirkungen auf das Rendern anderer Teile der Seite, wodurch sie gut vom Hauptinhalt getrennt sind.
Einer der interessantesten Anwendungsfälle könnte das Webkomponentenmodell sein. Webkomponenten sind eine großartige Möglichkeit, um Elemente wie Schieberegler, Menüs, Datumsauswahl, Tab-Widgets usw. zu erstellen. Durch die Bereitstellung der Bereichsstile können Designschaffende ein Widget erstellen und mit ihren Stilen als eigenständige Einheit verpacken, die andere Personen erfassen und zu einer umfassenden Webanwendung kombinieren können. Wir planen, <style scoped> intensiv mit Webkomponenten und dem Shadow DOM zu verwenden, das bereits durch Festlegen des experimentellen Flags „shadow DOM“ unter chrome://flags aktiviert werden kann. Derzeit gibt es keine wirklich gute Möglichkeit, dafür zu sorgen, dass Stile auf Webkomponenten beschränkt sind, ohne auf schlechte Methoden wie Inline-Stile zurückzugreifen. Daher sind Bereichsstile eine perfekte Lösung.
Warum sollte das übergeordnete Element einbezogen werden?
Am einfachsten ist es, das übergeordnete Element einzuschließen, damit die <style scoped>-Regeln beispielsweise eine gemeinsame Hintergrundfarbe für den gesamten Bereich festlegen können. Außerdem können auf einen Bereich reduzierte Stylesheets in Browsern, die <style scoped> noch nicht unterstützen, durch Voranstellen einer ID oder eines Klassenselektors als Fallback an Regeln erstellt werden:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Dies ahmt den Effekt der Verwendung von Stilen nach, wenn „Scope“ implementiert ist. Aufgrund der komplexeren Auswahl kann es jedoch zu Leistungseinbußen bei der Laufzeit kommen. Das Tolle an diesem Ansatz ist, dass er einen ordnungsgemäßen Fallback-Ansatz ermöglicht, bis zu dem Tag, an dem <style scoped> allgemein unterstützt wird und die ID-Selektoren einfach entfernt werden könnten.
Status
Da die Implementierung von auf einen Bereich reduzierten Stylesheets noch neu ist, sind sie derzeit in Chrome hinter einer Laufzeit-Flag verborgen. Um sie zu aktivieren, benötigen Sie eine Chrome-Version mit der Versionsnummer 19 oder höher (derzeit Chrome Canary). Suchen Sie dann unter chrome://flags (am Ende) den Eintrag „<style scoped> aktivieren“, klicken Sie auf „Aktivieren“ und starten Sie den Browser neu.
Derzeit sind keine Programmfehler bekannt. Die @global- und Bereichsversionen von @keyframes und @-webkit-region werden jedoch noch implementiert. Außerdem wird @font-face vorerst ignoriert, da die Wahrscheinlichkeit groß ist, dass sich die Spezifikation ändert.
Wir möchten alle, die an dieser Funktion interessiert sind, dazu ermutigen, sie auszuprobieren und uns von ihren Erfahrungen zu berichten: positive, negative und vielleicht sogar fehlerhafte.