Nowa eksperymentalna funkcja – arkusze stylów z ograniczonym zakresem

Alex Danilo

Chromium niedawno wdrożył nową funkcję HTML5: ograniczone arkusze stylów, czyli <style scoped>. Autor strony może ograniczyć stosowanie reguł stylów tylko do części strony, ustawiając atrybut „ograniczony” w elemencie <style>, który jest bezpośrednim podrzędnym elementem elementu rdzeniowego poddrzewa, do którego mają być stosowane style. Ogranicza to działanie stylów tylko do elementu nadrzędnego elementu <style> i wszystkich jego elementów potomnych.

Przykład

Oto prosty dokument, który używa stylów standardowych:

<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>

Określone reguły stylów spowoduje, że tekst w dowolnym <div> będzie czerwony, a w dowolnym <span> – zielony:

div span
div span
div span

Jeśli jednak ustawimy wartość scoped dla elementu <style>:

<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>

następnie ogranicza reguły stylów tak, aby były stosowane do otaczającego elementu <div>, który jest elementem nadrzędnym elementu <style scoped>, oraz do wszystkich elementów wewnątrz tego elementu <div>. Nazywamy to „ograniczeniem zakresu”, a wynik wygląda tak:

element div! element span!
element div! element span!
element div! element span!

Można to zrobić w dowolnym miejscu znacznika. Jeśli masz ochotę na eksperymenty, możesz zagnieżdżać style ograniczone w innych ograniczonych częściach znacznika, aby uzyskać precyzyjną kontrolę nad tym, gdzie mają być stosowane.

Przypadki użycia

Do czego to służy?

Typowym zastosowaniem jest zwielokrotnione wykorzystanie treści: gdy jako autor witryny chcesz włączyć treści pochodzące od innych osób, w tym ich style, ale nie chcesz ryzykować, że te style „zanieczyszczą” inne, niezwiązane z nimi części strony. Dużą zaletą jest możliwość łączenia treści z innych witryn, takich jak Yelp, Twitter, eBay itp., na jednej stronie bez konieczności izolowania ich za pomocą <iframe> lub edytowania na bieżąco.

Jeśli korzystasz z systemu zarządzania treścią (CMS), który wysyła fragmenty znaczników, które są łączone w jedną stronę, ta funkcja świetnie sprawdza się w zapewnieniu, że każdy fragment jest stylizowany niezależnie od innych elementów na stronie. Może to być równie przydatne w przypadku wiki.

Jeśli chcesz utworzyć na stronie ładny kod demonstracyjny, możesz łatwo ograniczyć style tylko do treści demonstracyjnych. Dzięki temu możesz dowolnie modyfikować plik CSS w wersji demonstracyjnej, nie wpływając na inne elementy strony.

Innym zastosowaniem jest po prostu enkapsulacja: jeśli np. Twoja strona internetowa ma menu boczne, warto umieścić style charakterystyczne dla tego menu w sekcji <style scoped> w tej części znaczników. Te reguły stylów nie będą miały żadnego wpływu na renderowanie innych części strony, co pozwoli na ich wyraźne oddzielenie od głównej zawartości.

Jednym z najbardziej przekonujących zastosowań jest prawdopodobnie model komponentu internetowego. Komponenty internetowe to świetny sposób na tworzenie suwaków, menu, selektorów dat, widżetów kart itp. Dzięki udostępnianiu ograniczonych stylów projektant może tworzyć widżety i pakować je ze stylami jako samodzielne jednostki, które inni mogą wykorzystywać i łączyć w bogate aplikacje internetowe. Planujemy intensywne korzystanie z komponentów Web Components i modelu shadow DOM (który można już włączyć, ustawiając eksperymentalną opcję „shadow DOM” w chrome://flags).<style scoped> Obecnie nie ma dobrego sposobu na ograniczenie stylów do komponentów sieciowych bez stosowania nieprawidłowych praktyk, takich jak stylowanie wstawiane, więc style ograniczone są idealnym rozwiązaniem.

Dlaczego należy uwzględnić element nadrzędny?

Najbardziej naturalnym sposobem jest uwzględnienie elementu nadrzędnego, aby reguły <style scoped> mogły na przykład ustawić wspólny kolor tła dla całego zakresu. Umożliwia też tworzenie ograniczonych arkuszy stylów „w trybie defensywnym” w przypadku przeglądarek, które nie obsługują jeszcze <style scoped>. W tym celu należy dodać do reguł prefiks z identyfikatorem lub selektorem klasy jako elementem zapasowym:

<div id="menu">
    <style scoped>
    #menu .main { … }
    #menu .sub { … }
    …

To naśladuje efekt stosowania stylów, gdy zaimplementowano „ograniczenie zakresu”, ale z pewnym spadkiem wydajności w czasie wykonywania kodu ze względu na bardziej złożony selektor. Zaletą tego podejścia jest to, że umożliwia ono płynne przejście na <style scoped>, gdy będzie ono powszechnie obsługiwane, a selektory identyfikatorów można będzie po prostu usunąć.

Stan

Ponieważ implementacja ograniczonych arkuszy stylów jest wciąż nowa, są one obecnie ukryte w Chrome za pomocą flagi czasu wykonywania. Aby je włączyć, musisz zainstalować wersję Chrome w wersji 19 lub nowszej (obecnie jest to Chrome Canary), a potem odszukać wpis „Włącz <style scoped>” na stronie chrome://flags (pod koniec), kliknąć „Włącz” i ponowić uruchomienie przeglądarki.

Obecnie nie ma żadnych znanych błędów, ale @global i wersje ograniczone @keyframes i @-webkit-region są nadal wdrażane. Ponadto @font-face jest obecnie ignorowany, ponieważ istnieje duże prawdopodobieństwo, że specyfikacja ulegnie zmianie.

Zachęcamy wszystkich zainteresowanych tą funkcją do jej wypróbowania i poinformowania nas o wrażeniach: zarówno tych dobrych, jak i tych złych, a może nawet o problemach.