Close

6 июля, 2021

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

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

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

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

123 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 в наш фрагмент:

JavaScript
const logical = [‘top’, ‘right’, ‘bottom’, ‘left’];

1 const logical = [‘top’, ‘right’, ‘bottom’, ‘left’];

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

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

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

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

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

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

Из MDN:

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

left — inset-inline-start

right — inset-inline-end

top — вставка-блок-начало

bottom — вставка-блок-конец

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

CSS
.before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.after {
position: fixed;
inset: 0;
}

1234567891011 .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»:

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

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

CSS
[dir=»rtl»] .splash { —S-sx: -1; }

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

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

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

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

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

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

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

И rtl:

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

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

CSS
.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));
}

1234567891011 .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:

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

Используя тот же принцип, что и раньше, но используя переменную из свойства .image в переменной calc() в .image-wrapper, мы можем перевернуть и отрегулировать положение следующим образом:

CSS
[dir=»rtl»] .image { —I-sx: -1; }
[dir=»rtl»] .image-wrapper { —IW-sx: -1; —IW-tx: calc(-1% * var(—I-tx)); }

12 [dir=»rtl»] .image { —I-sx: -1; }[dir=»rtl»] .image-wrapper { —IW-sx: -1; —IW-tx: calc(-1% * var(—I-tx)); }

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

Если мы добавим perspective-variable и rotateY-variable, мы можем пойти еще дальше:

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

А затем просто обновите переменные для rtl:

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

Заключение

Стоит ли использовать логические свойства CSS, даже если ваш сайт сейчас только ltr? Да! Вам нечего терять, и ваш веб-сайт рассчитан на будущее, если вы захотите позже добавить международную поддержку. Спасибо за чтение!

Автор: Mads Stoumann

Источник: webformyself.com

Похожие статьи

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

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

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?