Ответ
CSSOM (CSS Object Model) — это API, представляющее CSS в виде дерева объектов, аналогично DOM. Браузер парсит CSS и создаёт CSSOM, который используется вместе с DOM для формирования Render Tree.
Ключевые особенности:
- CSSOM содержит стили, которые можно динамически изменять через JavaScript
- Имеет иерархическую структуру (правила наследования)
- Доступен через
document.styleSheets
Пример работы с CSSOM:
// Получить все стили документа
const styles = document.styleSheets[0];
// Добавить новое правило
styles.insertRule('body { background: red; }', 0);
// Удалить правило
styles.deleteRule(0);CSSOM строится параллельно с DOM, но рендеринг страницы блокируется до полного формирования CSSOM (Critical CSS).
Ответ 18+ 🔞
А, CSSOM, блядь! Ну это ж та самая штука, когда браузер твои стили разбирает и строит из них такое же дерево объектов, как DOM, только для CSS, понимаешь? Ёпта, целое дерево, как в лесу, только вместо листьев — правила, селекторы и прочая хуйня.
Короче, браузер берёт CSS, парсит его, и получается эта самая CSSOM — объектная модель. А потом, сука, он её скрещивает с DOM, и рождается Render Tree, уже готовый к отрисовке. Без этого никуда!
Что там у нас ключевое, блядь?
- Вся эта CSSOM — она живая, её можно ебашить через JavaScript, менять стили на лету, как тебе вздумается.
- Там тоже своя иерархия, всё наследуется, как у людей, блядь. Родительские свойства детям переходят, если не переопределить, конечно.
- Доступ к этой красоте — через
document.styleSheets. Там все твои таблицы стилей лежат, как на ладони.
Смотри, как с ней баловаться можно, чисто для примера:
// Хватаем первую попавшуюся таблицу стилей
const styles = document.styleSheets[0];
// И хуяк — добавляем новое правило, прямо в начало! Пусть фон будет красный, нахуй!
styles.insertRule('body { background: red; }', 0);
// Передумал? Да похуй, удаляем это правило обратно!
styles.deleteRule(0);И самое главное, блядь, что надо помнить: браузер строит CSSOM параллельно с DOM, это да. Но, сука, он не начнёт рендерить страницу, пока CSSOM не будет готов! Это называется Critical CSS — пока все критические стили не проглотит, будет тебя ждать, сидя на голом DOM'е. Так что не наебывайся с большими CSS-файлами, а то пользователь будет смотреть на белый экран, а ты тут со своими правилами играешься.