От автора: этот пост о логических свойствах 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
Узнать подробнее
