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 standardowego formatowania:
<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:
a div! a span!
a div! a span!
a div! a span!
Jeśli jednak ustawimy scoped na 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>
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 znajdujących się w tym elemencie <div>. Nazywamy to „ograniczeniem zakresu”, a wynik wygląda tak:
element div! element span!
element div! element span!
element div! element span!
Oczywiście można to zrobić w dowolnym miejscu w tagach. Jeśli chcesz, możesz zagnieżdżać style ograniczone w innych ograniczonych częściach znacznika w dowolnym zakresie, aby uzyskać precyzyjną kontrolę nad tym, gdzie mają być one stosowane.
Przypadki użycia
Do czego to służy?
Typowym zastosowaniem jest rozpowszechnianie treści: gdy jako autor witryny chcesz włączyć treści pochodzące od osób trzecich, 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 ich izolowania 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 znacznika. 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 przypadków użycia 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ą pobierać 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ą flagę „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 „Enable <style scoped>” (Włącz <style scoped>) na stronie chrome://flags (pod koniec), kliknąć „Enable” (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.