19.01.2022

Как работает CSS

Как работает CSS

От создателя: как веб-разработчики, мы используем CSS раз в день, но знаете ли вы, как все работает под капотом? Как нам получить прекрасные веб-страницы со всеми цветами и стилями? Честно говоря, я использую CSS раз в день и не очень хорошо об этом знал. Итак, я провел маленькое исследование, просмотрел несколько видео и пишу эту статью, пытаясь собрать все в одном ординарном блоге.

Перед тем как начать, давайте коротко рассмотрим официальные термины, используемые в CSS.

Как работает CSS

Что такое CSS?

Согласно документации MDN «Каскадные таблицы стилей (CSS) — это язык таблиц стилей, применяемый для описания представления документа, написанного в HTML либо XML (включая диалекты XML, такие как SVG, MathML либо XHTML ). CSS описывает, как элементы должны отображаться на экране, на бумаге, в речи либо на других носителях».

Отвечая на вопрос выше: CSS употребляется для стилизации веб-сайтов. Да, я знаю, это было просто, но как работает CSS, что происходит, когда мы задаем background-color: red, и когда появляются конфликты, как браузер решает, какое свойство назначить DOM?

Как работает CSS

Начнем с того момента, когда юзер загружает исходный HTML-файл. Как только браузер запускается, он берет загруженный код HTML и анализирует его, декодирует код построчно, и DOM (объектная модель документа) строится в виде древовидной структуры с элементами родителей, потомков и братьев и сестер. При синтаксическом анализе HTML браузер также находит таблицы стилей, как и HTML, CSS также анализируется.

Как работает CSS

Парсинг CSS состоит из 2-ух основных этапов:

Конфликты в объявлении CSS разрешаются с помощью процесса, именуемого каскадом.

Обработка окончательного значения.

После выполнения 2-ух вышеуказанных шагов CSS также сохраняется в виде древовидной структуры объектной модели CSS (CSSOM). HTML и CSS вкупе образуют дерево рендеринга. Теперь у нас есть все для рендеринга странички.

Следующим шагом в рендеринге странички является модель визуального форматирования. Она употребляет множество вещей, таких как модель коробки и размещение. После того, как модель визуального форматирования окончит свою работу, веб-сайт будет окончательно визуализирован, а экран заполнен.

Как работает CSS

Я надеюсь, что до сих пор все ясно. Давайте углубимся в фазу синтаксического анализа CSS.

Что такое каскад

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

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

Пример разных источников, из которых может поступить CSS:

Авторский CSS. CSS, который пишем мы, разработчики

Пользовательский CSS. Когда юзер изменяет какое-либо свойство в браузере

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

Браузер получает так много таблиц стилей из стольких различных мест, как он может решить, какую из их назначить элементу? Решение конфликтов, исходящих из всех этих разных ресурсов, основывается на таких трех факторах:

Значимость (вес)

Специфичность

Начальный порядок

Давайте разберемся, как браузер будет разрешать конфликты по значимости:

Объявления пользователей отмечены главным словом !important.

Объявления создателей отмечены ключевым словом !important.

Объявления создателя.

Объявления пользователей.

Объявления браузера.

Как работает CSS

Следуя правилам, упомянутым выше, будет использован background-color:red из-за ключевого слова !important. Так как оно отменяет все остальное.

Я надеюсь, что это было ясно, но что делать, если у нас есть противоречивые объявления, имеющие схожую важность? В этом случае мы рассчитываем их селекторную специфика на основе приоритетов ниже:

Интегрированные стили

ID

Классы, псевдоклассы и атрибуты

Элементы и псевдоэлементы

Как работает CSS

На приведенной выше диаграмме мы вычисляем специфика, чтобы определить, какое свойство будет иметь наивысший ценность.

для всех четырех случаев мы можем добавить inline style 0, поэтому что у них его нет.

у нас есть ID только для 2-го и 4-го случаев, потому мы можем отметить ID 1 для этих 2-ух случаев.

переходя к классам, у нас есть класс 1 для варианта 1 (button), класс 2 для варианта 2, класс 2 для случая 4 (псевдокласс: hover).

При вычислении частей у нас есть 2 элемента для варианта 2 (nav и div), 1 элемент для варианта 3 (a), 1 элемент для варианта 4 (a).

Селектор номер два имеет наивысшую специфика, поэтому у нашей кнопки будет зеленоватый фон. Конечное значение — это каскадное значение.

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

Несколько принципиальных моментов, которые следует запомнить:

Селектор с идентификатором 1 > 1000 классов.

Селектор с классом 1> 1000 частей.

Универсальный селектор * не имеет значения специфики (0,0,0,0).

Всегда полагайтесь на конкретность, а не на порядок селекторов.

Успешного кодирования!

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *