Двунаправленные горизонтальные правила в CSS

Атрибут dir в HTML и свойство dir в CSS можно без труда использовать, чтобы задать направление текста и горизонтального потока. Некоторые языки используют написание слева направо(LTR), а иные — справа налево(RTL). Создание интерфейса для поддержки макетов LTR и RTL будет сложной задачей. Технологии Flexbox и Grid упрощает этот процесс, но не до конца.

В CSS доступно несколько свойств для указания направления. К примеру, при создании горизонтальных элементов дизайна отступ задается только для родительского элемента. А для первого и последнего дочерних элементов правый отступ равный 0.

.element { margin-right: 1rem;}.element:last-child { margin-right: 0;}

Или:

.element:not(:last-child) { margin-right: 1rem;}

В приведенном выше примере мы добавляем отступ с правой стороны каждого элемента, кроме последнего. То есть, хотим добавить отступ после элемента в направлении горизонтального потока документа(или родительского элемента).

Чтобы выделить цитаты, обычно мы добавляем границу с той стороны цитаты, которую мы считаем предшествующей ей.

.content blockquote { background-color: #f5f5f5; border-left: 5px solid #dbdbdb; padding: 1.25em 1.5em;}

Есть много иных CSS-стилей, в которых мы указываем направление(лево / право). Но фактически мы имеем в виду до или после. Так что при создании интерфейсов, которые поддерживают LTR и RTL-макеты следует использовать следующие правила написания CSS-кода:

.class {}html[dir="rtl"].class {}

Также можно подгружать разный CSS для макетов LTR и RTL. Но оба варианта реализации подразумевают увеличение объема кода.

А нельзя ли указать браузеру, что нам нужна сторона до или после элемента, а не направления(лево или право).

Для этого в CSS имеет логические свойства: inline-start и inline-end:

.element:not(:last-child) { margin-inline-end: 1rem;}

Вместо использования top и bottom мы можем использовать block-start и block-end. Так что можно без проблем написать один набор CSS-правил для макетов LTR и RTL. Ниже приведен пример использования свойства margin-inline-end:

Пример использования свойств border-inline-start и padding-inline-start:

Браузер Firefox также поддерживает свойство border-*-*-radius. Так что можно указывать разные углы при помощи border-start-start-radius, border-end-start-radius и т.д.

Все демо-версии:

Поддержка браузерами

  • Логические свойства
  • border-*-*-radius

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *