Tworzenie arkuszy stylów

Style wielokrotnego użytku.

Jason Miller

Konstruowalne arkusze stylów to sposób na tworzenie i rozpowszechnianie stylów wielokrotnego użytku podczas korzystania z Shadow DOM.

Browser Support

• 73
• 79
• 101
• 16.4

Source

Tworzenie arkuszy stylów za pomocą JavaScriptu zawsze było możliwe. Jednak do tej pory proces polegał na utworzeniu elementu <style> za pomocą document.createElement('style'), a następnie uzyskaniu dostępu do jego właściwości arkusza, aby uzyskać odwołanie do instancji CSSStyleSheet. Ta metoda może powodować powielanie kodu CSS i jego nadmierne rozbudowanie, a dołączanie prowadzi do wyświetlania nieostylowanych treści, niezależnie od tego, czy kod jest nadmiernie rozbudowany, czy nie. Interfejs CSSStyleSheet jest podstawą kolekcji interfejsów reprezentacji CSS, nazywanych CSSOM, które umożliwiają programowe manipulowanie arkuszami stylów i eliminują problemy związane ze starą metodą.

Constructable Stylesheets umożliwiają definiowanie i przygotowywanie udostępnionych stylów CSS, a następnie stosowanie ich do wielu elementów Shadow Root lub dokumentu w łatwy sposób i bez duplikowania. Aktualizacje udostępnionego arkusza CSSStyleSheet są stosowane do wszystkich elementów głównych, do których został on zaadoptowany. Zaadoptowanie arkusza stylów po jego wczytaniu jest szybkie i synchroniczne.

Powiązanie skonfigurowane przez arkusze stylów Constructable Stylesheets dobrze nadaje się do wielu różnych aplikacji. Można go użyć do udostępnienia scentralizowanego motywu używanego przez wiele komponentów: motyw może być instancją CSSStyleSheet przekazywaną do komponentów, a aktualizacje motywu są automatycznie propagowane do komponentów. Można go używać do rozpowszechniania wartości właściwości niestandardowych CSS w określonych poddrzewach DOM bez polegania na kaskadzie. Można go nawet używać jako bezpośredniego interfejsu do 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(). Wynikowy obiekt CSSStyleSheet ma 2 nowe metody, które zwiększają bezpieczeństwo dodawania i aktualizowania reguł arkusza stylów bez wywoływania błysku niestylizowanej treści (FOUC). Metody replace() i replaceSync() zastępują arkusz stylów ciągiem znaków CSS, a replace() zwraca obiekt Promise. W obu przypadkach odwołania do zewnętrznych arkuszy stylów nie są obsługiwane – wszystkie reguły @import są ignorowane i powodują 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..."

We wcześniejszych wersjach specyfikacji metoda replace() zezwalała na reguły @import i zwracała obiekt Promise, który był rozwiązywany po zakończeniu ich wczytywania. W Chrome 84 ta funkcja została usunięta ze specyfikacji, a reguły @import są ignorowane i wyświetlane jest ostrzeżenie.

Korzystanie z utworzonych arkuszy stylów

Drugą nową funkcją wprowadzoną przez Constructable StyleSheets jest właściwość adoptedStyleSheets dostępna w Shadow Roots i Documents. Dzięki temu możemy bezpośrednio zastosować style zdefiniowane przez CSSStyleSheet do danego poddrzewa DOM. W tym celu ustawiamy właściwość na tablicę zawierającą co najmniej 1 arkusz stylów, który ma zostać zastosowany do tego 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);

We wcześniejszych wersjach specyfikacji właściwość adoptedStyleSheets była implementowana jako zamrożona tablica, co oznacza, że mutacje w miejscu, takie jak push(), powodowały wyjątek. Dodanie nowego arkusza stylów wymagało ponownego zdefiniowania tablicy: `document.adoptedStyleSheets = [...document.adoptedStyleSheets, newSheet] Nie jest to już konieczne, ponieważ specyfikacja została zaktualizowana, aby umożliwić mutacje tablicy.

Łączę wszystko w całość

Dzięki Constructable StyleSheets programiści stron internetowych mają teraz gotowe rozwiązanie do tworzenia arkuszy stylów CSS i stosowania ich do drzew DOM. Mamy nowy interfejs API oparty na obietnicach do wczytywania arkuszy stylów z ciągu źródła CSS, który korzysta z wbudowanego parsera przeglądarki i semantyki wczytywania. Na koniec mamy mechanizm stosowania aktualizacji arkusza stylów do wszystkich zastosowań arkusza StyleSheet, co upraszcza takie kwestie jak zmiany motywu i preferencje kolorów.

Obejrzyj wersję demonstracyjną

Perspektywy

Początkowa wersja arkuszy Constructable Stylesheets została dostarczona z opisanym tutaj interfejsem API, ale trwają prace nad ułatwieniem korzystania z nich. Istnieje propozycja rozszerzenia adoptedStyleSheets FrozenArray o dedykowane metody wstawiania i usuwania arkuszy stylów, co wyeliminowałoby potrzebę klonowania tablic i pozwoliło uniknąć potencjalnych duplikatów odniesień do arkuszy stylów.

Więcej informacji

• Stan platformy Chrome
• Przykład
• API
• Wyjaśniający
• Zamiar wdrożenia
• Zamiar wysyłki
• Discourse