inline-sizeе логическо свойство, което определя ширината на елемент, когато режимът на запис е хоризонтален, или височината на елемента, когато writing-modeе вертикален.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Както може би се досещате от примера по-горе, writing-modeсвойството променя ориентацията на текста и оформлението с 90 градуса. Има две основни причини, поради които бихте искали да направите това.
Първо, като избор на дизайн, може да искате да покажете вертикален текст върху елемент, да речем заглавка:
Втората - и може би най-съществената причина, поради която може да искате да използвате логическо свойство като вграден размер, е да се приспособите към интернационализация на даден сайт. Много източноазиатски писмености като китайски, японски и корейски могат да бъдат написани хоризонтално или вертикално. Използвайки логически свойства, можем да осигурим правилната посока на оразмеряване на елементи въз основа на режима на писане от потребителя.
Джен Симънс има статия и презентация, които навлизат по-дълбоко в режимите на писане на CSS.
Защо не можем просто да използваме „истинския надежден widthимот“?
Можеш! Вместо това може да искате да inline-sizeпосегнете, ако сте загрижени за контекста на промяната на вашето съдържание въз основа на езика на потребителя. widthе физическо измерение, така че когато режимът на запис се промени, елемент запазва хоризонталния си размер на ширината, нарушавайки оформлението, когато е настроен да бъде вертикален. Логическите свойства, като например inline-size, могат да реагират на тези промени и да прилагат ширината в правилната посока.
Например, ако елементът на абзаца е широк 400px, като се използва ширина, когато режимът на писане е зададен на vertical-lr, съдържанието ще се завърти, променяйки оформлението, но този параграф ще остане 400px широк, вместо 400px висок.
Виж това? Е, това 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 мрежа (Джен Симънс, видео)
- Двупосочни хоризонтални правила в CSS (Хюсеин Ал Хамад)