А где логика?

Правильный способ писать CSS

Алёна Батицкая

U•ᴥ•U

Дока

Алёна Батицкая

Тимлид Доки, редактор разделов HTML и CSS
Эдьюкейтор (преподаю и пишу курсы)
Спикер, автор и переводчик
Google Developer Expert по вебу

Твиттер @ABatickaya

Всё изменилось

Логические свойства в CSS

Физические стороны

W3C Box Model

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

Всеобщая декларация прав человека. Глава 19

Статистика

Забудьте всё

Гибкость веба

Flexbox
Grid
Container Queries

ОСИ!

Блочная и строчная оси

web.dev. Logical Properties

Размеры

~~width~~ → inline-size
~~height~~ → block-size

+ min/max

                .selector {
                  width: 50%;
                  min-width: 150px;
                  max-width: 800px;
                  height: 50%;
                  min-height: 150px;
                  max-height: 800px;
                }

→

                .selector {
                  inline-size: 50%;
                  min-inline-size: 150px;
                  max-inline-size: 800px;
                  block-size: 50%;
                  min-block-size: 150px;
                  max-block-size: 800px;
                }

→

                .selector {
                  inline-size: clamp(150px, 50%, 800px);
                  block-size: clamp(150px, 50%, 800px);
                }

→

clamp()

                .selector {
                  inline-size: clamp(150px, 50%, 800px);
                  aspect-ratio: 1/1;
                }

aspect-ratio

Поддержка

inline-size

Отступы и поля

`padding-top`/`margin-top`	`padding-block-start`/`margin-block-start`
`padding-right`/`margin-right`	`padding-inline-end`/`margin-inline-end`
`padding-bottom`/`margin-bottom`	`padding-block-end`/`margin-block-end`
`padding-left`/`margin-left`	`padding-inline-start`/`margin-inline-start`
	`padding-inline`/`margin-inline`
	`padding-block`/`margin-block`

                .block {
                    width: 1200px;
                    margin: 0 auto;
                }

→

                .block {
                    inline-size: 1200px;
                    margin-inline: auto;
                }

Рамки

`border-start-start-raduis`	верхний левый угол
`border-start-end-radius`	верхний правый угол
`border-end-end-radius`	нижний правый угол
`border-end-start-radius`	нижний левый угол

Позиционирование

                .element::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                }

→

                .block {
                    content: "";
                    position: absolute;
                    inset: 0;
                }

Единицы измерения

vw → vi (viewport inline)

vh → vb (viewport block)

Подержка

Оффтоп

dvb, dvi, dvh, dvw, dvmax, dvmin, lvh, svh, lvw, svw, lvb, svb, lvi, svi…

The Large, Small, and Dynamic Viewports

Кого ещё зацепило?

float, clear → + значения inline-start/inline-end (Поддержка 👎)
resize → + значения inline/block (Поддержка 👎)
overflow-x/overflow-y → overflow-inline/overflow-block (Поддержка 👎)

Чего ждать?

Направление градиента
Позиционирование и повторение фона
Оси трансформаций

Ишьюс про логические свойства в репозитории W3C

А где логика?

А где логика?

Правильный способ писать CSS

Алёна Батицкая

Всё изменилось

Логические свойства в CSS

Физические стороны

Статистика

Забудьте всё

Гибкость веба

Блочная и строчная оси

Размеры

Поддержка

Отступы и поля

Рамки

Позиционирование

Единицы измерения

Оффтоп

Кого ещё зацепило?

Чего ждать?

«Для меня не актуально…»

Дока на арабском

Ваша жизнь не будет прежней

В проде: линтер

Материалы

Спасибо!