Bezproblemowe style wielokrotnego użytku.
Konstruowalne arkusze stylów to sposób na tworzenie i rozpowszechnianie stylów wielokrotnego użytku w Shadow DOM.
Od zawsze możliwe było tworzenie arkuszy stylów za pomocą języka JavaScript. Do tej pory proces ten polegał jednak na tworzeniu elementu <style> za pomocą document.createElement('style'), a następnie uzyskiwaniu dostępu do właściwości jego arkusza w celu uzyskania odniesienia do bazowej instancji CSSStyleSheet. Ta metoda może skutkować zduplikowaniem kodu CSS i jego zdublowanym nalotem, a dołączenie do niego prowadzi do błyśnięcia niesformatowanej treści niezależnie od tego, czy jest ona wzbogacona czy nie. Interfejs CSSStyleSheet to podstawowa część zbioru interfejsów do reprezentacji CSS (tzw. CSSOM). Umożliwia on zautomatyzowaną obsługę arkuszy stylów, a także eliminuje problemy związane ze starą metodą.
Możliwe do budowania arkusze stylów umożliwiają definiowanie i przygotowywanie wspólnych stylów CSS, a następnie stosowanie tych stylów do wielu źródeł cienia lub dokumentu bez powielania ich. Aktualizacje udostępnionego arkusza CSSStyleSheet są stosowane do wszystkich elementów głównych, do których został on przyjęty, a zastosowanie arkusza stylów odbywa się szybko i synchronicznie po wczytaniu arkusza.
Powiązanie konfigurowane przez arkusze stylów do konstrukcji sprawdza się w wielu różnych zastosowaniach. Można go wykorzystać do uzyskania scentralizowanego motywu, który jest wykorzystywany przez wiele komponentów. Może to być instancja CSSStyleSheet przekazywana do komponentów, a aktualizacje motywu są rozpowszechniane automatycznie w komponentach. Można go używać do rozdzielania wartości niestandardowej właściwości CSS w określonych poddrzewach DOM bez korzystania z kaskady. Można go nawet używać jako bezpośredniego interfejsu parsera CSS przeglądarki, co ułatwia wstępne wczytywanie arkuszy stylów bez wstrzykiwania ich do DOM.
Tworzenie arkusza stylów
Zamiast wprowadzać w tym celu nowy interfejs API, specyfikacja Constructable StyleSheets umożliwia tworzenie arkuszy stylów imperatywnie przez wywołanie konstruktora CSSStyleSheet(). Powstały obiekt CSSStyleSheet ma 2 nowe metody, które ułatwiają dodawanie i aktualizowanie reguł arkusza stylów bez wywoływania funkcji Flash of Unstyled Content (FOUC).
Zarówno metody replace(), jak i replaceSync() zastępują arkusz stylów ciągiem CSS, a metoda replace() zwraca obietnicę. W obu przypadkach odwołania do zewnętrznych arkuszy stylów nie są obsługiwane – reguły @import są ignorowane i generują ostrzeżenie.
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 Constructable StyleSheets jest właściwość adoptedStyleSheets
dostępna w Shadow Roots i Dokumentach. Dzięki temu możemy bezpośrednio zastosować style zdefiniowane przez CSSStyleSheet do danego poddrzewa DOM. W tym celu ustawimy właściwość na tablicę co najmniej 1 arkusza stylów do zastosowania do danego 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);
Podsumowanie
Dzięki metodzie Constructable StyleSheet programiści stron internetowych dysponują teraz konkretnym rozwiązaniem do tworzenia arkuszy stylów CSS i stosowania ich w drzewach DOM. Udostępniliśmy nowy interfejs API oparty na Promise do wczytywania arkuszy StyleSheet z ciągu źródła CSS, który korzysta z wbudowanego parsera przeglądarki i wczytywania semantyki. Mamy również mechanizm stosowania aktualizacji arkuszy stylów do wszystkich zastosowań arkusza stylów, co upraszcza np. zmianę motywu i preferencje kolorów.
Perspektywy
Opisana tutaj pierwotna wersja arkuszy stylów Constructable Style Sheet jest dostępna za pomocą interfejsu API, ale wciąż pracujemy nad ułatwieniem jego obsługi. Udostępniamy propozycję rozszerzenia FrozenArray w adoptedStyleSheets o specjalne metody wstawiania i usuwania arkuszy stylów, co wyeliminuje potrzebę klonowania tablic i uniknie potencjalnych zduplikowanych odwołań do arkuszy stylów.