CSS Object Model¶

CSS Object Model (CSSOM) — это программный интерфейс, предоставляющий возможность динамически читать, изменять и управлять стилями CSS (каскадных таблиц стилей) веб-страницы через скриптовые языки, такие как JavaScript. CSSOM является частью веб-платформы и тесно связан с Document Object Model (DOM), образуя вместе с ним основу для рендеринга веб-страниц в браузере. В отличие от DOM, который представляет структуру HTML-документа, CSSOM представляет собой древовидную структуру всех правил и значений CSS, применяемых к документу.

¶История и стандартизация

Концепция программного доступа к стилям существовала в ранних браузерах, но была нестандартизированной и ограниченной. В 1998 году консорциум W3C опубликовал первую версию спецификации Document Object Model (DOM) Level 2, которая включала модуль CSS Object Model (CSSOM). Эта спецификация определяла базовые интерфейсы для работы с таблицами стилей, правилами и отдельными свойствами.

В последующие годы спецификация развивалась. В 2011 году была опубликована CSSOM Level 2, которая расширила возможности, добавив поддержку медиа-запросов, анимаций и других современных возможностей CSS. В 2016 году CSSOM был интегрирован в более широкую спецификацию CSS Object Model (CSSOM) View Module, которая определяет, как CSSOM взаимодействует с областью просмотра (viewport) и визуальным форматированием.

На сегодняшний день CSSOM является частью стандарта HTML Living Standard, поддерживаемого WHATWG (Web Hypertext Application Technology Working Group), что обеспечивает его единообразную реализацию во всех современных браузерах.

¶Архитектура и структура

CSSOM представляет собой объектное дерево, которое строится браузером на основе всех CSS-правил, применимых к документу. Основные компоненты этого дерева:

¶Таблицы стилей (StyleSheetList)

Каждый документ имеет коллекцию таблиц стилей, доступную через свойство document.styleSheets. Эта коллекция включает все внешние CSS-файлы, внутренние <style>-блоки и встроенные стили (атрибут style).

¶Объект CSSStyleSheet

Каждая таблица стилей представлена объектом CSSStyleSheet, который содержит:

• cssRules — коллекция правил (CSSRuleList) внутри таблицы.
• ownerNode — ссылка на HTML-элемент, который её содержит (<link> или <style>).
• href — URL для внешних таблиц стилей.
• disabled — флаг, позволяющий отключить или включить таблицу стилей.

¶Правила (CSSRuleList)

Коллекция правил, где каждое правило является объектом CSSRule. Основные типы правил:

• CSSStyleRule — обычное правило с селектором и блоком объявлений (например, .class { color: red; }).
• CSSMediaRule — правило @media, содержащее вложенные правила.
• CSSFontFaceRule — правило @font-face.
• CSSKeyframesRule — правило @keyframes.
• CSSImportRule — правило @import.
• CSSSupportsRule — правило @supports.

¶CSSStyleDeclaration

Каждое правило CSSStyleRule содержит объект style, который является экземпляром CSSStyleDeclaration. Этот объект предоставляет доступ к отдельным CSS-свойствам (например, color, font-size, margin) и позволяет их читать, изменять и удалять.

¶Основные интерфейсы и методы

CSSOM предоставляет несколько ключевых интерфейсов для взаимодействия со стилями:

¶Чтение и изменение существующих правил

``javascript // Получить первую таблицу стилей const sheet = document.styleSheets[0]; // Получить первое правило const rule = sheet.cssRules[0]; // Прочитать значение свойства console.log(rule.style.color); // Изменить значение свойства rule.style.color = 'blue'; ``

¶Создание новых правил

``javascript // Добавить новое правило в конец таблицы sheet.insertRule('.new-class { background: yellow; }', sheet.cssRules.length); ``

¶Удаление правил

``javascript // Удалить первое правило sheet.deleteRule(0); ``

¶Работа с встроенными стилями

``javascript const element = document.getElementById('myElement'); // Чтение встроенного стиля console.log(element.style.color); // Установка встроенного стиля element.style.backgroundColor = 'red'; ``

