CSS Scoping in Firefox Nightly
Kommentare

Mit dem Scope-Parameter lernen die Cascading Style Sheets eine neue Separationsebene dazu. Diese könnte vor allem beim Erstellen von HTML-Templates hilfreich werden. Wie das in der Praxis aussehen könnte,

Mit dem Scope-Parameter lernen die Cascading Style Sheets eine neue Separationsebene dazu. Diese könnte vor allem beim Erstellen von HTML-Templates hilfreich werden. Wie das in der Praxis aussehen könnte, zeigt Cameron McCormack in seinem Blogpost.

Was können die CSS-Scopes?

Nehmen wir an, wir haben einen Text mit vielen Absätzen. Der zweite Absatz dieses Textes soll jedoch kursiv geschrieben werden, wenn wir den Cursor darüber halten. Ab sofort haben wir dafür die Möglichkeit, das <style>-Element mit dem scoped-Parameter zu versehen, um das <p>-Element, das sich darum (oder darunter) befindet, spezifisch nachzustylen. Beschränkungen des style=““-Elements wie die fehlende Unterstützung für Pseudoklassen werden damit eleganter umgangen als mit IDs und Einträgen im globalen CSS. À Propos spezifisch…

Entlang der CSS-Kaskade befindet sich der Scope hierarchisch über den Specificity-Kriterien, wie aus dem Editor’s Draft im W3C hervorgeht. Damit ist sichergestellt, dass Templates die gescopeten Styles auch dann nicht verlieren, wenn sich das dahinter liegende CSS ändert.

Als Anwendungsbeispiel nennt McCormack Portale zur Content-Aggregation, bei denen die Quellen einzelner Inhalte durch spezifisches Styling erkennbar bleiben sollen:

One use case for scoped style sheets is to isolate a set of style rules that apply to a single article or comment within a page to ensure that they cannot affect the style of other elements on the page. On a web site that aggregates articles from different authors, this could allow the designer of the overall site to know that the elements of the page outside the article itself will not be affected by the article’s styles.

Einer der ersten Browser, mit denen sich das Feature testen lässt, ist der Nightly Build von Firefox 21. Der Installer dazu ist bei Mozilla.org für Windows, Mac, Linux und Android erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -