Посмотрите, как HTML и CSS обрабатываются в браузере

В этой статье мы получим общий обзор того, как HTML и CSS обрабатываются в браузере.

Здесь мы узнаем о фазе синтаксического анализа CSS.

Во-первых, давайте кратко рассмотрим термины, которые мы находим в правиле CSS. Правило состоит из селектора и блока объявления:

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

Теперь поговорим о фазе синтаксического анализа CSS.

Разрешение конфликтующих деклараций CSS: каскадирование

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

Например, свойство font-size может появляться в нескольких таблицах стилей, а также несколько раз внутри одной таблицы стилей.

CSS поступает из следующих источников:

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

Cascade объединяет объявления CSS, поступающие из всех этих разных источников.

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

Вот порядок того, как мы смотрим на важность, специфичность и порядок источников для всех правил сопоставления:

Важность

Правило с директивой !important применяется всегда, независимо от того, где это правило появляется в документе CSS.

Наиболее важные объявления - это объявления пользователей, отмеченные ключевым словом important. Вторыми по важности декларациями являются декларации авторов, отмеченные значком important. В-третьих, это обычные объявления автора, и, наконец, наименее важные из них - объявления браузера по умолчанию. На самом деле это имеет большой смысл, так что мы можем легко перезаписать эти объявления, поступающие по умолчанию из браузера.

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

Здесь у нас есть два правила. Оба применяются к классу .btn, и у нас есть два противоречащих друг другу объявления о background-color. Оба являются объявлениями автора, но если вы внимательно посмотрите на первое объявление правила, background-color: #000 содержит важное ключевое слово, и, следовательно, это объявление более важно, как мы можем видеть из вышеизложенного. Это означает, что это объявление получит приоритет.

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

В большинстве случаев в таблицах стилей авторов будет куча противоречащих друг другу правил без каких-либо важных ключевых слов. В этом случае все объявления имеют одинаковое значение. В этом случае каскад вычисляет и сравнивает особенности селекторов объявлений.

Есть четыре категории, которые определяют уровень специфичности селектора:

  1. Встроенные стили (высшая степень специфичности): встроенный стиль прикрепляется непосредственно к элементу, который нужно стилизовать. Пример: <h1 style=”color: #ffffff;”>.
  2. Идентификаторы: Идентификатор - это уникальный идентификатор элементов страницы, например #navbar.
  3. Классы, атрибуты и псевдоклассы: эта категория включает .classes, [attributes] и псевдоклассы, такие как :hover, :focus и т. д.
  4. Элементы и псевдоэлементы (самая низкая специфичность): эта категория включает имена элементов и псевдоэлементы, такие как h1, div, ::before и ::after.

У нас есть четыре слота, каждый из которых начинается с нуля:

  • Первый селектор: 0 0 1 0 специфичность, потому что у него только один селектор класса.
  • Второй селектор: специфичность 0 1 2 2, потому что у него есть один селектор идентификатора, два селектора класса и два селектора элементов.
  • Третий селектор: 0 0 0 1 специфичность, потому что у него один селектор элементов.
  • Четвертый селектор: 0 1 2 1 специфичность, потому что он имеет один селектор идентификатора, один селектор класса, один псевдоэлемент и один селектор элементов.

Теперь, когда у нас есть четыре особенности, мы сравним их все слева направо. Начните со встроенного стиля (наиболее конкретного). Если есть селектор со встроенным стилем, этот селектор будет выигрывать у всех других селекторов, потому что это наиболее конкретная категория.

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

В категории селекторов второй селектор имеет более высокую специфичность, чем четвертый. Второй селектор - самый точный из всех, поэтому background-color: blue.

Исходный заказ

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

Резюме

  • Объявления CSS, отмеченные значком! важные имеют наивысший приоритет.
    (Но используйте! important только в крайнем случае.)
  • Встроенные стили всегда имеют приоритет над стилями во внешних таблицах стилей.
  • Универсальный селектор * имеет наименьшее значение специфичности (0, 0, 0, 0).
  • Полагайтесь больше на конкретность, чем на порядок селекторов.
  • При использовании сторонних таблиц стилей всегда помещайте таблицу стилей автора последней.

Надеюсь, эта статья будет вам полезна. Спасибо за чтение и продолжайте учиться!