11 декабря 2020 года.

CSS VALUE PROCESSING

Дисклеймер: статья представляет собой неполный перевод одного из разделов спецификации c некоторыми дополнениями.

После того, как user agent проанализировал документ и построил DOM, он должен назначить каждому элементу в дереве и, соответственно, каждому блоку в структуре форматирования значение для каждого свойства.

Итоговым значением каждого css-свойства является результат последовательного вычисления шести других значений:

Declared value - сбор в список всех деклараций свойства, применимых к элементу.
Cascaded value - этап сортировки списка по заданным правилам.
Specified value - этап для определения единственного значения свойства.
Computed value - проведение всех возможных операций над значением, которые не нарушают корректность его наследования.
Used value - проведение всех оставшихся операций.
Actual value - преобразование значение на основе ограничений среды отображения.

$ Declared value

Сбор всех деклараций свойства, применимых к элементу. При отборе значений учитывается:

подходят ли они по типу данных для этого свойства
находятся ли они внутри подходящего css condition (@media, @supports ,…)

Например:

@media (max-width: 756px) {
  .class {
    width: 100%;
  }
}

.class {
  width: 520px;
}

.class {
  width: 520ms;
}

.class2 {
  width: 500em;
}

Declared value для такого кода для свойства width для элемента <div class="class"></div> для планшетов будет выглядеть примерно как:

декларация в селекторе .class, строчка такая-то, документ такой-то (или атрибут style, или инлайновые стили, в общем место объявления)
декларация в селекторе .class, строчка такая-то, документ такой-то

Объявление ширины в микросекундах не будет включено в Declared value, потому что не валидно по типу, здесь должен быть distance unit. Объявление из селектора .class2 не пройдет потому что селектор не подходит блоку.

А на широком экране будет просто:

декларация в селекторе .class, строчка такая-то, документ такой-то

... потому что @media-выражение не будет выполняться.

$ Cascaded value

Задача каскада - отсортировать список всех возможных значений по четко заданным правилам, чтобы на следующем этапе из них можно было бы выбрать одно. Обратите внимание, что входящий в этот этап список может быть пустой!

Уровни объявления

Существует восемь возможных уровней, где можно объявить значение свойства. Их приоритет в порядке убывания:

Декларации из Transition
!important декларации user-агента
!important декларации пользователя
!important декларации автора (то есть разработчика)
Animation декларации
Декларации автора (то есть разработчика)
Декларации пользователя
Декларации user-агента

Например:

<div class="blue" id="red"> CSS </div>
<style>
  .blue {
      color: blue !important;
  }

  #red {
      color: red;
  }
</style>

Текст в блоке будет синего цвета, потому что уровень объявления !important декларации автора выше чем просто декларации автора.

Еще пример:

<div class="blue"> CSS </div>
<style>
  .blue {
    color: blue !important;
    animation: anim 3s infinite;
  }
  .@keyframes anim {
     50% {color: green;}
   }
</style>

Не смотря на наличие анимации цвета, ее не будет видно, потому что декларация цвета внутри директивы @keyframeнаходятся на уровне определения Animation декларации, который ниже чем !important декларации автора.

Специфичность селекторов

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

Как считается коэффициент специфичности?

Селекторы делятся на три уровня:

по идентификатору
по классу, по псевдоклассу и по атрибуту
по псевдоэлементу и по тегу

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

selectors	major	minor	patch
#id	+ 1	0	0
.class, :hover, [name="value"]	0	+ 1	0
::before, div	0	0	+ 1

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

Например:

selector	major	minor	patch	total
span	0	0	1	0.0.1
.class #id	1	1	0	1.1.0
.class #id:hover::before	1	2	1	1.2.1
#id [name="value"]	1	1	0	1.1.0

Третий селектор имеет больший вес, так как его аналог в семвере был бы самой старшей версией из имеющихся.

Дополнительно следует сказать что в такой системе гарантируется, что .a.b.c.d.e.f.e.r.g.t.h = 0.11.0 не будет иметь больший коэффициент специфичности чем #id = 1.0.0.

На практике все сказанное выше означает, что в такой ситуации текст будет красным даже при наведении мыши:

<div class="class" id="id" attr="attr"> CSS </div>
<style>
  div.class[attr="attr"]:hover {
    color: green; /* 0.3.1 */
  }

  #id {
    color: red; /* 1.0.0 */
  }
</style>

Порядок объявления

Последняя декларация в порядке документа выигрывает. Для этого:

декларации из импортированных таблиц стилей упорядочены так, как будто их таблицы стилей были вставлены вместо правила import
```
@import "style.css"; /* div { color: red; } */
@import "style2.css"; /* div { color: blue; } */
/* текст в блоках будет синий */
```
декларации из таблиц стилей, подключенных к документу, обрабатываются так, как если бы они были объединены в порядке подключения, как это определено языком основного документа
```
<link rel="stylesheet" type="text/css" href="/css/style1.css">

<link rel="stylesheet" type="text/css" href="/css/style2.css">


```
декларации из атрибута style упорядочиваются в соответствии с порядком документа, в котором отображаются, и все размещаются после любых таблиц стилей (поэтому и считается условно, что они имеют наибольшую специфичность)
```
<div style="color: red; color: violet">CSS</div>
<style>
  div {
    color: green;
  }
</style>

```

$ Specified value

Промежуточный итог после каскада: если список на входе был не пустой - то отдается первое значение из списка Cascaded value, а если нет, то для наследуемых свойств - Computed value родителя (если есть), или Initial value по спеке в остальных случаях.

$Computed value

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

Примеры вычисления Computed value:

значения с относительными единицами (em, ex, vh, vw) приводятся к пикселям
```
height: 10vh; /* CV = 100px */
height: 5em; /* CV = 50px */
```
некоторые ключевые слова заменяются в соответствии с их определениями
```
height: inherit; /* CV = 25px */
font-wigth: extra bold; /* CV = 800 */
```

разрешение относительных url-ов

background-image: url("./pinkish.gif");
/* CV = "http://www.example.com/pinkish.gif" */

Общий пример:

height: 10wh; /* CV = 100px */
  height: 50%; /* CV = 50px */
    height: inherit; /* CV = 25px */
/* три вложенных блока */

$ Used value

Used value является результатом взятия Computed value и завершения любых оставшихся вычислений, чтобы сделать его абсолютным теоретическим значением, используемым в макете документа. Например вычисление calc или вычисление процентов. Если свойство не применяется к этому элементу, то элемент не имеет used value для этого свойства.

подгрузка картинок
вычисление всех оставшихся относительных единиц до пикселей
```
height: 13%; /* CV = 13% => UV = 9.1px */
```

$ Actual value

Значение преобразуется на основе ограничений среды отображения. Например:

округление пикселей до целых (по необходимости экрана)
```
height: 13%; /* CV = 13% => UV = 9.1px  => AV = 9px */
```
кроп и масштабирование картинок

Источники

Спецификация Value Processing

Post Scriptum

Вопросы и предложения пишите мне в телеграм @ariarzer :)

За помощь в написании и всём остальном спасибо @SelenIT2 ❤️