Konstrualne arkusze stylów

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

Jason Miller

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

Za pomocą JavaScriptu można było zawsze tworzyć arkusze stylów. Jednak do tej pory 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 dystrybucji wartości niestandardowej właściwości CSS do konkretnych poddrzew DOM bez polegania na kaskadowaniu. Można go nawet używać jako bezpośredniego interfejsu do parsowania CSS w przeglądarce, co ułatwia wstępne wczytywanie arkuszy stylów bez wstrzykiwania ich do interfejsu 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). 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 – wszystkie reguły @import są ignorowane i spowodują 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 skonstruowanych 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 programiści 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. Wprowadziliśmy też mechanizm, który pozwala stosować aktualizacje arkuszy stylów do wszystkich zastosowań arkusza stylów, upraszczając takie kwestie jak zmiany motywu i ustawienia kolorów.

Wyświetlanie wersji demonstracyjnej

Perspektywy

Początkowa wersja interfejsu zbudowalnych arkuszy stylów została dostarczona z interfejsem API opisanym w tym artykule, ale 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
• Intencja dostawy
• Discourse