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

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

13 октября 2020 г.

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

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

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

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

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

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

   p   { 
  маржа-блок-начало  :  1em ;  
  край блока-поля  :  1em ;  
  начало встроенного поля  :  0px ;  
  margin-inline-end  :  0px ;  
 }   

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

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

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

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

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

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

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

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

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

Сокращение маржи #

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

   маржа-начало блока  :  2ch ;  
  край-конец блока  :  2-канальный ;   

   блок поля  :  2ch ;  
  блок поля  :  2-канальный 2-канальный ;   

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

   margin-inline-start  :  4ch ;  
  margin-inline-end  :  2-канальный ;   

   встроенный маржинальный  :  4-канальный 2-канальный ;   

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

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

   padding-block-start  :  2ch ;  
  padding-block-end  :  2-канальный ;   

   padding-block  :  2ch ;  
  padding-block  :  2-канальный 2-канальный ;   

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

   padding-inline-start  :  4ch ;  
  padding-inline-end  :  2-канальный ;   

   внутренние отступы  :  4-канальный 2-канальный ;   

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

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

    .cover   {  
   позиция  :  абсолютный ;   
   верхний  :  0 ;   
   ] справа  :  0 ;   
   внизу  :  0 ;  ]  
   слева  :  0 ;   
   вставка  :  0 ;   
  }    

   положение  :  абсолютное ;  
  верхнее  :  1px ;  
  справа  :  2px ;  
  снизу  :  3px ;  
  слева  :  4px ;   

   положение  :  абсолютное ;  
  вставка  :  1px 2px 3px 4px ;   

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

Новые функции #

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

   положение  :  абсолютное ;  
  верхнее  :  10px ;  
  низ  :  10px ;   

   положение  :  абсолютное ;  
  вставка-блок  :  10px ;   

   положение  :  абсолютное ;  
  левое  :  10px ;  
  справа  :  20px ;   

   положение  :  абсолютное ;  
  вставка-встроенный  :  10px 20px ;   

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

Пограничные сокращения #

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

   верхний цвет границы  :  горячий розовый ;  
  нижний цвет границы  :  hotpink ;   

   цвет рамки  :  горячий розовый ;  
  цвет рамки  :  хотпинк, хотпинк ;   

   граница в левом стиле  :  пунктирная ;  
  граница в правом стиле  :  штриховой ;   

   пограничный встроенный стиль  :  штриховой ;  
  пограничный встроенный стиль  :  штриховая пунктирная ;   

   ширина границы слева  :  1px ;  
  ширина границы справа  :  1px ;   

   border-inline-width  :  1px ;  
  border-inline-width  :  1px 1px ;   

Дополнительная литература и полный список стенографических и полных изображений границ.
доступно на MDN.

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

пример №

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

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

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

   p   { 
  крайний верх  :  1ch ;  
  нижний край  :  2-канальный ;  
 
  крайний блок  :  1-кан. 2 канала ;  
 }  
  

  
  p   { 
  верхний край  :  1ch ;  
  нижняя граница  :  2ch ;  
 }  
 
 : lang (ja)   { 
  p   { 
  верхний край  :  0 ;  
  нижнее поле  :  0 ;  
 
 
  поле справа  :  1 канал ;  
  край слева  :  2ch ;  
 }  
 }  
 
 
 : lang (he)   {… }  
 : lang (mn)   {… }  
 
 
  p   { 
  запас  :  0 ;  
  маржа-блок  :  1-канальный 2-канальный ;  
 }  
  

   p   { 
  крайний верх  :  1ch ;  
  нижнее поле  :  2ch ;  
 }  
   @supports  ]  (  маржа-блок  :  0 )    { 
  p   { 
  маржа-блок  :  1-канальный 2-канальный ;  
 }  
 }  
  

   поле  :  1px 2px 3px 4px ;  
  margin  :  ] 1px 2px ;  
  margin  :  2px ;   

   поле  :  логическое 1px 2px 3px 4px ;  
  margin  :  логический 1px 2px ;  
  маржа  :  логический 2px ;   

   html   { 
  поточный режим  :  физический ;  
  поточный режим  :  логический ;  
 }