Двунаправленные горизонтальные правила в 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