Логические свойства CSS Уровень 2: Создание по-настоящему глобальной сети с улучшенной поддержкой режимов письма

На протяжении десятилетий веб-разработчики создавали макеты, используя терминологию, укоренившуюся в физическом мире: сверху, снизу, слева и справа. Мы устанавливали margin-left, padding-top и border-right. Эта ментальная модель хорошо служила нам, когда интернет был преимущественно средой с направлением слева направо, сверху вниз. Однако интернет глобален. Это платформа для всех языков и культур, многие из которых не следуют этому простому направлению потока.

Такие языки, как арабский и иврит, пишутся справа налево. Традиционные японский и китайский языки могут писаться вертикально, сверху вниз и справа налево. Навязывание физической, слева направо модели CSS этим системам письма приводит к нарушенным макетам, разочаровывающему пользовательскому опыту и множеству переопределений кода. Именно здесь на помощь приходят логические свойства и значения CSS, представляя фундаментальный сдвиг парадигмы от физических направлений к потоково-зависимым, логическим направлениям. В то время как Уровень 1 заложил основу, Логические свойства CSS Уровень 2 завершают картину, предоставляя инструменты, необходимые для создания по-настоящему универсальных пользовательских интерфейсов, учитывающих режимы письма.

Это подробное руководство позволит вам глубоко погрузиться в улучшения, внесенные Уровнем 2. Мы начнем с повторения основных концепций, затем изучим новые свойства и значения, которые заполняют пробелы, и, наконец, применим все это на практике, создав компонент, который без проблем адаптируется к любому режиму письма. Приготовьтесь навсегда изменить свое представление о макете CSS.

Краткий обзор: Основные концепции логических свойств (Уровень 1)

Прежде чем мы сможем оценить дополнения Уровня 2, мы должны иметь четкое представление об основе, заложенной Уровнем 1. Вся система построена на двух ключевых концепциях: режиме письма и результирующих блочных и строчных осях.

Четыре режима письма

Свойство CSS writing-mode определяет направление вывода текста. Хотя мы часто воспринимаем значение по умолчанию как должное, существует несколько значений, которые принципиально меняют способ потока контента на странице:

• horizontal-tb: Это значение по умолчанию для большинства западных языков. Текст течет горизонтально (вдоль строчной оси) слева направо (или справа налево в зависимости от направления), а строки располагаются сверху вниз (вдоль блочной оси).
• vertical-rl: Используется для традиционной восточноазиатской типографики (например, японской, китайской). Текст течет вертикально сверху вниз (вдоль строчной оси), а строки располагаются справа налево (вдоль блочной оси).
• vertical-lr: Аналогично предыдущему, но строки располагаются слева направо (вдоль блочной оси). Менее распространен, но используется в некоторых контекстах, например, для монгольской письменности.
• sidelong-rl / sidelong-lr: Эти значения используются для особых случаев, когда требуется расположить глифы на боку. Они менее распространены в общем веб-контенте.

Ключевая концепция: Блочная ось против строчной оси

Это самая важная концепция для понимания. В логическом мире мы перестаем думать о "вертикальном" и "горизонтальном" и начинаем мыслить в терминах блочной и строчной осей. Их ориентация полностью зависит от writing-mode.

• Строчная ось — это направление, в котором текст течет в пределах одной строки.
• Блочная ось — это направление, в котором новые строки располагаются друг за другом.

Давайте посмотрим, как это работает на практике:

• В стандартном английском (writing-mode: horizontal-tb): Строчная ось проходит горизонтально, а блочная ось — вертикально.
• В традиционном японском (writing-mode: vertical-rl): Строчная ось проходит вертикально, а блочная ось — горизонтально.

Поскольку эти оси могут меняться, свойства, такие как width и height, становятся двусмысленными. Является ли width размером по горизонтальной оси или по строчной оси? Логические свойства решают эту двусмысленность. Теперь у нас есть начало и конец для каждой оси:

• block-start: "Верх" в английском, но "право" в вертикальном японском.
• block-end: "Низ" в английском, но "лево" в вертикальном японском.
• inline-start: "Лево" в английском, но "верх" в вертикальном японском.
• inline-end: "Право" в английском, но "низ" в вертикальном японском.

Сопоставление физических и логических свойств (Уровень 1)

