Speichern des Tages mit Scoped CSS

In den letzten Jahren haben HTML5 und CSS3 unsere Welt und unseren Ansatz für gängige Website-Probleme revolutioniert. Alle paar Tage scheint es eine neue ausgefallene Snippet oder einen neuen Ansatz zu geben, der alles verändert. Heute könnte einer dieser Tage sein (irgendwie).

Eine wenig bekannte Funktion von HTML5 ist Scoped CSS. Es ist ein Attribut für Style-Blöcke, das die Art und Weise, wie wir bestimmte Styling-Herausforderungen in Zukunft angehen, verändern könnte.

Update: Soweit ich weiß, wurde <style scoped> aus den Spezifikationen entfernt, und selbst Browser, die es unterstützten, haben es wieder entfernt. Selbst während ich dieses Update schreibe (August 2017) sind Scoped Styles wohl beliebter und begehrter denn je. Vue-Dateien unterstützen das Konzept genauso, wie hier beschrieben, und es tauchen viele andere Bibliotheken auf, die das Konzept unterstützen. Native Browser denken wahrscheinlich über Shadow DOM als wahrscheinlichen Ersatz für diese Idee nach.

Die Implementierung des Scoping ist einfach. Betrachten wir einige Codes auf einer ansonsten ungestylten Seite, auf der alle Texte standardmäßig schwarz sind.

<div>
  <style scoped>
    h1 { color: FireBrick;   }
    p  { color: SaddleBrown; }
  </style>
  <h1>This is an H1 in a scoped div. Regardless of global styles the text should be "FireBrick".</h1>
  <p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p>
</div>

<p>This is another paragraph, that will unaffected by the scoped style and remain black.</p>

Der style-Block mit dem scoped-Attribut überschreibt die globalen Stile, die sich normalerweise im head befinden (entweder in einem Style-Block oder in einem verknüpften Stylesheet), jedoch nur für die Geschwister-/Nachfahrenelemente innerhalb desselben Elternelements. In diesem Beispiel erhalten alle Elemente innerhalb des umgebenden Divs eine neue Überschriften- und Absatzfärbung. Wie w3.org es ausdrückt: „Wenn das Attribut scoped vorhanden ist, muss der User-Agent die angegebenen Stilinformationen nur auf das Elternelement des Style-Elements (falls vorhanden) und die Kindknoten dieses Elements anwenden.“

Das ist erstaunlich! Während alle anderen Texte auf der Seite schwarz sein mögen, können wir innerhalb dieses Divs frei stylen, ohne uns darum kümmern zu müssen, die Stile ähnlicher Elemente irgendwo anders auf unserer Website zu ändern. Dies kann ein sehr mächtiges Werkzeug sein.

Warum ist das cool?

„Aber Arley“, sagen Sie, ein Bindewort am Satzanfang, „warum nicht einfach eine Klasse oder eine ID für dieses Div verwenden und wie #foo h1 und #foo p stylen? Sind das nicht nur organisierte Inline-Stile?“ Es gibt eine Reihe von Gelegenheiten, bei denen Scoped CSS eine gute Option unter bestimmten Umständen ist.

• Es kann wünschenswert sein, das CSS eines bestimmten interaktiven Elements mit dem HTML zusammenzuhalten. Wenn das betreffende Element auf der Website einzigartig ist (wie z. B. ein komplexer Schieberegler), hat es keinen Vorteil, es mit globalen Stilen zu cachen.
• Das CSS zur Organisation mit dem HTML kann jedoch Wert haben.
• Bei der Arbeit in einem Team kann dies eine großartige Möglichkeit sein, die gleichzeitige Entwicklung verschiedener Bereiche der Website zu ermöglichen, ohne sich um den Zustand des globalen CSS kümmern zu müssen – ich sehe dies als kurzfristige Lösung.
• Wenn Ihr Artikel von einer anderen Website aggregiert wird, ist es möglich, Stile auf einer anderen Website anzupassen, die sonst außerhalb der Reichweite Ihres globalen Stylesheets liegen würden.
• Wenn Sie Tags im Kommentarbereich Ihrer Website aktivieren, können Sie Ihren Lesern die Möglichkeit geben, ihre eigenen Stile zu gestalten... egal, das ist wahrscheinlich eine schreckliche Idee.
• Zur Verwendung in Widgets auf Websites von Drittanbietern, bei denen das CSS unbekannt ist und die Stile innerhalb des Widgets nirgendwo sonst beeinflussen sollten. Allerdings ist die Möglichkeit, die Stile innerhalb des Widgets zurückzusetzen, die andere Hälfte dieser Schlacht.
• Zuletzt (und für mich am aufregendsten) ist Scoped CSS ideal für die Arbeit mit Content-Management-Systemen, bei denen Sie viel weniger Flexibilität haben, um einzigartigen Markup zu gemeinsamen, vorlagenbasierten Bereichen hinzuzufügen, oder keinen Zugriff auf die vorhandenen Stylesheets haben.

Ich möchte die Vorteile von CMS im Detail besprechen.

Arbeiten mit einem CMS

