Логические свойства¶
Логические, относительные для потока свойства и значения связаны с потоком текста, а не с физической формой экрана. Узнайте, как использовать преимущества этого нового подхода к CSS.
CSS подкаст
012: Логические свойства
Очень распространенным шаблоном пользовательского интерфейса является текстовая метка с поддерживающим ее встроенным значком.
Значок располагается слева от текста с небольшим промежутком между ними, который обеспечивается параметром margin-right
на значке. Однако здесь возникает проблема, поскольку это работает только при направлении текста слева направо. Если направление текста изменится на право-лево, что характерно для таких языков, как арабский, то значок будет располагаться напротив текста.
Как это учесть в CSS? Логические свойства позволяют разрешить эти ситуации. Помимо многих других преимуществ, они обеспечивают бесплатную автоматическую поддержку интернационализации. Они помогают создать более устойчивый и инклюзивный внешний интерфейс.
Терминология¶
Физические свойства top
, right
, bottom
и left
относятся к физическим размерам области просмотра. Их можно представить себе как компасную розу на карте. Логические свойства, с другой стороны, относятся к краям блока, поскольку они связаны с потоком содержимого. Поэтому они могут меняться при изменении направления текста или режима написания. Это большой сдвиг по сравнению с направленными стилями, и он дает нам гораздо больше гибкости при оформлении интерфейсов.
Обтекание блока¶
Обтекание блоков — это направление, в котором располагаются блоки содержимого. Например, если есть два абзаца, то поток блоков определяет, где будет располагаться второй абзац. В английском документе поток блоков идет сверху вниз. Подумайте об этом в контексте абзацев текста, следующих друг за другом сверху вниз.
Инлайн-обтекание¶
Инлайновый поток — это поток текста в предложении. В англоязычном документе инлайн-обтекание происходит слева направо. Если изменить язык документа на арабский (<html lang="ar">
), то обтекание текста будет происходить справа налево.
Text flows in the direction determined by the document's writing mode. You can change the direction that text is laid out with the writing-mode
property. This can be applied to the entire document, or to individual elements.
Относительный поток¶
Исторически сложилось так, что в CSS мы могли применять такие свойства, как margin
, только относительно направления их сторон. Например, margin-top
применяется к физической верхней части элемента. С логическими свойствами margin-top
превращается в margin-block-start
. Это означает, что независимо от языка и направления текста, для блочного потока действуют соответствующие правила margin
.
Sizing¶
Чтобы запретить элементу превышать определенную ширину или высоту, напишите правило следующего вида:
1 2 3 4 |
|
Относительные по потоку эквиваленты — max-inline-size
и max-block-size
. Также можно использовать min-block-size
и min-inline-size
вместо min-height
и min-width
.
При использовании логических свойств правило максимальной ширины и высоты будет выглядеть следующим образом:
1 2 3 4 |
|
Начало и конец¶
Вместо таких направлений, как top
, right
, bottom
и left
, используйте start
и end
. Это дает возможность использовать block-start
, inline-end
, block-end
и inline-start
. Они позволяют применять свойства CSS, реагирующие на изменение режима написания.
Например, для выравнивания текста вправо можно использовать следующий CSS:
1 2 3 |
|
Если ваша цель — выравнивание не по физическому правому краю, а по началу направления чтения, это не поможет. Для логических значений существуют более удобные значения start
и end
, которые сопоставляются с направлением текста. Теперь правило выравнивания текста выглядит следующим образом:
1 2 3 |
|
Интервалы и позиционирование¶
Логические свойства margin
, padding
и inset
позволяют проще и эффективнее позиционировать элементы и определять, как эти элементы взаимодействуют друг с другом в разных режимах написания. Свойства, связанные с margin
и padding
, по-прежнему являются прямыми отображениями на направления, но ключевым отличием является то, что при изменении режима написания они меняются вместе с ним.
1 2 3 4 5 6 7 |
|
Это добавляет некоторое вертикальное внутреннее пространство с помощью padding
и отодвигает его слева с помощью margin
. Свойство top
также смещает его вниз. С логическими эквивалентами свойств это выглядело бы следующим образом:
1 2 3 4 5 6 7 |
|
Это добавляет некоторое внутреннее пространство в строке с помощью padding
и отодвигает ее от начала строки с помощью margin
. Свойство inset-block
перемещает его внутрь от начала блока.
Свойство inset-block
— не единственный вариант сокращения с логическими свойствами. Это правило можно еще больше сократить, используя сокращенные версии свойств margin
и padding
.
1 2 3 4 5 6 |
|
Границы¶
Добавление border
и border-radius
также может быть выполнено с помощью логических свойств. Чтобы добавить границу снизу и справа с правым радиусом, можно написать такое правило:
1 2 3 4 5 |
|
Или можно использовать логические свойства, например, так:
1 2 3 4 5 |
|
Значение end-end
в border-end-end-radius
— это конец блока и конец инлайна.
Единицы¶
В логических свойствах появились две новые единицы измерения: vi
и vb
. Единица vi
составляет 1% от размера области просмотра в направлении inline. Эквивалентом нелогического свойства является vw
. Единица vb
составляет 1% от размера области просмотра в направлении блока. Эквивалентом нелогического свойства является vh
.
Эти единицы всегда сопоставляются с направлением чтения. Например, если вы хотите, чтобы элемент занимал 80% доступного внутристрочного пространства области просмотра, то использование единицы vi
автоматически изменит этот размер на размер сверху вниз, если режим записи вертикальный.
Прагматичное использование логических свойств¶
Логические свойства и режимы записи предназначены не только для интернационализации. Их можно использовать для создания более универсального пользовательского интерфейса.
Если у вас есть график с метками по осям X и Y, вы можете захотеть, чтобы текст на метке Y читался вертикально.
Поскольку для метки оси Y в демонстрационном примере установлен write-mode
(режим записи) vertical-rl
, для обеих меток можно использовать одинаковые значения margin
. Значение margin-block-start
применяется к обеим меткам, поскольку начало блока находится справа для оси Y и сверху для оси X. Стороны начала блока имеют красную рамку, чтобы их было видно.
Решение проблемы со значками¶
Теперь, когда мы рассмотрели логические свойства, эти знания можно применить к проблеме проектирования, с которой мы начали.
1 2 3 4 5 6 7 8 9 10 11 |
|
Отступ был применен к правой части элемента иконки. Для того чтобы расстояние между пиктограммой и текстом поддерживало все направления чтения, необходимо использовать свойство margin-inline-end
.
1 2 3 4 5 6 7 8 9 10 11 |
|
Теперь, независимо от направления чтения, значок будет располагаться и занимать соответствующее место.
Источник: Logical Properties