Style z możliwością wielokrotnego użycia.
Arkusze stylów konstrukcyjnej to sposób tworzenia i rozpowszechniania stylów wielokrotnego użytku w Shadow DOM.
Za pomocą JavaScriptu zawsze można było tworzyć arkusze stylów. Jednak w przeszłości proces tworzenia elementu <style>
za pomocą elementu document.createElement('style')
polegał na uzyskiwaniu odwołania do właściwości arkusza, aby uzyskać odwołanie do elementu CSSStyleSheet. Ta metoda może spowodować zduplikowanie kodu CSS i jego zduplikowania,
a czynności związane z ich dołączaniem prowadzi do błyskawicznych, niesformatowanych treści, niezależnie od tego, czy
lub nie. Interfejs CSSStyleSheet
jest podstawą kolekcji CSS
interfejsów reprezentacyjnych określanych jako
CSSOM,
oferuje zautomatyzowany sposób manipulowania arkuszami stylów, a także eliminuje
związane ze starymi metodami.
Konstruowalne arkusze stylów umożliwiają definiowanie i przygotowywanie wspólnego kodu CSS stylów, a następnie zastosować je do wielu elementów cieni lub łatwo i bez powielania. Aktualizacje współdzielonego szablonu CSS są stosowane do wszystkich korzeni, w których został on przyjęty, a przyjęcie szablonu jest szybkie i synchroniczne po załadowaniu arkusza.
Powiązanie konfigurowane przez arkusze stylów do konstrukcji sprawdza się w przypadku
wiele różnych aplikacji. Pozwala stworzyć scentralizowany motyw
używane przez wiele komponentów: motywem może być wystąpienie CSSStyleSheet
przekazywane do
z aktualizacjami motywu, które są rozpowszechnione w komponentach.
automatycznie. Można go używać do dystrybucji wartości własnej właściwości CSS do konkretnych poddrzew DOM bez polegania na kaskadowaniu. Może nawet
może być używany jako bezpośredni interfejs parsera CSS przeglądarki, co ułatwia
wstępne wczytywanie arkuszy stylów bez wstrzykiwania ich do modelu DOM.
Tworzenie arkusza stylów
Zamiast wprowadzać nowy interfejs API, specyfikacja Constructable StyleSheets umożliwia tworzenie arkuszy stylów w sposób imperatywny przez wywołanie konstruktora CSSStyleSheet()
. Wygenerowany obiekt CSSStyleSheet zawiera 2 nowe metody, które umożliwiają bezpieczniejsze dodawanie i aktualizowanie reguł arkusza stylów bez wywoływania flasha niesformatowanego zawartości (FOUC).
replace()
oraz
replaceSync()
obie metody zastępują arkusz stylów ciągiem CSS oraz replace()
zwraca obietnicę. W obu przypadkach odwołania do zewnętrznych arkuszy stylów
obsługiwane – wszystkie 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
adoptedStyleSheets
usługa dostępna w Shadow
Korzenie
i Dokumenty. Dzięki temu możemy wyraźnie zastosować style zdefiniowane przez CSSStyleSheet
do danego poddrzewa DOM. W tym celu ustawimy właściwość na tablicę co najmniej jednego arkusza stylów
dla 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 tworzenia arkuszy stylów CSS i stosowania ich do drzew DOM. Mamy dla Ciebie nową Oparty na obietnic interfejs API do wczytywania arkuszy stylów z ciągu źródła CSS, które korzysta z z wbudowanym parserem przeglądarki i semantyką wczytywania. Na koniec mechanizm stosowania aktualizacji arkusza stylów do wszystkich zastosowań arkusza stylów; upraszczania takich elementów, jak zmiana motywu i preferencje kolorów.
Perspektywy
Początkowa wersja arkuszy stylów Constructable Stylesheets udostępniana z interfejsem API
tego artykułu, ale wciąż pracujemy nad ułatwieniem jego obsługi. Istnieje propozycja rozszerzenia klasy adoptedStyleSheets
FrozenArray o specjalne metody wstawiania i usuwania arkuszy stylów, co pozwoliłoby uniknąć konieczności klonowania tablicy i potencjalnych zduplikowanych odwołań do arkuszy stylów.