Max-inline-size - CSS-trikovi

max-inline-sizeje logično svojstvo u CSS-u koje definira maksimalnu širinu elementa kada writing-modeje vodoravno ili maksimalnu visinu elementa kada writing-modeje okomita.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Kao što ste mogli pretpostaviti iz gornjeg primjera, writing-modesvojstvo mijenja orijentaciju teksta i toka izgleda za 90 stupnjeva.

Glavni razlog promjene orijentacije, osim stvaranja otmjenih dizajna, jest prilagodba internacionalizacije na web mjestu. Mnoga istočnoazijska pisma poput kineske, japanske i korejske mogu se pisati vodoravno ili okomito. Korištenjem logičkih svojstava možemo pružiti točan smjer veličine elemenata na temelju načina pisanja korisnika.

Jen Simmons ima članak i prezentaciju koji dublje ulaze u CSS načine pisanja.

Ne možemo li jednostavno koristiti `max-width`imanje?

Da! Ali ako ne podržavate Internet Explorer, nema razloga da ga ne upotrebljavate max-inline-size. max-widthje fizička dimenzija, pa kada se način pisanja promijeni, element zadržava svoju vodoravnu veličinu širine, lomeći raspored kada je postavljen da bude okomit. Logična svojstva, poput toga max-inline-size, mogu odgovoriti na te promjene i primijeniti veličinu u pravilnoj orijentaciji.

Sintaksa

max-inline-size: ;

Inicijal: auto
Odnosi se na: isto kao heightiwidth
Naslijeđeno: ne
Procenti: kao za odgovarajuće fizičko svojstvo
Izračunata vrijednost: isto kao heightiwidth
Vrsta animacije: prema izračunatoj vrsti vrijednosti

Vrijednosti

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Demo

Kad writing-modeje postavljeno na vertical-rl, sadržaj će se rotirati, mijenjajući izgled. Širina max-widthokvira rotirat će se sa sadržajem. Ali max-inline-sizeje pametno! Širinu ostavlja u taktu, bez obzira na writing-modevrijednost. Uključite writing-modeu sljedeći demo da biste vidjeli razliku između njih dvoje.