Уровень 1 представил комплексный набор сопоставлений физических свойств с логическими. Вот несколько ключевых примеров:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (для позиционирования) → inset-inline-start / inset-inline-end
• top / bottom (для позиционирования) → inset-block-start / inset-block-end

Уровень 1 также предоставил нам полезные сокращенные свойства, такие как margin-inline (для начала и конца) и padding-block (для начала и конца).

Добро пожаловать на Уровень 2: Что нового и почему это важно

Хотя Уровень 1 был монументальным шагом вперед, он оставил некоторые заметные пробелы. Определенные фундаментальные свойства CSS, такие как float, clear и resize, не имели логических эквивалентов. Кроме того, свойства, такие как border-radius, не могли управляться логически, что вынуждало разработчиков возвращаться к физическим свойствам для детального стиля. Это означало, что можно было создать макет на 90% с помощью логических свойств, но все равно требовались физические переопределения для разных режимов письма, что частично сводило на нет цель.

Логические свойства CSS Уровень 2 устраняют эти недостатки напрямую. Речь идет не о внедрении радикально новой системы, а о завершении той, что была начата на Уровне 1. Это достигается двумя основными способами:

1. Введение новых логических свойств и значений для старых функций CSS, которые изначально были физическими (например, float).
2. Добавление логических сопоставлений свойств для сложных сокращений, которые ранее игнорировались (например, border-radius).

С Уровнем 2 видение полностью потоково-зависимой системы стилизации почти завершено, что позволяет нам создавать сложные, красивые и надежные компоненты, которые работают везде и для всех, без хаков или переопределений.

Глубокое погружение: Новые логические значения и свойства в Уровне 2

Давайте рассмотрим наиболее значимые дополнения, которые Уровень 2 вносит в наш инструментарий разработчика. Это инструменты, которые заполняют пробелы и способствуют созданию по-настоящему универсального дизайна компонентов.

Float и Clear: Логическая революция

Свойство float было краеугольным камнем макета CSS на протяжении многих лет, но его значения, left и right, являются определением физического направления. Если вы прикрепляете изображение к левой стороне абзаца на английском языке, оно выглядит правильно. Но если изменить направление документа на справа налево (RTL) для арабского языка, изображение окажется на "неправильной" стороне текстового блока. Оно должно быть справа, что является началом строки.

Уровень 2 вводит два новых логических ключевых слова для свойства float:

• float: inline-start; Это прикрепляет элемент к началу строчного направления. В языках LTR это левая сторона. В языках RTL это правая сторона. В режиме письма vertical-rl это верхняя сторона.
• float: inline-end; Это прикрепляет элемент к концу строчного направления. В LTR это правая сторона. В RTL это левая сторона. В vertical-rl это нижняя сторона.

Аналогично, свойство clear, используемое для управления обтеканием контента вокруг прикрепленных элементов, получает свои логические эквиваленты:

• clear: inline-start; Очищает обтекание со стороны inline-start.
• clear: inline-end; Очищает обтекание со стороны inline-end.

Это меняет правила игры. Теперь вы можете создавать классические макеты с изображением и обтекающим текстом, которые автоматически адаптируются к любому направлению языка без единой дополнительной строки CSS.

Расширенный контроль с помощью логического изменения размера

Свойство resize, обычно используемое для textarea, позволяет пользователям изменять размер элемента. Его традиционные значения — horizontal, vertical и both. Но что означает "horizontal" в вертикальном режиме письма? Оно по-прежнему означает изменение размера вдоль физической горизонтальной оси, что может не соответствовать намерениям пользователя или дизайнера. Пользователь, вероятно, хочет изменить размер элемента вдоль его строчной оси, чтобы сделать строки длиннее или короче.

Уровень 2 вводит логические значения для resize:

• resize: inline; Позволяет изменять размер вдоль строчной оси.
• resize: block; Позволяет изменять размер вдоль блочной оси.

Использование resize: block; для textarea на английском языке позволяет пользователю сделать ее выше. Использование этого в вертикальном режиме письма позволяет пользователю сделать ее шире (что является блочным направлением). Это просто работает.

`caption-side`: Логическое позиционирование для заголовков таблиц

Свойство caption-side определяет размещение заголовка таблицы. Старые значения были top и bottom. Опять же, они физические. Если дизайнер намеревается разместить заголовок "до" содержимого таблицы, top работает для горизонтальных режимов письма. Но в режиме vertical-rl "начало" блочного потока находится справа, а не сверху.

