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

Бесшовные многоразовые стили.

Джейсон Миллер

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

Поддержка браузера

  • Хром: 73.
  • Край: 79.
  • Фаерфокс: 101.
  • Сафари: 16.4.

Источник

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

Схема, показывающая подготовку и применение CSS.

Конструируемые таблицы стилей позволяют определять и готовить общие стили CSS, а затем легко и без дублирования применять эти стили к нескольким теневым корням или документу. Обновления общего 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, — это принятое свойство StyleSheets, доступное в 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, который использует встроенный анализатор браузера и семантику загрузки. Наконец, у нас есть механизм применения обновлений таблицы стилей ко всем случаям использования таблицы стилей, упрощая такие вещи, как изменение темы и цветовые предпочтения.

Посмотреть демо

Заглядывая в будущее

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

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