Konstrualne arkusze stylów

Style z możliwością wielokrotnego użycia.

Jason Miller

Arkusze stylów konstrukcyjnej to sposób tworzenia i rozpowszechniania stylów wielokrotnego użytku w Shadow DOM.

Obsługa przeglądarek

  • Chrome: 73.
  • Krawędź: 79.
  • Firefox: 101.
  • Safari: 16.4

Źródło

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.

Diagram przedstawiający przygotowanie i zastosowanie usługi porównywania cen.

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.

Zobacz prezentację

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.

Więcej informacji