Новые сокращения логических свойств и новые вставки свойств для 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. Если ни одна из существующих проблем не соответствует вашей ошибке, создайте новую проблему .