От автора: этот пост о логических свойствах CSS с примерами базового и расширенного использования. Если вы думаете, что вам не нужны логические свойства CSS, подумайте еще раз!
Если вы когда-либо работали над веб-сайтом для глобального клиента, вы могли встретить термины «слева направо» (ltr) и «справа налево» (rtl). Языки с написанием слева направо включают большинство западных языков, таких как английский или французский, а языки с написанием справа налево включают арабский и иврит.
На веб-сайте вы переключаете (язык) — направление с помощью dir=»ltr» (или rtl) в HTML или с помощью direction-свойства в CSS. Итак, на какие свойства повлияет изменение направления? Практически на все свойства, которые включают слова left или right. Чтобы получить краткий обзор, вставьте это в вашу консоль:
1 2 3 |
const logical = ['right', 'left']; const props = [...getComputedStyle(document.body)].filter(entry => logical.some(key => entry.includes(`-${key}`))); console.table(props); |

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееНо это не все! Некоторые языки написаны вертикально с использованием свойства CSS writing-mode. Это означает, что нам нужно включить top и bottom в наш фрагмент:
1 |
const logical = ['top', 'right', 'bottom', 'left']; |
Как и большинство свойств, содержащих слова height или width. Если вы позиционируете элемент с помощью position:absolute; и left:0; это не сработает, когда вы измените направление: оно будет работать, но не так, как предполагалось — поскольку элемент останется left, в то время как все остальное содержимое изменит направление.
Чтобы исправить это, вы можете написать дополнительный CSS для rtl, например:
1 2 3 4 |
[dir="rtl"] .selector { left: auto; right: 0; } |
Но … это будет слишком много работы для веб-сайта с большим количеством компонентов. К счастью, есть способ лучше.
Логические свойства CSS
Из MDN: Логические свойства и значения CSS — это модуль CSS, представляющий логические свойства и значения, которые обеспечивают возможность управления макетом через логические, а не физические сопоставления направлений и размеров.
С логическими свойствами, left и right это inline, в то время как для top и bottom это block. Чтобы указать направление внутри этого «квадрата», мы используем слова start и end. Итак, новые значения для позиционирования (слева — значение, справа — логическое значение):
left — inset-inline-start
right — inset-inline-end
top — вставка-блок-начало
bottom — вставка-блок-конец
С помощью логических свойств вы также можете установить их все за один раз, что было невозможно раньше:
1 2 3 4 5 6 7 8 9 10 11 |
.before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .after { position: fixed; inset: 0; } |
margin-top становится margin-block-start, а margin-bottom становится margin-block-end. margin-left становится margin-inline-start и margin-right становится margin-inline-end. И так далее: border-block, border-inline, padding-block…
Единственные свойства, которые отличаются от этого формата, — это «border-radius» (слева — значение, справа — логическое значение):
border-top-left-radius — border-start-start-radius
border-top-right-radius — border-start-end-radius
border-bottom-left-radius — border-end-start-radius
border-bottom-right-radius — border-end-end-radius
Но хватит разговоров. Здесь документация. Давайте посмотрим несколько примеров!
Примеры
Вот карточка товара с dir=»ltr»:
Вот такая же карта, но с dir=»rtl»:
Хм, заголовок размещается вместе с position:absolute и left:0; и он останется там, даже если мы изменим направление. Давайте изменим это на:
1 2 3 4 |
.caption { inset-inline-start: 0; position: absolute; } |
Намного лучше! Теперь давайте добавим splash с inset-inline-end: 0:

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВыглядит неплохо, но можно сделать небольшой интервал. Давайте не будем жестко кодировать интервал, так как редактор может захотеть расположить splash так, как он хочет, используя пользовательские свойства translate-x:var(—S-tx, -10%) и translate-y:var(—S-ty, 10%):
Что же происходит, когда мы меняем направление?
Хм, не хорошо — переведенные значения сохраняются. И, как я уже упоминал, если редакторы могут динамически изменять позицию, мы не можем жестко кодировать значения.
К сожалению, translate-inline или translate-block не существует, поэтому давайте добавим свойство для scaleX, —S-sx со значением по умолчанию 1:
1 2 3 4 5 6 |
.splash { transform: scaleX(var(--S-sx, 1)) translateX(var(--S-tx, 0%)) translateY(var(--S-ty, 0%)) } |
Затем с помощью dir=»rtl» мы можем просто обновить это свойство:
1 |
[dir="rtl"] .splash { --S-sx: -1; } |
Работает! scaleX(1) становится scaleX(-1) но оно также перевернет текстовые строки! Чтобы исправить это, мы добавим обертку вокруг текстовых строк и перевернем ее:
1 |
[dir="rtl"] .splash-lines { transform: scaleX(-1) translateX(-100%); } |
В этом примере вы также могли бы использовать margin-inline-end:-10%; и margin-block-start:10%;- но я использую метод translateand scaleX-, поэтому splash может иметь разные формы, которые затем будут перевернуты. Вот еще один пример ltr:
И rtl:
В качестве последнего примера давайте добавим изображение (и оболочку), используя:
1 2 3 4 5 6 7 8 9 10 11 |
.image { transform: scaleX(var(--I-sx, 1)) translateX(var(--I-tx, 0)) translateY(var(--I-ty, 0)); } .image-wrapper { inset-block-end: 0; inset-inline-end: 0; transform: scaleX(var(--IW-sx, 1)) translateX(var(--IW-tx, 0)); } |
Мы переведем это как splash и добавим drop-shadow:
Используя тот же принцип, что и раньше, но используя переменную из свойства .image в переменной calc() в .image-wrapper, мы можем перевернуть и отрегулировать положение следующим образом:
1 2 |
[dir="rtl"] .image { --I-sx: -1; } [dir="rtl"] .image-wrapper { --IW-sx: -1; --IW-tx: calc(-1% * var(--I-tx)); } |
Если мы добавим perspective-variable и rotateY-variable, мы можем пойти еще дальше:
А затем просто обновите переменные для rtl:
Заключение
Стоит ли использовать логические свойства CSS, даже если ваш сайт сейчас только ltr? Да! Вам нечего терять, и ваш веб-сайт рассчитан на будущее, если вы захотите позже добавить международную поддержку. Спасибо за чтение!
Автор: Mads Stoumann
Источник: dev.to
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее