Улучшения логического макета с помощью сокращений, относящихся к потоку

Новые сокращения логических свойств и новые вставки свойств для Chromium.

Начиная с Chromium 69 (3 сентября 2018 г.), логические свойства и значения помогают разработчикам сохранять контроль над своими международными макетами с помощью логических, а не физических стилей направления и размеров. В Chromium 87 появились сокращения и смещения, чтобы упростить запись этих логических свойств и значений. Это подхватывает Chromium до Firefox, который поддерживает сокращения с версии 66 . Safari уже подготовил их в технологическом предварительном просмотре .

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

Документооборот

Если вы уже знакомы с логическими свойствами, встроенными и блочными осями и не хотите повторять это, вы можете пропустить эту тему . В противном случае, вот краткое напоминание.

В английском языке буквы и слова располагаются слева направо, а абзацы располагаются сверху вниз. В традиционном китайском языке буквы и слова располагаются сверху вниз, а абзацы — справа налево. Только в этих двух случаях, если мы пишем CSS, который помещает «верхнее поле» в абзац, мы соответствующим образом размещаем только один языковой стиль. Если страница переведена на традиционный китайский с английского, поля могут не иметь смысла в новом режиме вертикального письма.

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

Вы когда-нибудь проверяли элемент p в Chrome DevTools? Если это так, вы могли заметить, что стили User Agent по умолчанию не физические, а логические.

p {
 
margin-block-start: 1em;
 
margin-block-end: 1em;
 
margin-inline-start: 0px;
 
margin-inline-end: 0px;
}

CSS из таблицы стилей пользовательского агента Chromium

Поле не находится сверху или снизу, как мог бы подумать английский читатель. Это block-start и block-end ! Эти логические свойства сродни верху и низу английского читателя, но также сродни правому и левому читателю японскому. Написано один раз, работает везде.

Нормальный поток — это когда веб-страница намеренно является частью этой разнонаправленности. Когда содержимое страницы обновляется в соответствии с изменением направления документа, макет и его элементы считаются в потоке. Подробнее о «входе» и «выходе» потока читайте на MDN или в спецификации CSS Display Module . Хотя логические свойства не обязательно должны находиться в потоке, они выполняют за вас большую часть тяжелой работы при изменении направления. Поток подразумевает направление, по которому должны двигаться буквы, слова и контент. Это приводит нас к блокированию и встроенным логическим направлениям.

Направление блока — это направление, в котором следуют новые блоки контента, как будто вы спрашиваете себя: «Где разместить следующий абзац?». Вы можете думать об этом как о «блоке контента» или «блоке текста». Каждый язык упорядочивает свои блоки и упорядочивает их вдоль соответствующей block-axis . block-start — это сторона, на которой впервые размещается абзац, а block-end — это сторона, к которой направляются новые абзацы.

Например, в традиционном японском почерке направление блоков идет справа налево:

Встроенное направление — это направление движения букв и слов. Учитывайте направление движения вашей руки, когда вы пишете; они движутся вдоль inline-axis . inline-start — это сторона, с которой вы начинаете писать, а inline-end — это сторона, где запись заканчивается или завершается. На видео выше inline-axis расположена сверху вниз, но в следующем видео inline-axis течет справа налево.

flow-relative означает, что стили, написанные для одного языка, будут контекстуальными и соответствующим образом применяться на других языках. Контент будет отображаться в соответствии с языком, на котором он предоставляется.

Новые сокращения

Некоторые из следующих сокращений не являются новыми функциями для браузера, а представляют собой более простые способы написания стилей за счет возможности одновременно устанавливать значения как на блочных, так и на строчных краях. Логические свойства inset-* действительно открывают новые возможности, поскольку до них не существовало традиционных способов указания абсолютных позиций с помощью логических свойств. Однако вставки и сокращения настолько хорошо сочетаются (хе-хе), что я собираюсь рассказать вам обо всех новых функциях логических свойств, появившихся в Chromium 87, сразу.

Сокращения полей

Никаких новых способностей не появилось, но появились некоторые очень удобные сокращения:
margin-block и margin-inline .

От руки
margin-block-start: 2ch;
margin-block-end: 2ch;
Новая стенография
margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

Не существует сокращений для слов «сверху и снизу» или «слева и справа»… до сих пор! Вероятно, вы ссылаетесь на все 4 стороны, используя сокращение margin: 10px; , и теперь вы можете легко ссылаться на две взаимодополняющие стороны, используя сокращение логического свойства.

От руки
margin-inline-start: 4ch;
margin-inline-end: 2ch;
Новая стенография
margin-inline: 4ch 2ch;

Заполнение сокращений

Никаких новых способностей не появилось, но появились более удобные сокращения:
padding-block и padding-inline .


