Конструируемые таблицы стилей

Удобные стили для многократного использования.

Jason Miller

Конструируемые таблицы стилей – это способ создавать и распространять стили, которые можно использовать повторно, при работе с Shadow DOM.

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 101.
  • Safari: 16.4.

Source

Создавать таблицы стилей с помощью JavaScript можно было всегда. Однако исторически сложилось так, что для этого создавался элемент <style> с помощью document.createElement('style'), а затем использовалось его свойство sheet, чтобы получить ссылку на базовый экземпляр CSSStyleSheet. Этот метод может привести к дублированию кода CSS и его сопутствующему раздуванию, а акт прикрепления приводит к вспышке нестилизованного контента независимо от того, есть ли раздувание или нет. Интерфейс CSSStyleSheet – это основа набора интерфейсов представления CSS, называемого CSSOM. Он позволяет программно управлять таблицами стилей и устраняет проблемы, связанные со старым методом.

Диаграмма, показывающая поток от созданного CSS до создания экземпляра и приложения.

Конструируемые таблицы стилей позволяют определять и подготавливать общие стили CSS, а затем легко и без дублирования применять эти стили к нескольким корням Shadow Root или документу. Обновления, внесенные в общую таблицу CSSStyleSheet, применяются ко всем корневым элементам, в которые она была добавлена. Добавление таблицы стилей выполняется быстро и синхронно после ее загрузки.

Связь, установленная Constructable Stylesheets, хорошо подходит для ряда различных приложений. Его можно использовать для создания централизованной темы, используемой многими компонентами: тема может быть экземпляром CSSStyleSheet, передаваемым компонентам, при этом обновления темы автоматически распространяются на компоненты. Его можно использовать для распределения значений пользовательских свойств CSS по определенным поддеревьям DOM, не полагаясь на каскад. Его можно даже использовать в качестве прямого интерфейса для синтаксического анализатора CSS браузера, что упрощает предварительную загрузку таблиц стилей без их внедрения в DOM.

Создание таблицы стилей

Вместо того чтобы вводить новый API, спецификация Constructable StyleSheets позволяет создавать таблицы стилей императивно, вызывая конструктор CSSStyleSheet(). Результирующий объект CSSStyleSheet имеет два новых метода, которые делают более безопасным добавление и обновление правил таблицы стилей без запуска Flash of Unstyled Content (FOUC). Методы replace() и replaceSync() заменяют таблицу стилей строкой CSS, а replace() возвращает Promise. В обоих случаях ссылки на внешние таблицы стилей не поддерживаются. Правила @import игнорируются и вызывают предупреждение.

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

Как использовать созданные таблицы стилей

Вторая новая функция, представленная Constructable StyleSheets, – это свойство adoptedStyleSheets, доступное в Shadow Roots и Documents. Это позволяет нам явно применять стили, определенные CSSStyleSheet, к заданному поддереву DOM. Для этого мы задаем для свойства массив из одной или нескольких таблиц стилей, которые будут применены к этому элементу.

// 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);

Подведем итоги

С помощью Constructable StyleSheets веб-разработчики теперь имеют явное решение для создания таблиц стилей CSS и их применения к деревьям DOM. У нас есть новый API на основе Promise для загрузки таблиц стилей из строки источника CSS, который использует встроенный синтаксический анализатор браузера и семантику загрузки. Наконец, у нас есть механизм применения обновлений таблицы стилей ко всем случаям использования StyleSheet, что упрощает такие вещи, как изменение темы и цветовые предпочтения.

Посмотреть демоверсию

Перспективы

Первоначальная версия Constructable Stylesheets поставлялась с API, описанным здесь, но сейчас ведется работа над тем, чтобы упростить его использование. Существует предложение расширить adoptedStyleSheets FrozenArray специальными методами для вставки и удаления таблиц стилей, что устранит необходимость клонирования массивов и позволит избежать потенциальных дублирующихся ссылок на таблицы стилей.

Дополнительная информация