Konstrualne arkusze stylów

Płynne style wielokrotnego użytku

Jason Miller

Konstruowalne arkusze stylów umożliwiają tworzenie i rozpowszechnianie stylów wielokrotnego użytku podczas korzystania z Shadow DOM.

Zawsze można było tworzyć arkusze stylów za pomocą JavaScript. Jednak historycznie proces ten polegał na utworzeniu elementu <style> za pomocą document.createElement('style'), a następnie uzyskaniu dostępu do jego właściwości sheet, aby uzyskać odniesienie do bazowej CSSStyleSheet. Ta metoda może powodować duplikowanie kodu CSS i związany z tym wzrost rozmiaru kodu, a dołączanie prowadzi do migania treści bez stylów, niezależnie od tego, czy kod jest rozrośnięty, czy nie. Interfejs CSSStyleSheet jest korzeniem kolekcji interfejsów reprezentacji CSS nazywanych CSSOM, co umożliwia programowe manipulowanie arkuszami stylów oraz eliminuje problemy związane ze starą metodą.

Konstruowalne arkusze stylów umożliwiają definiowanie i przygotowywanie udostępnionych stylów CSS, a następnie łatwe stosowanie tych stylów do wielu korzeni Shadow lub dokumentu bez duplikowania. Aktualizacje udostępnionego arkusza CSSStyleSheet są stosowane do wszystkich korzeni, w których został on przyjęty, a przyjęcie arkusza stylów jest szybkie i synchroniczne po jego wczytaniu.

Powiązanie utworzone przez konstruowalne arkusze stylów dobrze sprawdza się w wielu różnych zastosowaniach. Można go używać do udostępniania scentralizowanego motywu używanego przez wiele komponentów: motyw może być instancją CSSStyleSheet przekazywaną do komponentów, a aktualizacje motywu są automatycznie propagowane do komponentów. Można go używać do rozpowszechniania wartości niestandardowych właściwości CSS w określonych poddrzewach DOM bez polegania na kaskadzie. Można go nawet używać jako bezpośredniego interfejsu do analizatora CSS w przeglądarce, co ułatwia wstępne wczytywanie arkuszy stylów bez wstrzykiwania ich do DOM.

Tworzenie arkusza stylów

Zamiast wprowadzać nowy interfejs API, specyfikacja konstruowalnych arkuszy stylów umożliwia tworzenie arkuszy stylów w sposób imperatywny przez wywołanie konstruktora CSSStyleSheet(). Wynikowy obiekt CSSStyleSheet ma 2 nowe metody, które zwiększają bezpieczeństwo dodawania i aktualizowania reguł arkusza stylów bez wywoływania migania treści bez stylów (FOUC). Metody replace() i replaceSync() zastępują arkusz stylów ciągiem CSS, a replace() zwraca obietnicę. W obu przypadkach odniesienia do zewnętrznych arkuszy stylów nie są obsługiwane – wszystkie reguły @import są ignorowane i powodują wyświetlenie ostrzeżenia.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

Korzystanie z utworzonych arkuszy stylów

Drugą nową funkcją wprowadzoną przez konstruowalne arkusze stylów jest właściwość adoptedStyleSheets dostępna w korzeniach Shadow i dokumentach. Umożliwia to jawne stosowanie stylów zdefiniowanych przez CSSStyleSheet do danego poddrzewa DOM. Aby to zrobić, ustawiamy właściwość na tablicę zawierającą co najmniej 1 arkusz stylów, który ma być zastosowany do tego elementu.

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');

// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);

Łączę wszystko w całość

Dzięki konstruowalnym arkuszom stylów programiści stron internetowych mają teraz wyraźne rozwiązanie do tworzenia arkuszy stylów CSS i stosowania ich do drzew DOM. Mamy nowy interfejs API oparty na obietnicach do wczytywania arkuszy stylów z ciągu źródłowego CSS, który korzysta z wbudowanego analizatora i semantyki wczytywania przeglądarki. Wreszcie mamy mechanizm stosowania aktualizacji arkusza stylów do wszystkich zastosowań arkusza stylów, co upraszcza takie kwestie jak zmiany motywu i preferencje kolorów.

Wyświetl prezentację

Perspektywy

Pierwsza wersja konstruowalnych arkuszy stylów została dostarczona z opisanym tutaj interfejsem API, ale trwają prace nad ułatwieniem korzystania z niego. Istnieje a propozycja rozszerzenia FrozenArray adoptedStyleSheets o dedykowane metody wstawiania i usuwania arkuszy stylów, co wyeliminuje konieczność klonowania tablicy i pozwoli uniknąć potencjalnych duplikatów odniesień do arkuszy stylów.

Więcej informacji

• Stan platformy Chrome
• Przykład
• API
• Film z wyjaśnieniem
• Zamiar wdrożenia
• Zamiar udostępnienia
• Discourse