Как работает CSS изнутри

Давайте начнем с понимания того, что на самом деле происходит с нашим кодом CSS, когда мы загружаем веб-страницу в браузере.

Когда браузер начинает загружать исходный HTML-файл, он берет загруженный HTML-код и анализирует его, что означает, что он будет декодировать его построчно.

Посредством этого процесса браузер создает так называемый DOM (модальный объект документа), который описывает весь веб-документ в дереве с родительскими, дочерними и родственными элементами.

Когда браузер анализирует HTML, он также находит таблицы стилей, включенные в заголовок HTML, и точно так же, как HTML, CSS также анализируется.
Но разбор CSS немного сложнее.

разбор CSS и HTML

Есть два основных шага, которые выполняются на этапе синтаксического анализа CSS:

  1. Разрешение конфликтующих объявлений CSS правил (также известен как каскадные стили)
  2. Обработка окончательных значений CSS (например, для преобразования поля, определенного в процентах, в пиксели)

Обработанный CSS также хранится в древовидной структуре CSS Object Modal, похожей на DOM.

Оба проанализированных HTML и CSS вместе образуют так называемое дерево рендеринга. С этим у нас наконец есть все, что нам нужно для рендеринга страницы.

Как работает CSS изнутри

Модель визуального форматирования – это то, что используется браузером для визуализации страницы. Это алгоритм, который вычисляет блоки (блочная модель) и определяет макет этих блоков для каждого элемента в дереве визуализации, чтобы определить окончательный макет страницы.

Итак, наконец, после модели визуального форматирования, сайт, наконец, отображается или отображается на экране.

Это краткая картина процесса, который происходит за фасадом работы сайта.