Понимание логических свойств и значений

В прошлом CSS привязывался к физическим размерам и направлениям, физически отображая размещение элементов слева, справа, сверху и снизу. Мы float элемент left или right , мы используем свойства смещения позиционирования top , left , bottom и right . Мы устанавливаем поля, отступы и границы как margin-top и padding-left . Эти физические свойства и значения имеют смысл, если вы работаете в горизонтальном, сверху вниз, слева направо режиме и направлении письма.

Они имеют меньше смысла, если вы используете вертикальный режим письма, будь то для всего макета или для некоторых элементов. В этой статье я собираюсь объяснить, как меняется CSS для поддержки режимов записи, и при этом я проясню некоторые моменты, которые могут вас смутить в отношении Flexbox и Grid.

Когда я впервые начал работать с CSS Grid и объяснять людям новую спецификацию, я заметил, что свойство grid-area можно использовать как однострочное сокращение для установки всех четырех строк. Следовательно, три приведенных ниже примера приведут к одному и тому же размещению элемента. Первый использует обычные свойства, второй указывает начальную и конечную линии для каждого измерения, а третий использует grid-area .

 .item { grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4; }

 .item { grid-row: 1 / 3; grid-column: 2 / 4; }

 .item { grid-area: 1 / 2 / 3 / 4; }

Порядок строк при использовании grid-area следующий:

• сетка-строка-начало
• начало столбца сетки
• сетка-ряд-конец
• конец столбца сетки

Первый вопрос, который у меня (и у многих людей из моей аудитории) был: «Почему они не следуют порядку сверху, справа, снизу, слева, к которому мы привыкли из всего остального в CSS ?» На самом деле они идут в порядке, обратном этим значениям: сверху, слева, снизу, справа! Активно ли рабочая группа CSS пытается все усложнить?

Ответ заключается в том, что эти значения отошли от лежащего в основе предположения о том, что содержимое в Интернете соответствует физическим размерам экрана, при этом первое слово предложения находится в левом верхнем углу поля, в котором оно находится. Порядок строк в grid-area имеет смысл, если вы никогда не сталкивались с существующим способом, которым мы устанавливаем эти значения в сокращении. Сначала мы устанавливаем две начальные линии, затем две конечные линии.

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

Знание этого факта о режимах записи также объясняет, почему CSS Grid и Flexbox ссылаются на start и end линии, а не отображают сетку на физические размеры сверху, справа, снизу и слева, как мы использовали бы с абсолютным позиционированием. В приведенном выше примере первый элемент позиционируется с использованием grid-area и позиционирования на основе строк.

 grid-area: 1 / 2 / 3 / 4;

Если бы мы использовали длинную запись, это выглядело бы так:

 grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;

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

Блочные и встроенные размеры

Я уже упоминал то, что является ключом к пониманию нового макета, концепцию блочных и встроенных измерений. Эти термины будут появляться по мере того, как вы будете работать с новым CSS. Два измерения достаточно легко понять в контексте Grid Layout, поскольку мы всегда работаем с блоком и встроенной осью при работе в Grid Layout, поэтому я буду использовать демонстрацию Grid для объяснения.

Размер блока соответствует порядку расположения блоков на странице. Если вы думаете об абзаце текста на английском языке. Каждый абзац расположен один под другим, направление, в котором они расположены, является размером блока, и поэтому в макете сетки это ось блока.

В CSS Grid Layout ось блоков также называется осью строк, поэтому свойства оси блоков — grid-row-start и grid-row-end .

Таким образом, встроенная ось проходит через ось блока в том направлении, в котором слова располагаются в предложении. В английском языке эта ось проходит слева направо. В макете сетки встроенная ось — это ось столбца со свойствами grid-column-start и grid-column-end .

Если мы изменим режим записи в нашем примере на vertical-lr , режим записи станет вертикальным, что означает, что ось блока проходит вертикально, а встроенная ось — вдоль линий (сверху вниз).

Итак, если мы говорим о блочном измерении, мы описываем направление, в котором абзацы текста будут расположены в обычном потоке документа, а встроенное измерение — это направление, в котором движется предложение.

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

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

Я проиллюстрировал каждый раздел примерами CodePen, чтобы увидеть, как они работают, вам понадобится Firefox!