Wenn wir eine Website in einem CMS erstellen, schaffen wir Einschränkungen, um die Wiederverwendbarkeit von Elementen und Vorlagen zu gewährleisten und die Konsistenz der gesamten Website zu erhalten. CMS sind das perfekte Werkzeug, um jemanden, der weniger technisch versiert ist als Sie, Inhalte erstellen und verwalten zu lassen, ohne Angst haben zu müssen, Website-Komponenten zu beschädigen. Eine Einschränkung eines CMS kann die Unfähigkeit sein, einmalige Anpassungen für einzigartige Bereiche vorzunehmen.

Ich hatte dieses Problem, als ich mit einem CMS auf Unternehmensebene arbeitete. Basierend auf den ursprünglichen Entwürfen und dem Umfang der Website haben wir das CMS so aufgebaut, dass es einheitlich und konsistent aussieht. Einige Monate nach dem Start entstand ein Bedarf an mehr Flexibilität: die Einführung einer zweiten, ausführlicheren Sprache und spezielle Kampagnen führten zu neuen Herausforderungen für das Styling.

Meine erste Herausforderung bestand darin, einen größeren Textblock zu gestalten (Fun Fact: Die Faustregel für Designer bei der Gestaltung für zweisprachige Inhalte in Kanada ist, zusätzliche 50 % Platz einzuplanen, wenn das Design auf Französisch sein soll!). Ich sah mir meine Seiten an und ich sah mir meine Stylesheets an: Selbst die kleinste Änderung, die ich vorgenommen hätte, würde Stunden des Testens und der Qualitätssicherung auf der gesamten Website bedeuten, um sicherzustellen, dass keine anderen Bereiche dadurch beschädigt wurden. Die Auswirkungen waren astronomisch! Da ich keine Zeit dafür hatte, erfand ich das „Poor-Man’s Scoped CSS" oder „Code-Block", wie es bekannt wurde. Code-Block waren technisch nur umgebende Divs mit IDs um den Inhalt, und dann ein benachbarter Style-Block, um die notwendigen Änderungen vorzunehmen (obwohl dies einfach klingt, war es für diese CMS-Arbeit etwas außerhalb des Rahmens). Da dieses CSS nur für diese Seite galt, machte es keinen Sinn, diese Stile die globalen Stile aufblähen zu lassen. Es war perfekt. Der Style-Block würde keinen anderen Bereich der Website beeinträchtigen. Zweisprachige und Kampagneninhalte wurden einfach zu entwickeln und zu testen.

Glücklicherweise wird Scoped CSS noch sauberer und einfacher zu implementieren sein als meine McGyvered-Lösung. Es werden keine speziellen IDs benötigt, und tatsächlich wird die Möglichkeit, sehr einfache Selektoren wie „p" zu haben, Ihr CSS sehr sauber aussehen lassen.

Praktische Umsetzung

Wollten Sie schon einmal einen bestimmten Beitrag in Ihrem Stream auf eine bestimmte Weise hervorheben? Selbst wenn Ihr CMS keine Code-Eingabe im Editor erlaubt, haben Sie dank Scoped CSS möglicherweise immer noch Optionen.

WordPress ist ein Beispiel für ein CMS, das einschränkt, welche Codes Sie in den Inhaltsbereich eingeben können. Aus der Box entfernt WordPress viel Markup aus dem Wysiwyg-Editor, und das ist tatsächlich eine sehr, sehr gute Sache, da es jeden stray Code bereinigt, den ein Anfänger versehentlich einführen könnte. Benutzern die Eingabe von Code in ein CMS zu gestatten, bedeutet, ihnen die Möglichkeit zu geben, die Website zu zerstören! Zu viele schließende Div-Tags bedeuten ein völlig kaputtes Layout!

Mit etwas Vorarbeit können Sie ein benutzerdefiniertes Feld „Code-Block" erstellen, das es Ihnen ermöglicht, Scoped CSS direkt in diesen Beitrag einzufügen. Wenn Sie es wirklich ausgefallen mögen, könnten Sie die Funktionalität eines Plugins wie Custom Field Template nutzen, um es selbst für den am wenigsten versierten Benutzer einfach zu machen, davon zu profitieren, indem er Stilentscheidungen mit einem einfachen Formular trifft!

Im untenstehenden WordPress-Demo habe ich ein Twenty Eleven Child Theme erstellt (was bedeutet, dass ich mich vollständig auf die Standard-WordPress-Vorlage verlasse, mit Ausnahme der drei Seiten, an denen ich geringfügige Anpassungen vorgenommen habe). Die von mir vorgenommenen Änderungen sind wenige und einfach (ich sollte wahrscheinlich auch erwähnen, dass zum Zeitpunkt des Schreibens noch ein weiteres kleines Problem zu beachten ist, das ich mir aber für später aufhebe). Um Scoped CSS zum Laufen zu bringen, füge ich einfach ein wenig Logik zu content.php und content-single.php hinzu, um nach dem benutzerdefinierten Feld „scopedcss" zu suchen und dies dann in einen Style-Block einzufügen. Ich füge diesen Code einfach innerhalb des <article>-Blocks der relevanten Content-Schleifen ein.

