Типы данных в CSS

Типы данных в CSS

София Валитова

Предыстория

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

            height: calc(3px+4px)
            height: calc(3px - 4px)
            height: calc(25% - 0)
        

Предыстория

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

            height: calc(3px+4px)
            height: calc(3px - 4px)       // => 0px
            height: calc(25% - 0)
        

Предыстория

Посмотрим в спецификацию и пойдем гуглить статьи с примерами

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

Где в CSS данные?

Если определять интуитивно, то вот так:

Но давайте попробуем более формально.

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

            <style-rule> ::=
              <selectors-list> { <properties-list> }
            <selectors-list> ::=
              <selector>[':' <pseudo-class>] ['::' <pseudo-element>]
              [',' <selectors-list>]
            <properties-list> ::=
              [<property> ':' <value>] [';' <properties-list>]
        

Немного формальной грамматики

Простой пример

Попробуем описать грамматику отрицательных чисел от -1 до -9:

            <neg_num> ::= "-" <num>
            <num> ::= "1" | "2" | "3" | "4" | "5" |
                  | "6" | "7" | "8" | "9"
        

                <add_expr> ::= <neg_num> "+" "(" <neg_num> ")"
                
            

Простой пример

Попробуем описать грамматику отрицательных чисел от -1 до -9:

            <neg_num> ::= "-" <num>
            <num> ::= "1" | "2" | "3" | "4" | "5" |
                  | "6" | "7" | "8" | "9"
        

                <add_expr> ::= <neg_num> "+" "(" <neg_num> ")"
                
            

Форма Бэкуса-Наура

            <expression> ::= <add_expr>
            <add_expr> ::= <mul_expr> '+' <add_expr>
                | <mul_expr> '-' <add_expr>
                | <mul_expr>
            <mul_expr> ::= integer '*' <mul_expr>
                | integer '/' <mul_expr>
                | integer '%' <mul_expr>
                | integer
            integer ::= [0-9]+
        

            <expression> ::= <add_expr>
            <add_expr> ::= <mul_expr> [ ('+' | '-') <add_expr> ]
            <mul_expr> ::= integer [ ('*' | '/' | '%') <mul_expr> ]
            integer ::= [0-9]+
        

                <mul_expr> ::= integer '*' <mul_expr>
                    | integer '/' <mul_expr>
                    | integer '%' <mul_expr>
                    | integer
            

                <add_expr> ::= <mul_expr> '+' <add_expr>
                    | <mul_expr> '-' <add_expr>
                    | <mul_expr>
            

Расширенная форма Бэкуса-Наура

            <style-rule> ::=
              <selectors-list> '{' <properties-list> '}'
            <selectors-list> ::=
              <selector>[':' <pseudo-class>] ['::' <pseudo-element>]
              [',' <selectors-list>]
            <properties-list> ::=
              [<property> ':' <value>] [';' <properties-list>]
        

            <style-rule> ::=
              <selectors-list> '{' <properties-list> '}'
        

            .class#id { 
                height: initial;
                width: 100%;
            }
        

            <properties-list> ::=
              [<property> ':' <value>] [';' <properties-list>]
        

            .class#id { 
                height: initial;
                width: 100%
            }
        

            .class { 
                height: initial;
                width: 100%;
                border-width: 2px medium 4px;
                box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
                margin: 0 -7px 0 2px;
                transition: opacity .2s ease, visibility .2s ease;
            }
        

            margin: 0 -7px 0 2px;
        

            <margin> ::= "auto"
               | <length> 
               | <length> {" "} <length>
               | <length> {" "} <length> {" "} <length>
               | <length> {" "} <length> {" "} <length> {" "} <length>
        

Value Definition Syntax

1. ключевые слова

                       initial
                   

2. базовые типы данных

                        <length>
                   

3. сложные типы данных

                        <'background-attachment'>
                   

            <'margin'> ::= "auto" | <length>{1, 4} 
              
            <'line-height'> ::= 
               normal | <number> | <length> | <percentage>
              
            <'font-family'> = 
              [ <family-name> | <generic-family> ]#
        

            <'border-width'> = 
              [ <length> | thick | medium | thin ]{1,4}
        

            border-width: 3px;
            border-width: thick;
            border-width: medium thick;
            border-width: 8em thick;
        

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

            text-shadow: none;
            text-shadow: 1px 1px 2px black;
            text-shadow: inset 1px 1px 2px black;
            text-shadow: inset 1px 1px 2px black, 
    0 0 1em red, 0 3vw green;
        

Посмотрим на проблему еще раз

Посмотрим на проблему еще раз

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

            height: calc(3px+4px)
            height: calc(3px - 4px)       // => 0px
            height: calc(25% - 0)
        

Вокруг + и - должны быть пробелы

            calc(50%-2em);
        

            calc(50% - 2em);  // => <length> '-' <length>
            calc(50% -2em);   // => <length> <length>
            calc(50% - -2em);
            calc(50% - (-2em));
        