Логические измерения

Логические свойства определяют начальное и конечное свойства для блочного и встроенного измерения. Вместо свойств height и width мы используем block-size и inline-size . Мы также можем установить max-block-size , min-block-size , max-inline-size и min-inline-size . Если вы работаете на английском языке, горизонтальном языке сверху вниз, тогда block-size относится к физической height блока на вашем экране, а inline-size — к физической width элемента. Если вы работаете с языком, в котором блоки расположены вертикально, то, когда вы посмотрите на свой экран block-size будет контролировать width , а inline-size — высоту.

Вы можете увидеть это в действии в демо ниже. Мой блок имеет block-size блока 150 пикселей и inline-size 250 пикселей. Измените свойство writing-mode чтобы увидеть, как настраивается макет.

Логические границы

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

• border-top
• border-top-width
• border-top-style
• border-top-color
• border-right
• border-right-width
• border-right-style
• border-right-color
• border-bottom
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left
• border-left-width
• border-left-style
• border-left-color

Затем они имеют логические сопоставления, которые становятся немного подробными, как от руки, но таковы:

• border-block-start
• border-block-start-width
• border-block-start-style
• border-block-start-color
• border-inline-start
• border-inline-start-width
• border-inline-start-style
• border-inline-start-color
• border-block-end
• border-block-end-width
• border-block-end-style
• border-block-end-color
• border-inline-end
• border-inline-end-width
• border-inline-end-style
• border-inline-end-color

В следующем примере есть два блока, первый использует логические свойства для установки зеленого border-block-start-color границы и пунктирного border-inline-end-style . Второй блок использует физические свойства border-top-color и border-right . Измените режим записи, чтобы увидеть, как они себя ведут.

Поля и отступы

Поля и отступы имеют аналогичную форму нашим свойствам границ, а физические свойства таковы:

• margin-top
• margin-left
• margin-bottom
• margin-right
• padding-top
• padding-right
• padding-bottom
• padding-left

Они имеют следующие логические свойства:

• margin-block-start
• margin-inline-start
• margin-inline-start
• margin-inline-end
• padding-block-start
• padding-inline-start
• padding-inline-start
• padding-inline-end

В следующем примере я установил padding-block-start для первого блока и padding-top для второго, изменив режим записи, чтобы увидеть разницу при переключении осей Block и Inline.

Смещения позиционирования

Другое место, где используются физические свойства, — это позиционирование объектов с использованием свойства position . После установки position: absolute или другого значения position , отличного от static значения по умолчанию, мы можем позиционировать элемент, используя смещения, либо от окна просмотра, либо от родителя, который создал новый контекст позиционирования.

Физические свойства смещения:

• top
• right
• bottom
• left

Следуя шаблону других наших логических свойств, мы имеем:

• offset-block-start
• offset-inline-start
• offset-block-end
• offset-inline-end

Попробуйте это в примере ниже. Коробка с рамкой имеет position: relative , а маленький фиолетовый квадрат position: absolute . В физическом примере квадрат расположен top: 50px и right: 20px . Логическая версия имеет offset-block-start: 50px и offset-inline-end: 20px .

Логические значения

Еще одно место, где мы привыкли использовать физические измерения, — это когда мы плаваем или очищаем объекты. Для float , clear у нас есть несколько логических версий left и right значений.

• inline-start
• inline-end

В демо я плаваю фиолетовым блоком в логической версии inline-start . Я также использую логические свойства поля; это гарантирует, что поле всегда будет после блока и перед содержимым, которое окружает его. Выбрав значение vertical-rl в раскрывающемся списке, вы увидите, как в физическом примере поле заканчивается справа от блока, а не применяется в направлении -end .

Также есть start и end значения для text-align . Выравнивание чего-либо по началу выровняет его по началу встроенной оси, по end — по концу встроенной оси, независимо от того, является ли режим записи горизонтальным или вертикальным.

Использование логических свойств и значений сегодня

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

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

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

Дальнейшее чтение

• В веб-документах MDN есть все логические свойства и значения, перечисленные с дополнительными примерами.
• CSS Grid, логические значения и режимы записи, MDN
• Режимы написания CSS, Джен Симмонс, 24 способа