inline-sizeon loogiline omadus, mis määrab elemendi laiuse, kui kirjutusrežiim on horisontaalne, või elemendi kõrguse, kui writing-modevertikaalne.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Nagu võite arvata ülaltoodud näite põhjal, muudab writing-modeatribuut teksti suuna ja paigutuse voogu 90 kraadi võrra. On kaks peamist põhjust, miks soovite seda teha.
Esiteks võiksite kujundusvalikuna kuvada elemendile vertikaalse teksti, öelge päis:
Teine ja tõenäoliselt kõige olulisem põhjus, miks võiksite kasutada loogilist atribuuti, nagu sisemine suurus, on saidile rahvusvahelistumise kohandamine. Paljusid Ida-Aasia skripte, näiteks hiina, jaapani ja korea keelt, saab kirjutada horisontaalselt või vertikaalselt. Kasutades loogilisi omadusi, saame kasutaja kirjutamisrežiimi põhjal pakkuda elementide õige suuruse suuna.
Jen Simmonsil on artikkel ja esitlus, mis lähevad sügavamale CSS-i kirjutamisrežiimidesse.
Miks ei saa me lihtsalt kasutada usaldusväärset widthvara?
Sa saad! Kui soovite inline-sizemuretseda oma sisu konteksti muutmise pärast kasutaja keelt , võite selle asemel siiski jõuda . widthon füüsiline mõõde, nii et kui kirjutamisrežiim muutub, hoiab element horisontaalse laiuse suurust, purustades paigutuse vertikaalseks seadistamisel. Nagu loogilised omadused, inline-sizevõivad need muutused reageerida ja laiust õiges suunas rakendada.
Näiteks kui lõiguelemendi laius on 400 pikslit lai, siis kui kirjutamisrežiim on seatud vertical-lr, siis sisu pöörleb, muutes paigutust, kuid see lõik jääb 400px laiuse asemel 400px laiuseks.
Näete seda? Noh, inline-sizeon tark! See muutub laiusest kõrguseks, sõltuvalt writing-modeväärtusest.
Süntaks
inline-size: - Esialgne:
auto - Kehtib: sama mis
heightjawidth - Päritud: ei
- Protsendid: nagu ka vastava füüsilise omaduse osas
- Arvutatud väärtus: sama mis
heightjawidth - Animatsiooni tüüp: arvutatud väärtuse tüübi järgi
Väärtused
/* 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: Elemendi sisemine suurus järgib selle vanema elemendi suurust.fit-content(): See funktsioon võimaldab konteineril kasvada soovitud suuruseks, seejärel pane tekst mähkima, kinnitades sisu tõhusalt ettenähtud suuruse väärtuseni. Seda saab kasutada nii ruudustikukonteinerites kui ka kastide suuruse määramisel ja kuigi caniuse näitab funktsiooni tugevat toetust in-size suurusega, oli meie testimine vähem lõplik. Selle põhjuseks võib olla kasti suuruse mooduli 3. taseme spetsifikatsiooni tööprojekti olek.max-content: Sisemine eelistatud laius, mis tähendab, et element venitab teksti nii kauaks kui võimalik ja muudab kasti sama pikaks kui tekst.min-content: Sisemine minimaalne laius, see tähendab, et elemendi kast vähendab selle sisu minimaalset suurust. Kast on suurima tekstistringi suurus.
Demo
Brauseri tugi
| IE | Edge | Firefox | Chrome | Safari | Ooper |
|---|---|---|---|---|---|
| Ei | 79+ | 41+ | 57 | 12,1+ | 44+ |
| Android Chrome | Android Firefox | Androidi brauser | iOS-i Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12,2+ | 59+ |
Pange tähele, et järgmiste funktsioonide kasutamise tugi võib atribuudi toest erineda:
fit-content()max-content()min-content()
Rohkem informatsiooni
- CSS-i loogiliste omaduste ja väärtuste 1. taseme spetsifikatsioon (redaktori mustand)
- MDN dokumentatsioon
- CSS-i loogilised atribuudid (CSS-trikid)
- Loogiliste omaduste ja väärtuste mõistmine (ajakiri Smashing)
- CSS-i loogilised omadused (Adrian Roselli)
- Minimaalne ja maksimaalne sisu suurus CSS-võrgus (Jen Simmons, video)
- Kahesuunalised horisontaalreeglid CSS-is (Hussein Al Hammad)