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

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

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

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

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

left — inset-inline-start

right — inset-inline-end

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

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

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

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

Намного лучше! Теперь давайте добавим 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:

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

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

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

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

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

И rtl:

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

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

Мы переведем это как splash и добавим drop-shadow:

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

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

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

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

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

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

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

Заключение

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

Автор: Mads Stoumann

Источник: dev.to

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

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

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

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

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

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.