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 | Край | Firefox | Chrome | Сафарі | Опера |
|---|---|---|---|---|---|
| Ні | 79+ | 41+ | 57 | 12,1+ | 44+ |
| Android Chrome | Android Firefox | Браузер Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12,2+ | 59+ |
Зверніть увагу, що підтримка використання наступних функцій може відрізнятися від підтримки властивості:
fit-content()max-content()min-content()
Більше інформації
- Специфікація логічних властивостей та значень CSS рівня 1 (проект редактора)
- Документація MDN
- Логічні властивості CSS (CSS-хитрощі)
- Розуміння логічних властивостей та цінностей (Smashing Magazine)
- Логічні властивості CSS (Адріан Розеллі)
- Мінімальний і максимальний розмір вмісту в CSS Grid (Джен Сіммонс, відео)
- Двонаправлені горизонтальні правила в CSS (Хуссейн Аль Хаммад)