Shower Presentation Engine

CSS value processing

CSS иногда работает не так, как я ожидаю

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

CSS иногда работает не так, как я ожидаю

CSS

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

Кратко

Выбрать объявления свойства, которые теоретически подходят для заданного элемента
Выбрать из них то одно, которое подходит, по заданным правилам
Сделать его удобным для наследования
Сделать его удобным для отрисовки

По спецификации

Declared value
Cascaded value
Specified value
Computed value
Used Value
Actual Value

Declared value

Сбор всех деклараций свойства, применимых к элементу

@media, @supports
Подходящий селектор
Type checking

Type checking

            <'text-shadow'> = 
              none | [ <color>? && <length>{2,3} ]#

            text-shadow: black 0.1em 0.1em 0.2em;
            text-shadow: 0.1em 0.1em black;
            text-shadow: 0.1em

подробнее про типы данных в CSS

Declared value

            <div class="a"> CSS </div>
            <style>
              .a { text-shadow: 0.1em 0.1em black; }
              .a { text-shadow: 0.1em }
            </style>

Cascaded value

Каскад принимает неупорядоченный список объявленных значений, сортирует их по приоритету их объявления, и выводит одно значение.

            <div style="color: green">
              <span style="color: purple"> CSS </span>
            </div>

Cascaded value

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

Cascaded value

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

Cascaded value

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

Cascaded value

Коэффициент специфичности

Селектора деляться на 3 уровня:

#id	1	0	0
.class, :hover, [name="value"]	0	1	0
#id [name="value"]	0	0	1

Коэффициент специфичности

span	0	0	1
.class #id	1	1	0
.class #id::before:hover	1	2	1
#id [name="value"]	1	1	0

Коэффициент специфичности

span	0 * 100	0 * 10	1 * 1
.class #id	1 * 100	1 * 10	0 * 1
.class #id::before:hover	1 * 100	2 * 10	1 * 1
#id [name="value"]	1 * 100	1 * 10	0 * 1

Коэффициент специфичности

span	0 * 100	0 * 10	1 * 1	001
.class #id	1 * 100	1 * 10	0 * 1	110
.class #id::before:hover	1 * 100	2 * 10	1 * 1	121
#id [name="value"]	1 * 100	1 * 10	0 * 1	110

Коэффициент специфичности

span	0 * 2^32	0 * 2^16	1 * 2^8
.class #id	1 * 2^32	1 * 2^16	0 * 2^8
.class #id::before:hover	1 * 2^32	2 * 2^16	1 * 2^8
#id [name="value"]	1 * 2^32	1 * 2^16	0 * 2^8

Коэффициент специфичности

CSS иногда работает не так, как я ожидаю

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

Cascaded value

CSS иногда работает не так, как я ожидаю

CSS

Cascaded value

Поставьте звёдочку багу

Specified value

            <div> CSS </div>

            color: ??? 
            
                margin: ??? 
                padding: ???

Initial value

Computed value

Значение, которое наследуется

                height: 100px; // => 100px

                    height: inherit // => 100px

Computed value

                height: 100px; // => 100px

                    height: 50%; // => 50px

                        height: inherit; // => 25px

Computed value

                height: 100px; // => 100px

                    height: 50%; // => 50px CV = 50%

                        height: inherit; // => 25px CV = 50%

Computed value

                font-size: 10px;

                    height: 5em; // => 50px

                        font-size: 20px;
                        height: inherit; // => 50px

Computed value

                font-size: 10px;

                    height: 5em; // => 50px CV=50px

                        font-size: 20px;
                        height: inherit; // => 50px CV=50px

Used Values

- результат взятия computed value и завершения любых оставшихся вычислений, чтобы сделать его абсолютным теоретическим значением, используемым в макете документа.

вычисление %
вычисление calc
...

Used Values

                    height: 70px;

                        height: 13%; // CV=13% => UV=9.1px

Actual Values

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

                    height: 70px;

                        height: 13%; // UV=9.1px  => AV=9px

Несколько слов про calc

CSS Type Checking

Проверка соответствия значения свойства его грамматике

CSS Type Checking

Проверка соответствия значения свойства его грамматике

Несколько слов про calc

CSS Type Checking

            height: -12px        // => Initial Value
            height: calc(-12px)  // => 0px

            height: -12s         // => Initial Value
            height: calc(-12s)   // => Initial Value

Проверка финального типа, но не диапазона

Несколько слов про calc

                height: 100px; // => CV=100px

                    height: calc(50% - 25px);// => CV=calc(50% - 25px)

                        height: inherit; // => CV=calc(50% - 25px)

Несколько слов про calc

                font-size: 10px; // => CV=100px

                    height: calc(100px - 5em); // => CV=calc(50px)

                        height: inherit; // => CV=calc(50px)

Итого

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

Источники

София Валитова из ВКонтакте

ariarzer@gmail.com
Twitter – @ariarzer
ВКонтакте – @ariarzer
Telegram – @ariarzer

Презентация сделана с помощью Shower