Уровень 2 предлагает логическое решение:

• caption-side: block-start; Размещает заголовок в начале блочного потока.
• caption-side: block-end; Размещает заголовок в конце блочного потока.

`text-align`: Фундаментальное логическое значение

Хотя значения start и end для text-align существуют уже некоторое время, они являются основной частью философии логических свойств и их стоит укрепить. Использование text-align: left; — распространенная ошибка, которая немедленно вызывает проблемы с макетом в языках RTL. Правильный, современный подход — всегда использовать:

• text-align: start; Выравнивает текст по началу строчного направления.
• text-align: end; Выравнивает текст по концу строчного направления.

Жемчужина Уровня 2: Логическое `border-radius`

Возможно, самым значительным и мощным дополнением в Уровне 2 является набор свойств для логического управления радиусами границ. Ранее, если вы хотели, чтобы карточка имела скругленные углы только "сверху", вы использовали бы border-top-left-radius и border-top-right-radius. Это полностью нарушается в вертикальном режиме письма, где "верхние" углы теперь являются углами start-start и end-start.

Уровень 2 вводит четыре новых подробных свойства, которые сопоставляются с четырьмя углами элемента потоково-зависимым способом. Соглашение об именовании: border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Угол, где встречаются стороны block-start и inline-start.
• border-start-end-radius: Угол, где встречаются стороны block-start и inline-end.
• border-end-start-radius: Угол, где встречаются стороны block-end и inline-start.
• border-end-end-radius: Угол, где встречаются стороны block-end и inline-end.

Это может быть сложно визуализировать сначала, поэтому давайте рассмотрим это для разных режимов письма:

Сопоставление `border-radius` в `writing-mode: horizontal-tb` (например, английский)

• border-start-start-radius сопоставляется с top-left-radius.
• border-start-end-radius сопоставляется с top-right-radius.
• border-end-start-radius сопоставляется с bottom-left-radius.
• border-end-end-radius сопоставляется с bottom-right-radius.

Сопоставление `border-radius` в `writing-mode: horizontal-tb` с `dir="rtl"` (например, арабский)

Здесь строчное направление перевернуто.

• border-start-start-radius сопоставляется с top-right-radius. (Block-start — это верх, inline-start — это право).
• border-start-end-radius сопоставляется с top-left-radius.
• border-end-start-radius сопоставляется с bottom-right-radius.
• border-end-end-radius сопоставляется с bottom-left-radius.

Сопоставление `border-radius` в `writing-mode: vertical-rl` (например, японский)

Здесь обе оси повернуты.

• border-start-start-radius сопоставляется с top-right-radius. (Block-start — это право, inline-start — это верх).
• border-start-end-radius сопоставляется с bottom-right-radius.
• border-end-start-radius сопоставляется с top-left-radius.
• border-end-end-radius сопоставляется с bottom-left-radius.

Используя эти новые свойства, вы можете определять радиусы углов, которые семантически связаны с потоком содержимого, а не с физическим экраном. Угол "start-start" всегда будет правильным углом, независимо от языка или направления текста.

Практическая реализация: Создание глобально готового компонента

Теория — это прекрасно, но давайте посмотрим, как это работает на практике. Мы создадим простой компонент карточки профиля, сначала используя старые физические свойства, а затем переделаем его для использования современных логических свойств как Уровня 1, так и Уровня 2.

Карточка будет иметь изображение, прикрепленное к одной стороне, заголовок, некоторый текст, а также декоративную рамку и скругленные углы.

"Старый" способ: Хрупкая карточка с физическими свойствами

Вот как мы могли бы стилизовать эту карточку несколько лет назад:

/* --- CSS (Физические свойства) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

В стандартном англоязычном LTR-контексте это выглядит хорошо. Но если мы поместим это в контейнер с dir="rtl" или writing-mode: vertical-rl, макет нарушится. Декоративная рамка окажется не на той стороне, аватар будет не на той стороне, отступ будет неправильным, а скругленные углы будут смещены.

"Новый" способ: Надежная карточка с логическими свойствами

Теперь давайте переработаем тот же компонент, используя логические свойства. Мы будем использовать свойства как Уровня 1, так и новые дополнения Уровня 2.

/* --- CSS (Логические свойства) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` сокращенное свойство уже логично! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Мощь Уровня 2! */

  border-end-start-radius: 8px; /* Мощь Уровня 2! */

}

