update git

docs/browser/03-cssom.md

@@ -2,4 +2,97 @@
 sidebar_position: 3
 ---
 
-# CSSOM
+# CSSOM
+Источник: DeepSeek
+
+CSSOM (CSS Object Model) — это программное представление CSS-стилей в виде иерархической структуры объектов, аналогично
+тому, как DOM (Document Object Model) представляет HTML-документ. CSSOM позволяет JavaScript и другим программам
+динамически читать и изменять стили элементов на веб-странице.
+
+## Зачем нужен CSSOM?
+
+1. **Представление стилей:**
+    - CSSOM преобразует CSS-код в структуру, которую можно программно обрабатывать.
+    - Это позволяет браузеру понимать, как стили применяются к элементам.
+2. **Динамическое изменение стилей:**
+    - JavaScript может использовать CSSOM для изменения стилей элементов на лету.
+    - Пример: изменение цвета, размера, положения элементов в ответ на действия пользователя.
+3. **Оптимизация рендеринга:**
+    - CSSOM используется движком рендеринга браузера для построения дерева рендеринга (Render Tree), которое объединяет
+      DOM и CSSOM для отображения страницы.
+
+## Как создается CSSOM?
+
+1. Браузер загружает CSS-файлы или встроенные стили (`<style>`).
+2. Парсер CSS разбирает CSS-код и создает дерево CSSOM.
+3. Каждое CSS-правило (селектор, свойство, значение) становится объектом в CSSOM.
+4. CSSOM связывается с DOM для применения стилей к элементам.
+
+## Структура CSSOM
+
+CSSOM представляет собой дерево объектов, где каждый узел соответствует CSS-правилу или группе правил. Основные
+компоненты:
+
+1. **Стили (Styles):**
+    - Каждое CSS-правило (например, `color: red;`) представлено как объект.
+2. **Селекторы (Selectors):**
+    - Селекторы (например, `h1`, `.class`, `#id`) используются для определения, к каким элементам применяются стили.
+3. **Медиа-запросы (Media Queries):**
+    - Медиа-запросы (например, `@media (max-width: 600px)`) представлены как отдельные узлы в CSSOM.
+    - Они позволяют применять стили в зависимости от условий (размер экрана, ориентация устройства и т.д.).
+
+CSSOM для этого CSS будет выглядеть примерно так:
+
+```
+CSSOM
+├── body
+│   ├── font-family: Arial, sans-serif
+│   └── background-color: #f0f0f0
+├── h1
+│   ├── color: red
+│   └── font-size: 24px
+└── @media (max-width: 600px)
+    └── h1
+        └── font-size: 18px
+```
+
+## Как CSSOM взаимодействует с DOM?
+
+1. Браузер загружает HTML и CSS.
+2. Парсер HTML создает DOM, а парсер CSS создает CSSOM.
+3. DOM и CSSOM объединяются в дерево рендеринга (Render Tree).
+4. Дерево рендеринга используется для отображения страницы на экране.
+
+## Использование CSSOM в JavaScript
+
+JavaScript может взаимодействовать с CSSOM через объект document.styleSheets. Это позволяет:
+
+- Читать и изменять стили элементов.
+- Добавлять или удалять CSS-правила.
+
+### Преимущества CSSOM:
+
+1. Динамическое управление стилями:
+    - Позволяет изменять стили на лету, что полезно для создания интерактивных интерфейсов.
+2. Гибкость:
+    - Можно добавлять, удалять или изменять CSS-правила программно.
+3. Интеграция с DOM:
+    - CSSOM тесно связан с DOM, что позволяет легко управлять стилями элементов.
+
+### Недостатки CSSOM:
+
+1. Сложность:
+    - Работа с CSSOM через JavaScript может быть сложной и требует понимания структуры CSS.
+2. Производительность:
+    - Частые изменения стилей через CSSOM могут замедлить рендеринг страницы.
+
+### Разница между DOM и CSSOM:
+
+| DOM                                               | CSSOM                              |
+|---------------------------------------------------|------------------------------------|
+| Представляет структуру HTML-документа.            | Представляет структуру CSS-стилей. |
+| Состоит из узлов (элементы, текст, атрибуты).     | Состоит из правил и свойств CSS.   |
+| Используется для изменения содержимого страницы.  | Используется для изменения стилей. |
+| Создается из HTML.                                | Создается из CSS.                  |
+
+CSSOM — это важная часть процесса рендеринга веб-страниц, которая позволяет браузеру применять стили к элементам и динамически изменять их с помощью JavaScript.