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

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

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

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

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

Первый мой вопрос (и многих других среди моей аудитории) был «почему не Top, Right, Bottom, Left, как мы уже привыкли в CSS?». На самом деле, они идут в обратном порядке тем значениям: Top, Left, Bottom, Right! CSS Working Group активно пытается все усложнить?

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

То есть если мы изменим режим письма документа на вертикальный, положение блока останется относительно режима письма документа, а не физических свойств экрана. Можете проверить в примере ниже, переключите значение writing-mode для макета, сетка должна повернуться.

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

Если использовать длинные свойства, запись превратится в:

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

Блоковые и инлайн измерения

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

Блоковое измерение соответствует порядку раскладки блоков на странице. Возьмем параграф текста на английском. Каждый параграф располагается друг под другом, они раскладываются в блоковом измерении. Так же и в Grid Layout. Это блоковые оси.

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

Поэтому инлайн оси пересекает блоковую ось в том направлении, в котором слова раскладываются в предложении. В английском эта ось идет слева направо. В Grid Layout инлайн ось – это колоночная ось со свойствами grid-column-start и grid-column-end.

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

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

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

Как только вы привыкните к работе с блоковыми и инлайн измерениями, стартовыми и конечными линиями, связь с физическими измерениями в остальном CSS будет казаться чем-то странным. Тем не менее, есть спецификация, которая определяет логические версии всех существующих физических свойств — CSS Logical Properties and Values, находится в статусе First Public Working Draft. Сейчас только Firefox хорошо поддерживает эти свойства. Однако понимание принципов их работы – это хороший способ подумать о новом CSS. Давайте разбираться.

Я проиллюстрировала каждый раздел CodePen примерами. Для их просмотра вам понадобится Firefox!

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

Логические свойства определяют стартовое и конечное свойство для блокового и инлайн измерения. Для свойств высоты и ширины используем 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 – height.

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

Логические рамки

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

У них есть логические версии, которые стали немного длиннее:

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

Margin и padding

У margin и padding есть схожие длинные версии, как у свойств рамок. Физические свойства:

У них есть логические свойства:

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

Позиционирование сдвигов

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

Физические свойства сдвигов:

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

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

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

Мы привыкли использовать физические измерения с float и clear. Для float и clear есть логические версии значений left и right.

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

Для text-align есть значения start и end. Значение start выравнивает контент к началу инлайн оси, а end – к концу инлайн оси, независимо от режима письма (вертикальный или горизонтальный).

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

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

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

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

Автор: Rachel Andrew

Источник: //www.smashingmagazine.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: