Новые логические свойства в CSS!

Следующий шаг в эволюции CSS

Workafrolic (±∞)
Feb 6 · 9 min read

Интро

Мыслить логическими CSS-свойствами

Строчная ось

Блочная ось

Новые свойства блочной модели

margin

padding

border

Логическая величина

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

/* Старая техника */
.popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* Новая техника */
.popup {
position: fixed;
inset-block-start: 0; /* top - для английского */
inset-block-end: 0; /* bottom - для английского */
inset-inline-start: 0; /* left - для английского */
inset-inline-end: 0; /* right - для английского */
}
.popup {
position: fixed;
inset: 0 0 0 0; /* top, right, bottom, left - для английского */
}

Обтекание в CSS

Text-align

Ещё

Гриды и флексбоксы

Рабочий процесс с учётом логических свойств

Применение выравнивания в зависимости от языка

Свойство writing-mode (блочная ось)

Примеры

html {
writing-mode: vertical-rl;
}

Свойство direction (строчная ось)

html {
direction: rtl;
}

Браузерная поддержка

Проблемы с логическими свойствами

html {
flow-mode: physical;
/* или */
flow-mode: logical;
}
.box {
/* будет интерпретироваться согласно значению flow-mode */
margin: 10px 5px 6px 3px;
padding: 5px 10px 2px 7px;
}

Проблемы с адаптивным дизайном

/* Не работает */
@media (max-inline-size: 1000px) {
.main-content {
background: red;
grid-template-columns: auto;
}
}

Изменения, которые нужно учесть

Резюмируя

Больше постов по типографике

Другие мои посты о CSS

Кто я?


Web Standards

Сообщество разработчиков

Workafrolic (±∞)

Written by

Малыш-frontender. Верстаю, пишу и перевожу статьи, менторю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Web Standards

Сообщество разработчиков