Новые сокращения логических свойств и новые вставки свойств для 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 🤓
Обратная связь
- Чтобы предложить изменения в синтаксисе CSS сокращений, связанных с потоком, сначала проверьте существующие проблемы в репозитории csswg-drafts. Если ни одна из существующих задач не соответствует вашему предложению, создайте новую задачу .
- Чтобы сообщить об ошибках в реализации в Chromium сокращений, связанных с потоком, сначала проверьте существующие проблемы в Chromium Bug Tracker. Если ни одна из существующих проблем не соответствует вашей ошибке, создайте новую проблему .