Як працює CSS зсередини

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

Коли браузер починає завантажувати вихідний HTML-файл, він бере завантажений HTML-код і аналізує його, що означає, що він буде декодувати його через підрядник.

За допомогою цього процесу браузер створює так званий DOM (модальний об’єкт документа), який описує весь веб-документ в дереві з батьківськими, дочірніми і спорідненими елементами.

Як працює CSS - DOM Модель

Коли браузер аналізує HTML, він також знаходить таблиці стилів, включені в заголовок HTML, і точно так само, як HTML, CSS також аналізується.
Але розбір CSS трохи складніше.

Є два основні кроки, які виконуються на етапі синтаксичного аналізу CSS:

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

Оброблений CSS також зберігається в структурі дерева CSS Object Modal, схожою на DOM.

Обидва проаналізованих HTML і CSS разом утворюють так зване дерево рендеринга. З цим у нас нарешті є все, що нам потрібно для рендеринга сторінки.

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

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

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