.logical-card .avatar {

  float: inline-start; /* Мощь Уровня 2! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Тестирование и верификация

С этим новым CSS вы можете поместить компонент в любой контейнер, и он автоматически адаптируется.

• В контексте LTR: Он будет выглядеть идентично исходной физической версии.
• В контексте RTL (dir="rtl"): Аватар будет прикреплен справа, его отступ будет слева, декоративная рамка будет справа, а текст будет выровнен по началу (справа). Скругленные углы будут правильно расположены в правом верхнем и правом нижнем углах. Это просто работает.
• В вертикальном контексте (writing-mode: vertical-rl): "Ширина" карточки (теперь ее вертикальный inline-size) будет 300px. Аватар будет прикреплен "сверху" (inline-start) с отступом "снизу" (inline-end). Декоративная рамка будет находиться с правой стороны (inline-start), а скругленные углы — в правом верхнем и левом верхнем углах. Компонент полностью правильно переориентировался без каких-либо медиа-запросов или переопределений.

Поддержка браузерами и запасные варианты

Все это звучит фантастически, но что насчет поддержки браузерами? Хорошая новость заключается в том, что поддержка логических свойств Уровня 1 отличная во всех современных браузерах. Вы можете и должны использовать такие свойства, как margin-inline-start и padding-block уже сегодня.

Поддержка новых функций Уровня 2 быстро улучшается, но еще не является универсальной. Логические значения для float, clear и resize хорошо поддерживаются. Логические свойства border-radius являются самыми новыми и могут все еще находиться за флагами функций или в последних версиях браузеров. Как всегда, вам следует обращаться к таким ресурсам, как MDN Web Docs или CanIUse.com, для получения самой актуальной информации о совместимости.

Стратегии прогрессивного улучшения

Поскольку CSS разработан для устойчивости, мы можем легко предоставить запасные варианты для старых браузеров. Каскад гарантирует, что если браузер не понимает логическое свойство, он просто проигнорирует его и использует физическое свойство, определенное до него.

Вот как вы можете написать CSS, готовый к запасным вариантам:

.card {

  /* Запасной вариант для старых браузеров */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Современное логическое свойство, которое переопределит запасной вариант */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Этот подход обеспечивает надежный базовый опыт для всех, предоставляя при этом улучшенный, адаптивный макет для пользователей на современных браузерах. Для проектов, которым не нужно поддерживать несколько режимов письма, это может быть излишним. Но для любого глобального приложения, системы дизайна или темы это надежная и перспективная стратегия.

Будущее логично: За пределами Уровня 2

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

Остались ли пробелы? Несколько. Логические значения для таких свойств, как background-position или градиенты, все еще обсуждаются. Но с выходом Уровня 2 подавляющее большинство повседневных задач по макетированию и стилизации теперь могут быть выполнены с использованием чисто логического подхода.

Призыв к действию для разработчиков ясен: начните по умолчанию использовать логические свойства. Сделайте inline-size своим основным выбором вместо width. Используйте margin-inline вместо раздельной установки левого и правого отступов. Речь идет не только о поддержке разных языков; речь идет о написании лучшего, более устойчивого CSS. Компонент, построенный с использованием логических свойств, по своей сути более многоразовый и адаптивный, независимо от того, используется ли он в LTR, RTL или вертикальном макете. Это просто лучшее проектирование.

Заключение: Примите поток

Логические свойства CSS Уровень 2 — это не просто набор новых функций; это завершение видения. Он предоставляет последние, ключевые элементы, необходимые для создания макетов, которые уважают естественный поток своего содержимого, каким бы он ни был. Принимая такие свойства, как float: inline-start и border-start-start-radius, мы поднимаем наше мастерство от простого позиционирования блоков на экране до создания по-настоящему глобальных, инклюзивных и перспективных веб-интерфейсов.

В следующий раз, когда вы начнете новый проект или создадите новый компонент, остановитесь, прежде чем печатать margin-left. Спросите себя: "Я имею в виду левую сторону, или я имею в виду начало?" Сделав этот небольшой ментальный сдвиг, вы внесете свой вклад в создание более адаптивного и доступного веба для всех и повсюду.