02.08.2021
6b79601fe5cb590f58e53223f0288e8e

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

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

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

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

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

JavaScript

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

JavaScript

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

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

CSS

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

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

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

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

left — inset-inline-start

right — inset-inline-end

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

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

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

CSS

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

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

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

Короткое руководство по логическим свойствам 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

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

CSS

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

CSS

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

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

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

И rtl:

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

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

CSS

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

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

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

CSS

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

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

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

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

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

Заключение

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

По материалам webformyself.com

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

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