<?php 
  $scopedcss = get_post_meta($post->ID, 'scopedcss', false); 

  foreach($scopedcss as $css) {
    echo '<style scoped>'.$css.'</style>';
  } 
?>

Dann habe ich in meinem WordPress-Beitrag einfach das benutzerdefinierte Feld „scopedcss" hinzugefügt und die gewünschten Stile für diesen Beitrag geschrieben.

Hinweis: Wenn Sie an dieser Kunstrichtung auf Beitragsbasis interessiert sind, aber noch nicht bereit für Scoped Styles sind, schauen Sie sich dieses Plugin an, das Ihnen die Meta-Box zur Deklaration von Stilen bietet, aber diese werden nicht gescoped sein; Sie müssen so spezifisch sein wie bei normalem CSS.

Ein Wort der Warnung

Meine eigene Erfahrung mit meiner „Poor-Man’s"-Version davon war nicht nur Sonnenschein und Veilchen; es gibt eine große Schwäche bei diesem Ansatz und bei Scoped CSS: Die Organisation wird sehr schwierig – man hat Stile überall! Scoped CSS hat die Fähigkeit, den Tag zu retten, aber wenn es irgendwie möglich ist, sollten Sie ID-Selektoren und verknüpfte Stylesheets verwenden.

Dies ist einer der Hauptgründe, warum wir Inline-Stile vermeiden sollten. Sie sind unordentlich, sie erhöhen das Gewicht der Seite, das möglicherweise gecached werden sollte, sie sind schwer zu überschreiben, sie können die Fehlersuche erschweren und vor allem sind sie schwer zu warten. Wie Inline-Stile haben Scoped-Stile ihren Platz und können ein mächtiges Werkzeug sein. Verwenden Sie sie weise.

Noch eine größere Warnung

Die Verwendung von Scoped Styles *ohne ein ordnungsgemäßes Polyfill* ist gefährlich. In einem Browser, der sie nicht unterstützt, **werden die von Ihnen deklarierten Stile die gesamte Seite beeinflussen**. Stellen Sie sich vor, Sie verwenden einen Scoped Style, um eine Bildersetzungs-Technik auf dem h1-Titel eines Artikels auf Ihrer Website zu verwenden. Ihr Logo ist auch ein h1, und daher wird das Logo in nicht unterstützenden Browsern ebenfalls ersetzt. Das Ergebnis ist eine umgekehrt-kaskadierende Stil-Katastrophe.

Seien Sie gewarnt. Scoped Styles sind eine sehr nützliche Idee, aber die Tage, an denen Sie sie ohne Polyfill verwenden, sind noch weit entfernt.

Eine jQuery-Lösung

Aufgrund des fehlenden nativen Browser-Supports wäre dies heute eine enttäuschende Demo, wenn es nicht dieses großartige jQuery Polyfill von Simon Madine gäbe. Um meine Demo in WordPress zum Laufen zu bringen, habe ich außerdem

1. jQuery in mein WordPress-Theme eingebunden.
2. Folgenden Code in den Footer des Themes (footer.php im Theme-Ordner) eingefügt.

<script src="<?php bloginfo( 'stylesheet_directory' ); ?>/jquery.scoped.js"></script>
<script>
  $.scoped();
</script>

Willst du spielen?

Chrome 20 ist zum Zeitpunkt des Schreibens der einzige Browser, der Scoped Styles unterstützt. Chrome 20 ist derzeit in Canary erhältlich, einer Vor-Beta-Version, die Sie problemlos parallel zu Stable Chrome ausführen können. Um sie zu verwenden, müssen Sie ein Flag aktivieren, was Sie tun, indem Sie

1. Gehen Sie zur URL chrome://flags/
2. Suchen Sie auf der Seite nach „scoped"
3. Klicken Sie auf „Aktivieren"

Chrome entwickelt sich schnell, daher sollte Chrome 20 in etwa 12 Wochen nach dem Zeitpunkt des Schreibens (Mitte Juli 2012) stabil sein. Ob die Funktion aktiviert sein wird, ist eine andere Frage (wir wissen es einfach noch nicht).

Demos

Eines Tages wird Scoped CSS all die erstaunlichen Dinge, die Sie in diesen Demos sehen, nativ im Browser ohne zusätzliche JavaScript tun. Bis dahin können Sie träumen, darüber auf w3.org hier lesen und diese Demos ansehen

• Eine reine HTML-Demo einer ordnungsgemäßen Implementierung von Scoped CSS (funktioniert zum Zeitpunkt des Schreibens nicht)
• Eine reine HTML-Demo, die dank jQuery tatsächlich funktioniert
• Eine funktionierende WordPress-Demo

Scoped Styles werden, während sie die oben genannten Funktionen liefern, auch in Web Components, einem Vorschlag am W3C zur Definition wiederverwendbarer Widgets in Web-Apps der nächsten Generation, sehr leistungsfähig sein. Spannende Sache.