Max-inline-size - CSS-хитрости | CSS Альманах 2024

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

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

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

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

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

Разве мы не можем просто использовать `max-width`собственность?

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

Синтаксис

max-inline-size: ;

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

Значения

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Демо

Если для параметра writing-modeустановлено значение vertical-rl, содержимое будет вращаться, меняя макет. Ширина max-widthполя будет вращаться вместе с содержимым. Но max-inline-sizeумно! Он оставляет свою ширину неизменной, независимо от writing-modeзначения. Включите переключатель writing-modeв следующей демонстрации, чтобы увидеть разницу между ними.