In Chromium wurde vor Kurzem eine neue HTML5-Funktion implementiert: abgesehene Stylesheets.
<style scoped>. Ein Webautor kann Stilregeln so einschränken, dass sie nur auf einen Teil einer Seite angewendet werden. Dazu legt er das Attribut „bereichs“ für ein <style>-Element fest, das dem Stammelement der Unterstruktur, auf die die Stile angewendet werden sollen, direkt untergeordnet ist. Dadurch werden die Stile auf das übergeordnete Element des <style>-Elements und alle Nachfolgerelemente beschränkt.
Beispiel
Hier ist ein einfaches Dokument mit Standardstilen:
<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>
Die angegebenen Stilregeln färben Text innerhalb von <div> rot und innerhalb von <span> grün:
ein div! eine span!
ein div! eine Span!
ein div! eine Span!
Wenn jedoch scoped für das <style>-Element festgelegt wird:
<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 das übergeordnete Element des <style scoped>-Elements und alles innerhalb dieses <div>-Elements ist. Dies wird als „Scope“ bezeichnet und das Ergebnis sieht so aus:
ein div-Element! eine Span!
ein div! eine span!
ein div! eine Spannweite!
Dies ist natürlich überall im Markup möglich. Wenn du also experimentierfreudig bist, kannst du bereichsspezifische Stile nach Belieben in andere bereichsspezifische Teile des Markups verschachteln. So hast du eine genaue Kontrolle darüber, wo die Stile angewendet werden.
Anwendungsfälle
Wozu ist das jetzt gut?
Ein häufiger Anwendungsfall sind syndizierte Inhalte: Wenn Sie als Webautor Inhalte von Dritten integrieren möchten, einschließlich aller seiner Stile, aber nicht gefährden möchten, dass diese Stile andere, nicht verbundene Teile der Seite „verschmutzen“. Ein großer Vorteil ist hier die Möglichkeit, Inhalte von anderen Websites wie Yelp, Twitter, eBay usw. auf einer einzigen Seite zu kombinieren, ohne sie mit einem <iframe> isolieren zu müssen oder die externen Inhalte spontan zu bearbeiten.
Wenn Sie ein Content-Management-System (CMS) verwenden, das Ihnen Markup-Snippets sendet, die alle in einer endgültigen Seitenanzeige vermischt sind, können Sie mit dieser Funktion sicherstellen, dass jedes Snippet isoliert von anderen Elementen auf der Seite gestaltet wird. Dies kann auch bei einem Wiki hilfreich sein.
Wenn Sie praktischen Democode auf einer Seite erstellen möchten, können Sie die Stile einfach auf den Demo-Inhalt beschränken. So können Sie das CSS in der Demo ausprobieren, ohne dass sonst nichts auf der Seite davon betroffen ist.
Ein weiterer Anwendungsfall ist die einfache Datenkapselung: Wenn deine Webseite beispielsweise ein seitliches Menü hat, ist es sinnvoll, Stile, die für dieses Menü spezifisch sind, in einem <style scoped>-Abschnitt in diesem Teil des Markups zu platzieren. Diese Stilregeln haben keine Auswirkungen auf andere Teile der Seite, sodass sie deutlich vom Hauptinhalt getrennt sind.
Einer der interessantesten Anwendungsfälle ist wahrscheinlich das Webkomponentenmodell. Webkomponenten sind eine großartige Möglichkeit, Elemente wie Schieberegler, Menüs, Datumsauswahl, Tab-Widgets usw. zu erstellen. Durch die Bereitstellung von bereichsbezogenen Stilen können Designschaffende ein Widget erstellen und es mit seinen Stilen als eigenständige Einheit verpacken, die andere Nutzer nutzen und zu einer umfangreichen Webanwendung kombinieren können. Wir planen, <style scoped> intensiv mit Webkomponenten und dem Shadow DOM zu verwenden. Dies kann bereits durch Festlegen des experimentellen Flags „shadow DOM“ in chrome://flags aktiviert werden. Im Moment gibt es keine wirklich gute Möglichkeit, sicherzustellen, dass Stile auf Webkomponenten beschränkt sind, ohne auf unzulässige Praktiken wie Inline-Stile zurückzugreifen. Bereichsstile sind daher perfekt dafür geeignet.
Warum sollte das übergeordnete Element eingefügt werden?
Am einfachsten ist es, das übergeordnete Element einzubeziehen, damit die <style scoped>-Regeln beispielsweise eine gemeinsame Hintergrundfarbe für den gesamten Bereich festlegen. Außerdem können auf einen Bereich reduzierte Stylesheets für Browser, die <style scoped> noch nicht unterstützen, „defensiv“ geschrieben werden. Dazu wird den Regeln ein ID- oder Klassenselektor als Fallback vorangestellt:
<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 kommt es jedoch zu einigen Leistungseinbußen bei der Laufzeit. Das Schöne an diesem Ansatz ist, dass er bis zu dem Tag, an dem <style scoped> weithin unterstützt wird und die ID-Selektoren einfach verworfen werden können, einen Graceful Fallback-Ansatz ermöglicht.
Status
Da die Implementierung von auf einen Bereich reduzierten Stylesheets noch neu ist, sind sie derzeit in Chrome hinter einem 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 Fehler bekannt. @global und die bereichsbezogenen Versionen von @keyframes und @-webkit-region werden jedoch noch implementiert. Außerdem wird @font-face vorerst ignoriert, da die Wahrscheinlichkeit hoch ist, dass sich die Spezifikation ändert.
Wir möchten alle, die an der Funktion interessiert sind, dazu ermutigen, sie auszuprobieren und uns über eure Erfahrungen zu berichten: gute, schlechte und (vielleicht) fehlerhafte.