Niedawno wdrożyliśmy w Chromium nową funkcję HTML5: arkusze stylów o zakresie ograniczonym, czyli inaczej.
<style scoped>. Autor strony internetowej może ograniczyć reguły stylu tak, aby obejmowały tylko część strony. Aby to zrobić, ustaw atrybut „restricted” (zakres) elementu <style>, który jest bezpośrednim elementem podrzędnym elementu głównego drzewa podrzędnego, do którego chcesz zastosować style. Ogranicza to style do wpływu tylko na element, który jest elementem nadrzędnym dla elementu <style> i wszystkich jego elementów podrzędnych.
Przykład
Oto prosty dokument ze standardowym stylem:
<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 będą kolorować tekst w obrębie dowolnego czerwonego (<div>) i zielonego (<span>):
a div! span!
div! span!
a div! span!
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>
potem ogranicza reguły stylu tak, aby były stosowane do nadrzędnego elementu <div>, który jest nadrzędnym elementem <style scoped>, oraz wszystkiego, co znajduje się w elemencie <div>. Nazywamy to „zakresem” i wynik wygląda tak:
element div! span!
a div! span!
element div! rozpiętość!
Oczywiście można to zrobić w dowolnym miejscu znacznika. Jeśli więc masz ochotę, możesz zagnieździć style z zakresu w innych częściach znaczników w dowolnym stopniu, aby mieć szczegółową kontrolę nad tym, gdzie są stosowane style.
Przypadki użycia
Do czego to służy?
Typowym przypadkiem użycia są treści redystrybuowane: gdy jesteś autorem stron internetowych i chcesz wykorzystać treści pochodzące z innych źródeł, w tym wszystkie style, ale nie chcesz, aby te style „zanieczyściły” inne, niepowiązane ze sobą części strony. Ogromną zaletą takiego rozwiązania jest możliwość łączenia treści z innych witryn, takich jak yelp, twitter, ebay itp., na jednej stronie bez konieczności izolowania stron za pomocą pliku <iframe> lub edycji treści zewnętrznych na bieżąco.
Jeśli korzystasz z systemu zarządzania treścią (CMS), który wysyła fragmenty znaczników, które są połączone razem, aż do ostatecznego wyświetlenia strony, warto skorzystać z tej funkcji, która pozwala stworzyć styl każdego fragmentu odrębnie od pozostałych elementów strony. Może to być równie przydatne również w przypadku witryn wiki.
Jeśli chcesz stworzyć fajny kod demonstracyjny na stronie, możesz łatwo ograniczyć style do treści demonstracyjnej. Możesz w ten sposób eksperymentować z CSS w wersji demonstracyjnej, ale nie wpłynie to na żadne inne strony strony.
Innym przypadkiem użycia jest po prostu hermetyzacja: jeśli na przykład na Twojej stronie internetowej jest menu boczne, w sekcji <style scoped> w tej części znaczników warto umieścić style typowe dla tego menu. Te reguły stylu nie będą miały żadnego wpływu na renderowanie innych części strony, ponieważ będą one ładnie oddzielić od głównej zawartości.
Prawdopodobnie jednym z najbardziej przekonujących przypadków użycia jest model komponentów internetowych. Komponenty internetowe będą świetnym sposobem tworzenia takich elementów, jak suwaki, menu, selektory dat, widżety kart itp. Zapewniając style zakresu, projektant może stworzyć widżet i spakować go ze swoimi stylami jako niezależną jednostkę, którą inni mogą wykorzystać i połączyć w multimedialną aplikację internetową. Planujemy intensywnie korzystać z <style scoped> w przypadku komponentów sieciowych i shadow DOM (który można już włączyć, ustawiając eksperymentalną flagę „shadow DOM” na stronie chrome://flags). Obecnie nie ma dobrego sposobu na ograniczenie stylów do komponentów sieciowych bez uciekania się do stosowania niedozwolonych metod, takich jak style wbudowane. Style z zakresu są tu doskonałym rozwiązaniem.
Po co dodawać element nadrzędny?
Najbardziej naturalnym sposobem jest dołączenie elementu nadrzędnego, tak aby reguły <style scoped> mogły na przykład ustawić wspólny kolor tła dla całego zakresu. Umożliwia też „zabezpieczenie” zapisywanie arkuszy stylów o zakresie w przypadku przeglądarek, które jeszcze nie obsługują <style scoped>, przez dodanie prefiksu do reguł identyfikatora lub selektora klasy jako funkcji zastępczej:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Naśladuje to efekt używania stylów, gdy zaimplementowano zakres ograniczony, ale z pewnym spadkiem wydajności w czasie działania ze względu na bardziej złożony selektor. Zaletą takiego podejścia jest to, że pozwala zastosować sprawne działanie kreacji zastępczej do dnia, w którym interfejs <style scoped> jest powszechnie obsługiwany, a selektory identyfikatorów można po prostu usunąć.
Stan
Ponieważ implementacja arkuszy stylów o zakresie jest wciąż nowa, są one obecnie ukryte za pomocą flagi czasu działania w Chrome. Aby je włączyć, musisz pobrać Chrome w wersji 19 lub nowszej (obecnie Chrome Canary), znaleźć pozycję „Włącz <style scoped>” na stronie chrome://flags (u góry strony), kliknąć „Włącz” i ponownie uruchomić przeglądarkę.
Obecnie nie ma znanych błędów, ale @global i wersje @keyframes i @-webkit-region z ograniczonym zakresem nadal są wdrażane. Poza tym parametr @font-face jest na razie ignorowany, ponieważ istnieje duże prawdopodobieństwo, że specyfikacja ulegnie zmianie.
Chcemy zachęcić wszystkich użytkowników zainteresowanych tą funkcją do jej wypróbowania i podzielenia się swoimi doświadczeniami: dobrymi, złymi i (być może) z błędami.