Логічні властивості CSS
Передумови
З появою властивості display: flex в браузерах дещо змінилося:
В дефолтних стилях браузерів замість звичних margin та padding у заголовкових техаг, параграфах, списках з'явилися незрозумілі block-start, block-end, inline-start... Хоча вже за мить стає зрозуміло, що це так по-новому обізвані наші margin-top і bottom, padding-left.
Давайте розбиратися що це таке і для чого нам потрібно.
Інтернет та веб-стандарти розробили американці, долучалися європейці, і нам, в принципі, зручно користуватися веб-сторінками, вони з самого початку зроблені звичними для нашої культури сприйняття інформації. Проте, є країни, де пишуть справа наліво, для них зручно було б все навпаки: полоса прокрутки і стрілочка в селекті зліва, іконки на кнопках - справа. Дні тижня у їхньому календарі (datepicker) теж йдуть справа наліво.
Деякі культури пишуть не строками, а стовбцями. Для японців природніше скролити сайт не зверху вниз, а справа наліво. Нав'язування їм західних принципів розташування інформації схоже на насильницьке перевчення шульги на праворукого.
Монгольські сайти теж треба скролити горизонтально, а не вертикально, але, на відміну від японських - зліва направо.
А як справи у мультимовних сайтів? По-перше, так просто не змінити напрям скрола з вертикального на горизонтальний і навпаки. По-друге - доведеться переписувати всі прив'язки до лівого чи правого краю:
ul {
padding-left: 20px;
}
.icon {
right: 2em;
}
// для <html dir="rtl"> - direction = right-to-left:
html[dir="rtl"] ul {
padding-left: 0;
padding-right: 20px;
}
html[dir="rtl"] .icon {
right: 0;
left: 2em;
}
І таких "зайвих" строк буде тисячі - на всі відступи, прив'язки, вирівнювання тексту.
Суть логіки
Отже, нова логіка полягає в тому, що тепер не буде жорстко прив'язаних до відповідних країв вікна браузера left, top, right, bottom. Замість цього використовуються дві осі: вертикальна - блочна і горизонтальна - строчна.
У звичних для нас координатах:
top => block-start
bottom => block-end
left => inline-start
right => inline-end
// і розміри блока теж:
width => inline-size
height => block-size
Таким чином, якщо у нас сайт на трьох мовах, і треба деякому елементу задати "відступ зліва", то матимемо таку картину:
сайт: по-старому: по-новому:
-----------------------------------------------------
англійський padding-left padding-inline-start
арабський padding-right padding-inline-start
японський padding-top padding-inline-start
англійський width / height inline-size / block-size
японський height / width inline-size / block-size
Позиціонування
Тепер розглянемо позиціонування. Замість left, top, right і bottom у нас є inset-*, у звичних нам напрямках:
left => inset-inline-start
top => inset-block-start
right => inset-inline-end
bottom => inset-block-end
// окрім того, зручна комбінована властивість:
.box-old {
position: absolute;
left: 5px;
top: 5px;
right: 5px;
bottom: 5px;
}
.box-new {
position: absolute;
inset: 5px 5px 5px 5px;
// а ще краще:
inset: 5px;
}
Float, text-align, resize
До епохи флексів найпопулярнішим способом розміщення блоків в ряд були флоати. Вони нікуди не ділися, обтікання блоків текстом все ще потрібне і застосовується. Вирівнювання тексту і стиль для поля вводу. Що у нас тут (знову ж таки - у звичних для нас координатах):
float: left => float: inline-start
float: right => float: inline-end
text-align: left => text-align: start
text-align: right => text-align: end
// для <textarea>
resize: horizontal => resize: inline
resize: vertical => resize: block
Визначення напрямків для блочної та строчної осі
Ну і нарешті - яким же чином це все використовувати.
Зустрічайте новий стиль - writing-mode. Згадаємо як в нас задавалися осі у флексах:
display: flex;
flex-direction: row-reverse; // або row, column, column-reverse
Властивість writing-mode подібно до flex-direction встановлює напрямки осей. При цьому ви можете застосувати до одного і того ж блоку і writing-mode, і flex, flex-direction. Щоправда, частіше за все ви будете застосовувати цей новий стиль до тегів <html> або <body>:
html {
writing-mode: vertical-rl; // японська
}
// всі варіанти:
writing-mode: horizontal-tb; // вертикальний скролл, майже всі країни
writing-mode: vertical-rl; // горизонтальний скролл, справа наліво, Японія
writing-mode: vertical-lr; // горизонтальний скролл, зліва направо, Монголія
Для арабських, єврейських мов не забуваємо використати direction: rtl, він змінить на протилежний напрямок строчну вісь.
Напрямку horizontal-bt немає.
Поки що це все. Позиціонування фону і деякі інші стилі, типу transform-origin ще в розробці.
Звичайно, старі добрі властивості нікуди не діваються, будуть підтримуватися браузерами щонайменше - десятки років, для сумісності.
Окрім того, у нас є "чудові" браузери MS Edge, Safari та деякі інші, які не поспішають за прогресом, наразі підтримка нових властивостей реалізована тільки у движку Chromium і у браузері Firefox.