От руки
padding-block-start: 2ch;
padding-block-end: 2ch;
Новая стенография
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

И inline бесплатный набор сокращений:

От руки
padding-inline-start: 4ch;
padding-inline-end: 2ch;
Новая стенография
padding-inline: 4ch 2ch;

Вставка и сокращения

Физические свойства top , right , bottom и left могут быть записаны как значения свойства inset . Любое значение position может выиграть от установки сторон со вставкой.

.cover {
  position
: absolute;
  top
: 0;
  right
: 0;
  bottom
: 0;
  left
: 0;
  inset
: 0;
}


Физический от руки
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
Новая физическая стенография
position: absolute;
inset: 1px 2px 3px 4px;

Это должно выглядеть сразу удобно! Inset — это сокращение физических сторон, и оно работает так же, как поля и отступы.

Новые возможности

Какими бы захватывающими ни были сокращения физических сторон, есть еще больше логических функций, которые приносят дополнительные сокращения- inset . Эти сокращения упрощают авторскую работу разработчика (их короче для ввода), но также увеличивают потенциальный охват макета, поскольку они зависят от потока.

Физический от руки
position: absolute;
top: 10px;
bottom: 10px;
Логическое сокращение
position: absolute;
inset-block: 10px;


Физический от руки
position: absolute;
left: 10px;
right: 20px;
Логическое сокращение
position: absolute;
inset-inline: 10px 20px;

Дополнительная информация и полный список сокращенных и полноформатных вставок доступны на MDN.

Сокращения границ

Граница, а также ее вложенные свойства color , style и width также получили новые логические сокращения.


Физический от руки
border-top-color: hotpink;
border-bottom-color: hotpink;
Логическое сокращение
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;


Физический от руки
border-left-style: dashed;
border-right-style: dashed;
Логическое сокращение
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;


Физический от руки
border-left-width: 1px;
border-right-width: 1px;
Логическое сокращение
border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

Дополнительная информация и полный список сокращений и сокращений границ доступны на MDN.

Пример логического свойства <figure>

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

Или попробуйте!

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

Полифиллинг и кроссбраузерность

Инструменты каскадирования или сборки — это жизнеспособные варианты использования как старых, так и новых браузеров с правильным расположением и обновленными логическими свойствами. Для резервных вариантов каскадирования за физическим свойством следует логическое, и браузер будет использовать «последнее» свойство, найденное во время разрешения стиля.

p {
 
/* for unsupporting browsers */
 
margin-top: 1ch;
 
margin-bottom: 2ch;

 
/* for supporting browsers to use */
 
/* and unsupporting browsers to ignore and go 🤷‍♂️ */
 
margin-block: 1ch 2ch;
}

Однако это не совсем полное решение для всех. Вот написанный от руки запасной вариант, который использует псевдоселектор :lang() для выбора конкретных языков, соответствующим образом настраивает их физическое расстояние, а затем в конце предлагает логическое расстояние для поддержки браузеров:

/* physical side styles */
p
{
 
margin-top: 1ch;
 
margin-bottom: 2ch;
}

/* adjusted physical side styles per language */
:lang(ja) {
  p
{
   
/* zero out styles not useful for traditional Japanese */
   
margin-top: 0;
   
margin-bottom: 0;

   
/* add appropriate styles for traditional Japanese */
   
margin-right: 1ch;
   
margin-left: 2ch;
 
}
}

/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}

/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p
{
 
/* remove any potential physical cruft.. */
 
margin: 0;
 
/* explicitly set logical value */
 
margin-block: 1ch 2ch;
}

Вы также можете использовать @supports , чтобы определить, следует ли предоставлять резервные физические свойства:

p {
 
margin-top: 1ch;
 
margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p
{
   
margin-block: 1ch 2ch;
 
}
}

Sass , PostCSS , Emotion и другие имеют автоматизированные пакеты и/или предложения по времени сборки, которые имеют широкий спектр запасных вариантов или решений. Проверьте каждый из них, чтобы увидеть, какой из них соответствует вашей цепочке инструментов и общей стратегии сайта.

Что дальше

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

Физическая стенография
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;
Логическое сокращение
margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

Текущий проект предложения будет означать, что вам придется писать logical в каждом сокращении, чтобы получить логический эквивалент, что для некоторых звучит не очень СУХО .

Есть и другие предложения изменить его на уровне блока или страницы, но это может привести к утечке логического использования в стили, которые все еще принимают физические аспекты.

html {
 
flow-mode: physical;
 
/* or */
 
flow-mode: logical;
 
/* now all margin/padding/etc references are logical */
}

/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */

Это непросто! Голосуйте, высказывайте свое мнение, мы хотим услышать ваше мнение.

Хотите больше узнать или изучить логические свойства? Вот подробная ссылка с руководствами и примерами на MDN 🤓

Обратная связь