Nowa eksperymentalna funkcja – arkusze stylów z ograniczonym zakresem

Alex Danilo

W Chromium wprowadziliśmy ostatnio nową funkcję HTML5: arkusze stylów z zakresem (nazywanym też). <style scoped>. Autorka stron internetowych może ograniczyć reguły stylu tak, aby miały zastosowanie tylko do części strony. W tym celu należy określić atrybut ograniczony dla elementu <style> bezpośrednio podrzędnego elementu głównego drzewa podrzędnego, do którego mają być stosowane style. Dzięki temu style będą miały wpływ tylko na element nadrzędny elementu <style> oraz wszystkie jego elementy podrzędne.

Przykład

Oto prosty dokument ze stylem standardowym:

<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 stylu pokolorują tekst w obrębie dowolnego czerwonego (<div>) i wewnątrz <span> (zielonego):

a div! rozpiętość!
element div! rozpiętość!
element div! rozpiętość

Jeśli jednak ustawisz scoped w elemencie <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>

a następnie ogranicza reguły stylu, tak aby były one stosowane do nadrzędnego elementu <div>, który jest nadrzędnym elementu <style scoped>, i wszystkich elementów wewnątrz tego elementu (<div>). Nazywamy go „zakresem”, a wynik wygląda tak:

element div! a span!
element div! span!
element div! rozpiętość!

Można to zrobić w dowolnym miejscu znaczników. Jeśli masz odrobinę przygód, możesz zagnieżdżać style z zakresu zakresu w innych częściach znaczników w dowolnym stopniu, aby mieć większą kontrolę nad tym, gdzie stosowane są style.

Przypadki użycia

Do czego to służy?

Częstym przypadkiem użycia jest powielanie treści, gdy jako autor chcesz uwzględnić treści pochodzące od osób trzecich, w tym wszystkie ich style, ale nie chcesz narażać, że te style „zanieczyszczą” inne, niepowiązane części strony. Ważną zaletą jest możliwość łączenia na jednej stronie treści z innych witryn, takich jak yelp, twitter, ebay, bez konieczności izolowania ich za pomocą pola <iframe> czy edytowania na bieżąco zawartości zewnętrznej.

Jeśli korzystasz z systemu zarządzania treścią (CMS), który przesyła fragmenty znaczników, które są łączone w końcową stronę, będzie to świetna funkcja, dzięki której będziesz mieć pewność, że styl każdego fragmentu kodu jest odizolowany od pozostałych elementów strony. Może to być równie przydatne dla witryny wiki.

Jeśli chcesz utworzyć na stronie fajny kod demonstracyjny, możesz łatwo ograniczyć style do treści demonstracyjnych. W wersji demonstracyjnej możesz już opanować działanie CSS, ale nie wpłynie to na żadne inne elementy na stronie.

Innym przypadkiem użycia jest po prostu hermetyzacja: na przykład jeśli strona internetowa ma menu boczne, warto umieścić style specyficzne dla tego menu w sekcji <style scoped> w tej części znaczników. Te reguły stylu nie mają żadnego wpływu na renderowanie innych części strony, dzięki czemu są dobrze oddzielone od głównej treści.

Prawdopodobnie jednym z najciekawszych przypadków użycia jest model komponentów internetowych. Komponenty internetowe stanowią świetny sposób tworzenia takich elementów, jak suwaki, menu, selektory daty, widżety kart itp. Dzięki stylom o zakresie projektant może utworzyć widżet i połączyć go ze swoimi stylami jako niezależną jednostkę, którą inni użytkownicy będą mogli wykorzystać i połączyć w rozbudowaną aplikację internetową. Planujemy intensywnie korzystać z platformy <style scoped> z komponentami internetowymi i modelem shadow DOM (które można już włączyć, ustawiając eksperymentalną flagę „shadow DOM” na stronie chrome://flags). W tej chwili nie ma dobrego sposobu, aby zagwarantować, że style są ograniczone do komponentów sieciowych bez odwoływania się do złych metod, takich jak styl wbudowany, więc style z zakresu zakresu idealnie się do tego nadają.

Dlaczego warto umieścić element nadrzędny?

Najbardziej naturalnym sposobem jest uwzględnienie elementu nadrzędnego, dzięki czemu reguły <style scoped> mogłyby np. ustawiać ten sam kolor tła dla całego zakresu. Umożliwia też defensywne zapisywanie arkuszy stylów zakresu w przeglądarkach, które nie obsługują jeszcze <style scoped>, przez dodanie do reguł przedrostka identyfikatora lub selektora klasy jako kreacji zastępczej:

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

Imituje to efekt używania stylów po zaimplementowaniu „zakresu”, ale ze względu na bardziej złożony selektor w czasie działania aplikacji może nastąpić spadek wydajności w czasie działania. Zaletą tego podejścia jest to, że umożliwia ono zastosowanie metody zastępczej, aż do dnia, w którym właściwość <style scoped> będzie powszechnie obsługiwana i selektory identyfikatorów można po prostu pominąć.

Stan

Ponieważ implementacja arkuszy stylów z zakresem zakresu jest wciąż nowa, są one obecnie ukryte w Chrome za pomocą flagi środowiska wykonawczego. Aby je włączyć, musisz uzyskać wersję Chrome 19 lub nowszą (obecnie Chrome Canary), a następnie znaleźć wpis „Włącz <style scoped>” na stronie chrome://flags (na końcu), kliknąć „Włącz” i ponownie uruchomić przeglądarkę.

W tej chwili nie ma żadnych znanych błędów, ale @global oraz wersje @keyframes i @-webkit-region o określonym zakresie są w trakcie wdrażania. Poza tym @font-face jest na razie ignorowana, ponieważ istnieje duże prawdopodobieństwo, że specyfikacja ulegnie zmianie.

Chcielibyśmy zachęcić wszystkich zainteresowanych tą funkcją do wypróbowania jej i podzielenia się swoimi doświadczeniami dotyczącymi jej dobrych, złych i (najciekawszych) błędów.