¶Получение вычисленных стилей

Метод window.getComputedStyle(element) возвращает объект CSSStyleDeclaration, содержащий окончательные значения всех CSS-свойств элемента после применения всех каскадов, наследования и специфичности.

``javascript const computedStyle = window.getComputedStyle(element); console.log(computedStyle.fontSize); ``

¶Применение

CSSOM используется в широком спектре задач веб-разработки:

¶Динамическое изменение стилей

Наиболее распространённое применение — изменение внешнего вида элементов в ответ на действия пользователя или события. Например, изменение цвета кнопки при нажатии, анимация меню, адаптация макета под разные размеры экрана.

¶Создание тем и переключение стилей

CSSOM позволяет динамически загружать, отключать и заменять целые таблицы стилей, что используется для реализации тёмных и светлых тем, смены шрифтов или цветовых схем.

¶Разработка инструментов разработчика

Браузерные инструменты разработчика (DevTools) активно используют CSSOM для отображения и редактирования стилей в реальном времени. Панели «Styles» и «Computed» в Chrome DevTools, Firefox Developer Tools и Safari Web Inspector основаны на CSSOM.

¶Тестирование и автоматизация

В автоматизированных тестах (например, с использованием Puppeteer или Selenium) CSSOM позволяет проверять, что стили применяются корректно, и программно изменять их для тестирования различных состояний интерфейса.

¶Анимации и переходы

CSSOM предоставляет доступ к правилам @keyframes и @transition, что позволяет создавать сложные анимации, управлять их параметрами и динамически изменять ключевые кадры.

¶Ограничения и особенности

¶Производительность

Частое изменение стилей через CSSOM может вызывать перерасчёт макета (reflow) и перерисовку (repaint) страницы, что негативно сказывается на производительности. Рекомендуется группировать изменения и использовать техники, такие как requestAnimationFrame, для минимизации перерисовок.

¶Синхронность

CSSOM является синхронным интерфейсом — все операции выполняются немедленно. Это может приводить к блокировке основного потока при работе с большими таблицами стилей.

¶Доступ к внешним таблицам стилей

Из-за политики безопасности (Same-Origin Policy) скрипты не могут получить доступ к правилам CSS-файлов, загруженных с другого домена, если сервер не разрешает это через CORS (Cross-Origin Resource Sharing).

¶Отсутствие доступа к псевдоэлементам

CSSOM не предоставляет прямого доступа к стилям псевдоэлементов (::before, ::after) через element.style. Их можно только читать через window.getComputedStyle, но не изменять напрямую.

¶Связь с DOM и рендерингом

CSSOM и DOM вместе образуют Render Tree — дерево, которое используется браузером для отрисовки страницы. Процесс рендеринга включает несколько этапов:

1. Парсинг HTML → построение DOM.
2. Парсинг CSS → построение CSSOM.
3. Объединение DOM и CSSOM → формирование Render Tree.
4. Вычисление макета (Layout) — определение размеров и позиций элементов.
5. Отрисовка (Paint) — преобразование дерева в пиксели.

Любое изменение CSSOM или DOM может инициировать повторный проход по этому циклу, что важно учитывать при оптимизации производительности.

¶Интересные факты

• CSSOM был впервые реализован в браузере Internet Explorer 5.0 (1999 год), но в нестандартном виде.
• Стандартная спецификация CSSOM Level 2 была опубликована W3C только в 2011 году, хотя браузеры поддерживали её частично с 2000-х годов.
• В современных браузерах CSSOM используется не только для стилей, но и для работы с CSS-переменными (custom properties), которые можно динамически изменять через element.style.setProperty('--my-var', 'value').
• Метод window.getComputedStyle является одним из самых медленных в JavaScript, так как требует полного пересчёта стилей для элемента.

¶Источники

• W3C Specification: CSS Object Model (CSSOM) Level 1
• WHATWG HTML Living Standard: CSSOM
• MDN Web Docs: CSS Object Model
• "CSS: The Definitive Guide" by Eric A. Meyer and Estelle Weyl
• "High Performance Browser Networking" by Ilya Grigorik