inline-sizeeste o proprietate logică care definește lățimea unui element atunci când modul de scriere este orizontal sau înălțimea elementului atunci când writing-modeeste vertical.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Așa cum ați fi putut ghici prin exemplul de mai sus, writing-modeproprietatea modifică orientarea textului și a fluxului de aspect cu 90 de grade. Există două motive principale pentru care ați dori să faceți acest lucru.
În primul rând, ca alegere de proiectare, poate doriți să afișați text vertical pe un element, să spuneți un antet:
Al doilea - și probabil cel mai semnificativ - motiv pentru care ați putea dori să utilizați o proprietate logică precum dimensiunea inline este să găzduiți internaționalizarea pe un site. Multe scripturi din Asia de Est, precum chineză, japoneză și coreeană, pot fi scrise orizontal sau vertical. Folosind proprietăți logice, putem oferi direcția corectă de dimensionare a elementelor pe baza modului de scriere al utilizatorului.
Jen Simmons are un articol și o prezentare care merg mai adânc în modurile de scriere CSS.
De ce nu putem folosi doar widthproprietatea de încredere ?
Poti! Cu toate acestea, este posibil să doriți să ajungeți în inline-sizeschimb dacă sunteți îngrijorat de contextul în care conținutul dvs. se schimbă pe baza limbii unui utilizator. widtheste o dimensiune fizică, deci atunci când se schimbă modul de scriere, un element își păstrează dimensiunea lățimii orizontale, întrerupând un aspect atunci când este configurat să fie vertical. Proprietățile logice, cum ar fi inline-size, pot răspunde la aceste modificări și pot aplica lățimea în direcția corectă.
De exemplu, dacă un element de paragraf are o lățime de 400 px folosind lățimea, atunci când modul de scriere este setat la vertical-lr, conținutul se va roti, schimbând aspectul, dar acel paragraf va rămâne de 400 px lățime în loc de 400 px înalt.
Vezi asta? Ei bine, inline-sizeeste inteligent! Se schimbă de la lățime la înălțime, în funcție de writing-modevaloare.
Sintaxă
inline-size: - Iniţială:
auto - Se aplică: la fel ca
heightșiwidth - Moștenit: nu
- Procente: ca pentru proprietatea fizică corespunzătoare
- Valoare calculată: la fel ca
heightșiwidth - Tipul animației: după tipul valorii calculate
Valori
/* 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: Dimensiunea în linie a elementului va adera la dimensiunea elementului său părinte.fit-content(): Această funcție permite unui container să crească până la dimensiunea dorită, apoi faceți învelirea textului, fixând efectiv conținutul la valoarea de dimensiune furnizată. Poate fi folosit pe containere Grid, precum și pe dimensiunea cutiei și, deși caniuse arată un sprijin puternic pentru funcția cu dimensiunea în linie, testarea noastră a fost mai puțin concludentă. Acest lucru s-ar putea datora stării de schiță de lucru a specificațiilor nivelului 3 al modulului de dimensionare a cutiei.max-content: Lățimea preferată intrinsecă, adică elementul întinde textul cât mai mult posibil și va face ca caseta să fie la fel de lungă ca și textul.min-content: Lățimea minimă intrinsecă, adică caseta elementului se reduce la dimensiunea minimă a conținutului său. Caseta va avea dimensiunea celui mai mare șir de text.
Demo
Suport pentru browser
| IE | Margine | Firefox | Crom | Safari | Operă |
|---|---|---|---|---|---|
| Nu | Peste 79 de ani | 41+ | 57 | 12.1+ | 44+ |
| Android Chrome | Android Firefox | Browser Android | Safari iOS | Opera Mobile |
|---|---|---|---|---|
| Peste 85 de ani | Peste 79 de ani | Peste 81 de ani | 12.2+ | Peste 59 de ani |
Rețineți că suportul pentru utilizarea următoarelor funcții poate diferi de suportul proprietății:
fit-content()max-content()min-content()
Mai multe informatii
- Specificații de proprietăți și valori logice CSS Nivelul 1 (Proiectul editorului)
- Documentația MDN
- Proprietăți logice CSS` (CSS-Tricks)
- Înțelegerea proprietăților și valorilor logice (Smashing Magazine)
- Proprietăți logice CSS (Adrian Roselli)
- Dimensionarea conținutului Min & Max în grila CSS (Jen Simmons, video)
- Reguli orizontale bidirecționale în CSS (Hussein Al Hammad)