Посмотрим на проблему еще раз

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

            height: calc(3px+4px)
            height: calc(3px - 4px)       // => 0px
            height: calc(25% - 0)
        

Calc(). Type Checking

1. Нельзя использовать в одном выражении <length> и <time>
2. Нельзя использовать в одном выражении <angle> и <length>
3. Нельзя складывать или вычитать <length> и <number-token>
4. ...
5. ...

Calc(). Type Checking

Нельзя использовать в одном выражении несовместимые типы

            calc(5px + 10s)  // => <length> '+' <time>
            calc(5deg / 5em)  // => <angle> '/' <length>
            calc(5px - 5)  // => <length> '-' <number-token>
            calc(5px - 0)  // => <length> '-' <number-token>
        

Посмотрим на проблему еще раз

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

            height: calc(3px+4px)
            height: calc(3px - 4px)       // => 0px
            height: calc(25% - 0)
        

Похожая проблема

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

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

CSS Type Checking

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

CSS Type Checking

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

CSS Type Checking

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

                height : <length>[0,∞] | auto | <percantage> 
                
            

CSS Type Checking

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

Проводится перед каскадом

CSS Type Checking

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

            height: -12s         // => auto
            height: calc(-12s)   // => auto
        

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

Calc(). Range Checking

            height: calc(-12px);
                // => 0px при обращении 
        

Calc(). Range Checking

            height: calc(-12px);
                // => 0px при обращении 
        

                    height: -12px;
                        // property syntax check
                

                    height: calc(-12px);
                        // calc range check
                

Calc(). Range Checking

                height: 100px; // => 100px
            

                    height: 50%; // => 50px 
                

                        height: inherit; // 25px 
                    

Calc(). Range Checking

                height: 100px; // => 100px
            

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

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

Посмотрим на проблему еще раз

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

            height: calc(3px+4px)
            height: calc(3px - 4px)       // => 0px
            height: calc(25% - 0)
        

Итого:

1. В CSS есть проверка синтаксиса и типов
   1. Невалидный синтаксис => значение выше из каскада
   2. Не подходит тип => значение выше из каскада
2. Если используется calc(), то есть проверка синтаксиса, типов и диапазона
   1. Невалидный синтаксис => значение выше из каскада
   2. Не подходит тип => значение выше из каскада
   3. Не подходит диапазон => значение приводится

Взгляд в будущее

            #el {
              background-color: red;
              animation: anim infinite 3s;
            }
            @keyframes anim {
              50% { background-color: blue; }
            }
        

            #el {
              --color-stop: red;
              background: var(--color-stop);
              animation: anim infinite 3s;
            }
            @keyframes anim {
              50% { --color-stop: blue; }
            }
        

Почему?

Потому что изначально CSS-переменные не типизированы

            div {
              --name: red;
              --name: 11px;
            

                  --name: calc(14deg * 3);
                }
            
        

            #el {
              --color-stop: red;
              margin: 50px;
              animation: anim infinite 3s;
            }
            @keyframes anim {
              50% { --color-stop: 10px;
                   margin: var(--color-stop); }
            }
        

Почему?

Браузер не знает, как построить переход от одного значения к другому

            red  =>  ???  =>  blue
            red  =>  ???  =>  10px
        

Типизация переменной

            CSS.registerProperty({
              name: '--color-stop',
              syntax: '<color>',
              inherits: false,
              initialValue: 'transparent'
            })
        

            #el {
              --color-stop: red;
              background: var(--color-stop);
              animation: anim infinite 3s;
            }
            @keyframes anim {
              50% { --color-stop: blue; }
            }
        

CSS Typed OM

CSS Typed OM

            const height = CSS.px(2);
            elem.attributeStyleMap.set("height", height);
            

                 
                elem.attributeStyleMap.get("height"); // => 
                  // CSSUnitValue {value: 2, unit: "px"} 
            
        

CSS Typed OM

1. Лёгкое и наглядное взаимодействие c CSS OM
2. Иcпользование Value Definition Syntax
3. Очень гибкая типизация переменных
4. Можно посмотреть внутрь CSS

Итого

• В CSS есть данные, типы данных, проверка типов и все связанное
• Если CSS работает не так, как вы ожидаете, проверьте типы.
• Для описания типов данных в CSS есть свой Value Definition Syntax.
• Его знание облегчает чтение спецификаций.
• Если спека сложная, понять ее помогут эксперименты в браузере
• Благодаря Houdini скоро это ждет нас всех

Источники

• Спецификация css-values-3
• Урезанная версия на MDN по-русски
• Хорошая статья о BNF на английском
• Рабочие черновики Houdini
• Доклад про Houdini от Никиты Дубко

Почтовые рассылки W3C

• Расслыка public-houdini
• Расслыка www-style

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

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

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