Логические свойства в ЦСС — это набор свойств и значений для управления размерами, отступами, границами и расположением элементов без привязки к сторонам экрана. Покажу на примере мультиязычного сайта с английской и арабской версией.
Представьте, что у нас есть аватарки пользователей:
.avatar {
margin-right: .5em;
}
/* Если пользователь смотрит арабскую версию сайта,
в которой текст пишется справа налево,
меняем отступы у аватарки: сбрасываем правый, добавляем левый */
html[dir="rtl"] .avatar {
margin-right: 0;
margin-left: .5em;
}
VasilyفاسيليСвойства margin-left и margin-right привязаны к сторонам экрана: неважно, в каком направлении написан текст в текущей версии сайта, margin-left и margin-right всегда задают левый и правый отступы.
В вебе не принято писать текст вертикально: плохая поддержка браузерами и операционными системами. На сайтах с текстом на языках Восточной Азии пишут сверху вниз и слева направо.
«Японский» в примерах ниже — это возможное вертикальное письмо на японском, приведённое для иллюстрации
Логические свойства привязаны не к сторонам экрана, а к направлению письма. Они задают отступы, рамки и позиционирование, опираясь на инлайновую (inline) и блочную (block) оси. Инлайновая ось проходит в направлении, в котором пишется текст. Например, в тексте, написанном на русском или английском, инлайновая ось пройдёт слева направо, в тексте на арабском — справа налево, а в тексте на японском — сверху вниз. Блочная ось идёт перпендикулярно инлайновой и имеет своё направление. Например, в тексте, написанном на японском — справа налево, а в монгольском — слева направо.
В вебе не принято писать текст вертикально: плохая поддержка браузерами и операционными системами. На сайтах с текстом на языках Восточной Азии пишут сверху вниз и слева направо.
«Японский» в примерах ниже — это возможное вертикальное письмо на японском, приведённое для иллюстрации
Вот, что задают логические свойства в зависимости от направления письма:
Свойство
block‑size
inline‑size
max‑block‑size
max‑inline‑size
min‑block‑size
min‑inline‑size
Английский
height
width
max‑height
max‑width
min‑height
min‑width
Арабский
height
width
max‑height
max‑width
min‑height
min‑width
Японский
width
height
max‑width
max‑height
min‑width
min‑height
Используя логические свойства, мы задаём отступы не влево‑вправо или вверх‑вниз, а в направлении начала и конца письма: start — это left для текста на русском, но right для текста на арабском; end — это right для текста на английском, но left для текста на арабском.
Свойство
margin‑block‑start
margin‑block‑end
margin‑inline‑start
margin‑inline‑end
padding‑block‑start
padding‑block‑end
padding‑inline‑start
padding‑inline‑end
Английский
margin‑top
margin‑bottom
margin‑left
margin‑right
padding‑top
padding‑bottom
padding‑left
padding‑right
Арабский
margin‑top
margin‑bottom
margin‑right
margin‑left
padding‑top
padding‑bottom
padding‑right
padding‑left
Японский
margin‑right
margin‑left
margin‑top
margin‑bottom
padding‑right
padding‑left
padding‑top
padding‑bottom
С логическими свойствами наш пример сокращается до одной строчки:
.avatar {
margin-inline-end: .5em;
}Ещё по теме
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.