Краткое руководство по логическим свойствам CSS

От автора: этот пост о логических свойствах CSS с примерами базового и расширенного использования. Если вы думаете, что вам не нужны логические свойства CSS, подумайте еще раз!

Если вы когда-либо работали над веб-сайтом для глобального клиента, вы могли встретить термины «слева направо» (ltr) и «справа налево» (rtl). Языки с написанием слева направо включают большинство западных языков, таких как английский или французский, а языки с написанием справа налево включают арабский и иврит.

На веб-сайте вы переключаете (язык) — направление с помощью dir=»ltr» (или rtl) в HTML или с помощью direction-свойства в CSS. Итак, на какие свойства повлияет изменение направления? Практически на все свойства, которые включают слова left или right. Чтобы получить краткий обзор, вставьте это в вашу консоль:

const logical = ['right', 'left'];
const props = [...getComputedStyle(document.body)].filter(entry => logical.some(key => entry.includes(`-${key}`)));
console.table(props);

Но это не все! Некоторые языки написаны вертикально с использованием свойства CSS writing-mode. Это означает, что нам нужно включить top и bottom в наш фрагмент:

const logical = ['top', 'right', 'bottom', 'left'];

Как и большинство свойств, содержащих слова height или width. Если вы позиционируете элемент с помощью position:absolute; и left:0; это не сработает, когда вы измените направление: оно будет работать, но не так, как предполагалось — поскольку элемент останется left, в то время как все остальное содержимое изменит направление.

Чтобы исправить это, вы можете написать дополнительный CSS для rtl, например:

[dir="rtl"] .selector { left: auto; right: 0;
}

Но … это будет слишком много работы для веб-сайта с большим количеством компонентов. К счастью, есть способ лучше.

Логические свойства CSS

Из MDN: Логические свойства и значения CSS — это модуль CSS, представляющий логические свойства и значения, которые обеспечивают возможность управления макетом через логические, а не физические сопоставления направлений и размеров.

С логическими свойствами, left и right это inline, в то время как для top и bottom это block. Чтобы указать направление внутри этого «квадрата», мы используем слова start и end. Итак, новые значения для позиционирования (слева — значение, справа — логическое значение):

С помощью логических свойств вы также можете установить их все за один раз, что было невозможно раньше:

.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» (слева — значение, справа — логическое значение):

Но хватит разговоров. Здесь документация. Давайте посмотрим несколько примеров!

Примеры

Вот карточка товара с dir=»ltr»:

Вот такая же карта, но с dir=»rtl»:

Хм, заголовок размещается вместе с position:absolute и left:0; и он останется там, даже если мы изменим направление. Давайте изменим это на:

.caption { inset-inline-start: 0; position: absolute;
}

Намного лучше! Теперь давайте добавим splash с inset-inline-end: 0:

Выглядит неплохо, но можно сделать небольшой интервал. Давайте не будем жестко кодировать интервал, так как редактор может захотеть расположить splash так, как он хочет, используя пользовательские свойства translate-x:var(—S-tx, -10%) и translate-y:var(—S-ty, 10%):

Что же происходит, когда мы меняем направление?

Хм, не хорошо — переведенные значения сохраняются. И, как я уже упоминал, если редакторы могут динамически изменять позицию, мы не можем жестко кодировать значения.

К сожалению, translate-inline или translate-block не существует, поэтому давайте добавим свойство для scaleX, —S-sx со значением по умолчанию 1:

.splash { transform: scaleX(var(--S-sx, 1)) translateX(var(--S-tx, 0%)) translateY(var(--S-ty, 0%))
}

Затем с помощью dir=»rtl» мы можем просто обновить это свойство:

[dir="rtl"] .splash { --S-sx: -1; }

Работает! scaleX(1) становится scaleX(-1) но оно также перевернет текстовые строки! Чтобы исправить это, мы добавим обертку вокруг текстовых строк и перевернем ее:

[dir="rtl"] .splash-lines { transform: scaleX(-1) translateX(-100%); }

В этом примере вы также могли бы использовать margin-inline-end:-10%; и margin-block-start:10%;- но я использую метод translateand scaleX-, поэтому splash может иметь разные формы, которые затем будут перевернуты. Вот еще один пример ltr:

И rtl:

В качестве последнего примера давайте добавим изображение (и оболочку), используя:

.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, мы можем перевернуть и отрегулировать положение следующим образом:

[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, Яндекс.Дзен