inline-sizeon looginen ominaisuus, joka määrittää elementin leveyden, kun kirjoitustila on vaakasuora, tai elementin korkeuden, kun se writing-modeon pystysuora.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Kuten yllä olevasta esimerkistä saatat arvata, writing-modeominaisuus muuttaa tekstin suuntaa ja asetteluvirtaa 90 astetta. On kaksi pääasiallista syytä miksi haluat tehdä sen.
Ensin suunnitteluvaihtoehtona haluat ehkä näyttää pystytekstin elementillä, sanokaa otsikko:
Toinen - ja luultavasti merkittävin - syy, miksi haluat ehkä käyttää loogista ominaisuutta, kuten inline-size, on mukauttaa kansainvälistyminen sivustoon. Monet Itä-Aasian skriptit, kuten kiina, japani ja korea, voidaan kirjoittaa vaaka- tai pystysuunnassa. Loogisten ominaisuuksien avulla voimme tarjota elementtien oikean koon suunnan käyttäjän kirjoitustilan perusteella.
Jen Simmonsilla on artikkeli ja esitys, joka menee syvemmälle CSS-kirjoitustiloihin.
Miksi emme voi käyttää vain luotettavaa widthomaisuutta?
Sinä pystyt! Saatat kuitenkin haluta tavoittaa inline-sizesen, jos olet huolissasi siitä, että sisältösi konteksti muuttuu käyttäjän kielen perusteella. widthon fyysinen ulottuvuus, joten kun kirjoitustila muuttuu, elementti pitää vaakasuoran leveytensä ja rikkoo asettelun pystysuunnassa. Loogiset ominaisuudet, kuten inline-size, voivat vastata näihin muutoksiin ja soveltaa leveyttä oikeaan suuntaan.
Esimerkiksi, jos kappaleelementin leveys on 400 kuvapistettä, kun kirjoitustila on asetettu vertical-lr, sisältö kiertää muuttamalla asettelua, mutta kyseinen kappale pysyy 400 kuvapisteen leveänä 400 kuvapisteen sijaan.
Näetkö tuon? No, inline-sizeon fiksu! Se muuttuu leveydestä korkeuteen writing-modearvon mukaan.
Syntaksi
inline-size: - Varhainen:
auto - Koskee seuraavia: sama kuin
heightjawidth - Peritty: ei
- Prosenttiosuudet: kuten vastaavan fyysisen omaisuuden kohdalla
- Laskettu arvo: sama kuin
heightjawidth - Animaatiotyyppi: lasketun arvotyypin mukaan
Arvot
/* 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: Elementin sisäinen koko noudattaa sen pääelementin kokoa.fit-content(): Tämän toiminnon avulla säiliö voi kasvaa haluttuun kokoon saakka, tee sitten teksti käärimään ja kiinnittää sisältö tehokkaasti annettuun kokoarvoon. Sitä voidaan käyttää Grid-säiliöissä sekä laatikoiden mitoituksessa, ja vaikka caniuse osoittaa voimakasta tukea toiminnolle inline-koon kanssa, testauksemme eivät olleet yhtä vakuuttavia. Tämä voi johtua laatikon koon moduulin tason 3 teknisen työn luonnoksen tilasta.max-content: Sisäinen ensisijainen leveys, eli elementti venyttää tekstiä niin pitkälle kuin mahdollista ja tekee laatikosta yhtä pitkän kuin teksti.min-content: Sisäinen vähimmäisleveys, eli elementin laatikko pienenee sen sisällön minimikokoon. Laatikko on suurimman tekstimerkkijonon koko.
Demo
Selaimen tuki
| IE | Reuna | Firefox | Kromi | Safari | Ooppera |
|---|---|---|---|---|---|
| Ei | 79+ | 41+ | 57 | 12.1+ | 44+ |
| Android Chrome | Android Firefox | Android-selain | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12.2+ | 59+ |
Huomaa, että seuraavien toimintojen tuki voi poiketa ominaisuuden tuesta:
fit-content()max-content()min-content()
Lisää tietoa
- CSS: n loogisten ominaisuuksien ja arvojen tason 1 määrittely (toimittajan luonnos)
- MDN-dokumentaatio
- CSS-loogiset ominaisuudet (CSS-temput)
- Loogisten ominaisuuksien ja arvojen ymmärtäminen (Smashing Magazine)
- CSS: n loogiset ominaisuudet (Adrian Roselli)
- Minimi- ja maksimisisällön mitoitus CSS-ruudukossa (Jen Simmons, video)
- Kaksisuuntaiset horisontaaliset säännöt CSS: ssä (Hussein Al Hammad)