Konstrualne arkusze stylów

Bezproblemowe style wielokrotnego użytku.

Jason Miller

Skompilowane arkuszy stylów to sposób na tworzenie i rozpowszechnianie stylów do wielokrotnego użytku przy użyciu Shadow DOM.

Za pomocą JavaScriptu można było zawsze tworzyć arkusze stylów. Jednak w przeszłości proces polegał na tworzeniu elementu <style> za pomocą document.createElement('style'), a następnie na uzyskiwaniu dostępu do jego właściwości arkusza w celu uzyskania odwołania do elementu CSSStyleSheet. Ta metoda może powodować duplikowanie kodu CSS i powodować jego rozrost. Dołączenie pliku powoduje wyświetlenie treści bez stylów, niezależnie od tego, czy występuje rozrost. Interfejs CSSStyleSheet jest podstawą kolekcji interfejsów reprezentacji CSS, zwanych CSSOM, które zapewniają programowy sposób manipulowania arkuszami stylów, a także eliminują problemy związane ze starą metodą.

Dzięki skonfigurowanym arkuszom stylów można definiować i przygotowywać wspólne style CSS, a potem stosować je do wielu katalogów źródeł cieni lub dokumentu w łatwy sposób i bez duplikowania. 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 skonfigurowane przez spersonalizowane arkusze stylów nadaje się do wielu różnych zastosowań. Można go używać do centralnego motywu używanego przez wiele komponentów: motyw może być instancją CSSStyleSheet przekazaną komponentom, a aktualizacje motywu są automatycznie rozpowszechniane do komponentów. Można go używać do rozdzielania wartości niestandardowych 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ć nowy interfejs API, specyfikacja Constructable StyleSheets umożliwia tworzenie arkuszy stylów w sposób imperatywny 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). Obie metody, replace() i replaceSync(), zastępują arkusze stylów ciągiem znaków CSS, a 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 konstruowalne arkusze stylów jest właściwość adoptedStyleSheets dostępna w korzeniach rzutu cieni i dokumentach. Dzięki temu możemy wyraźnie zastosować style zdefiniowane przez CSSStyleSheet do danego poddrzewa DOM. W tym celu ustawiamy w niej tablicę co najmniej jednej spersonalizowanej czcionki.

// 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 możliwości tworzenia arkuszy stylów za pomocą konstruktorów deweloperzy mają teraz wyraźne rozwiązanie do tworzenia arkuszy stylów CSS i ich stosowania 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 parsowania i semantyki wczytywania przeglądarki. W tym celu mamy mechanizm, który umożliwia stosowanie aktualizacji arkuszy stylów do wszystkich zastosowań arkusza stylów, upraszczając takie rzeczy jak zmiany motywu i ustawienia kolorów.

Zobacz prezentację

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. 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

• Stan platformy Chrome
• Przykład
• API
• Wyjaśnienie
• Intencja wdrożenia
• Zamiar wysyłki
• Discourse