Встроенный размер - CSS-хитрости

Anonim

inline-size- логическое свойство, определяющее ширину элемента, когда режим письма горизонтальный, или высоту элемента, когда writing-modeон вертикальный.

.element ( inline-size: 700px; writing-mode: vertical-lr; )

Как вы могли догадаться по приведенному выше примеру, writing-modeсвойство изменяет ориентацию текста и макета на 90 градусов. Есть две основные причины, по которым вы захотите это сделать.

Во-первых, в качестве варианта дизайна вы можете отобразить вертикальный текст на элементе, например в заголовке:

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

У Джен Симмонс есть статья и презентация, в которых подробно рассматриваются режимы написания CSS.

Почему мы не можем просто использовать эту надежную widthсобственность?

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

Например, если элемент абзаца имеет ширину 400 пикселей при использовании ширины, при установке режима письма vertical-lrсодержимое будет вращаться, изменяя макет, но этот абзац останется шириной 400 пикселей вместо 400 пикселей в высоту.

Видеть, что? Что ж, inline-sizeшустро! Он меняется от ширины к высоте в зависимости от writing-modeзначения.

Синтаксис

inline-size:
  • Исходный: auto
  • Применимо к: так же, как heightиwidth
  • Унаследовано: нет
  • Проценты: по соответствующему физическому объекту
  • Вычисленное значение: то же, что heightиwidth
  • Тип анимации: по типу вычисляемого значения

Значения

/* Length values */ inline-size: 250px; inline-size: 5rem; 
 /* Percentage values */ inline-size: 75%; 
 /* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content; 
 /* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset;
  • auto: Встроенный размер элемента будет соответствовать размеру его родительского элемента.
  • fit-content(): Эта функция позволяет контейнеру увеличиваться до желаемого размера, а затем выполнять обтекание текстом, эффективно ограничивая содержимое предоставленным значением размера. Его можно использовать для контейнеров Grid, а также для определения размеров ящиков, и, хотя caniuse демонстрирует сильную поддержку функции со встроенным размером, наше тестирование было менее убедительным. Это может быть связано со статусом рабочего проекта спецификации модуля калибровки ящиков уровня 3.
  • max-content: Внутренняя предпочтительная ширина, означающая, что элемент растягивает текст до тех пор, пока это возможно, и заставит поле быть таким же длинным, как и текст.
  • min-content: Внутренняя минимальная ширина, означающая, что поле элемента уменьшается до минимального размера его содержимого. Поле будет размером с самую большую строку текста.

Демо

Поддержка браузера

IE Край Fire Fox Хром Сафари Опера
Нет 79+ 41+ 57 12.1+ 44+
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
85+ 79+ 81+ 12.2+ 59+
Источник: caniuse

Обратите внимание, что поддержка использования следующих функций может отличаться от поддержки свойства:

  • fit-content()
  • max-content()
  • min-content()

Дополнительная информация

  • Спецификация логических свойств и значений CSS уровня 1 (проект редакции)
  • Документация MDN
  • Логические свойства CSS` (CSS-Tricks)
  • Понимание логических свойств и значений (Smashing Magazine)
  • Логические свойства CSS (Адриан Роселли)
  • Минимальный и максимальный размер содержимого в CSS Grid (Джен Симмонс, видео)
  • Двунаправленные горизонтальные правила в CSS (Хусейн Аль Хаммад)