inline-sizeје логично својство које дефинише ширину елемента када је режим писања хоризонтални, или висину елемента када writing-modeје вертикално.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Као што сте могли да претпоставите из горњег примера, writing-modeсвојство мења оријентацију текста и тока изгледа за 90 степени. Два су главна разлога зашто бисте то желели да урадите.
Прво, као избор дизајна, можда ћете желети да прикажете вертикални текст на елементу, рецимо заглавље:
Други - и вероватно најважнији - разлог због којег бисте можда желели да користите логичко својство као што је инлине-сизе је прилагођавање интернационализацији на локацији. Многа источноазијска писма попут кинеске, јапанске и корејске могу се писати хоризонтално или вертикално. Користећи логичка својства, можемо да пружимо тачан смер величине елемената на основу корисничког начина писања.
Јен Симмонс има чланак и презентацију који улазе дубље у ЦСС начине писања.
Зашто једноставно не бисмо могли да користимо стару поуздану 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(): Ова функција омогућава да контејнер расте до жељене величине, а затим изврши умотавање текста, ефективно стежући садржај на предвиђену вредност величине. Може се користити на Грид контејнерима, као и димензијама кутија, и док каниус показује снажну подршку функцији са уграђеном величином, наше тестирање је било мање успешно. То би могло бити због статуса радног нацрта спецификације модула за димензионисање оквира нивоа 3.max-content: Унутарња жељена ширина, што значи да елемент протеже текст онолико дуго колико је могуће и учиниће да оквир буде дугачак као текст.min-content: Својствена минимална ширина, што значи да се оквир елемента смањује на минималну величину његовог садржаја. Поље ће бити величине највећег низа текста.
Демо
Подршка прегледача
| ИЕ | Ивица | Фирефок | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Не | 79+ | 41+ | 57 | 12.1+ | 44+ |
| Андроид Цхроме | Андроид Фирефок | Андроид претраживач | иОС Сафари | Опера Мобиле |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12.2+ | 59+ |
Имајте на уму да се подршка за коришћење следећих функција може разликовати од подршке својства:
fit-content()max-content()min-content()
Више информација
- Спецификација логичких својстава и вредности ЦСС нивоа 1 (Нацрт уредника)
- МДН документација
- ЦСС логичка својства` (ЦСС-трикови)
- Разумевање логичких својстава и вредности (Смасхинг Магазине)
- ЦСС логичка својства (Адриан Роселли)
- Минимална и максимална величина садржаја у ЦСС мрежи (Јен Симмонс, видео)
- Двосмерна хоризонтална правила у ЦСС-у (Хуссеин Ал Хаммад)