inset-inlineon lyhytlooginen looginen CSS-ominaisuus, joka asettaa pituuden, jonka elementti siirtyy inline-suuntaan yhdistämällä inset-inline-startja inset-inline-end. Se on eräänlainen julistaminen, rightja leftpaitsi että sen alkupisteet ja loppupisteet määräytyvät elementin direction, text-orientationja writing-modeaivan kuten muutkin loogiset ominaisuudet.
Ominaisuus on osa CSS: n loogisten ominaisuuksien ja arvojen tason 1 määritystä, joka on tällä hetkellä Editorin luonnos -tilassa. Tämä tarkoittaa, että sen määritelmä ja tiedot voivat muuttua nykyisen ja virallisen suosituksen välillä.
.element ( inset-inline: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Niinpä esimerkiksi, jos kirjoitus on asetettu tilaan kiinteistön toimii aivan kuten asettaminen ja ja aseta elementin siirtymän alareunasta. Sinun on jopa määritettävä nimenomainen samalle elementille, jotta se voi tulla voimaan, aivan kuten fyysiset offset-ominaisuudet.horizontal-lrinset-inlinetopbottomposition
Mutta vaihda elementin writing-modekaltaiseksi vertical-lrja "alareuna" kiertyy pystysuunnassa, joka toimii enemmän kuin leftja right.
Syntaksi
inset-inline: ;- Alkuarvo:
auto - Koskee: sijoitettuja elementtejä
- Peritty: ei
- Prosenttiosuudet: kuten vastaavan fyysisen omaisuuden kohdalla
- Laskettu arvo: sama kuin vastaava
topjaleftominaisuudet - Animaatiotyyppi: lasketun arvotyypin mukaan
Arvot
inset-inlinevie pituusarvon ja tukee globaaleja avainsanoja. Sen oletusarvo on auto.
/* Length values */ inset-inline: 50px; inset-inline: 4em; inset-inline: 3.5rem inset-inline: 25vh; /* Percentage values */ inset-inline: 50%; /* Keyword values */ inset-inline: auto; /* initial value */ /* Global values */ inset-inline: initial inset-inline: inherit; inset-inline: unset;Selaimen tuki
| IE | Reuna | Firefox | Kromi | Safari | Ooppera |
|---|---|---|---|---|---|
| Ei | Ei | 63+ | Ei | Ei | Ei |
| Android Chrome | Android Firefox | Android-selain | iOS Safari | ooppera Mini |
|---|---|---|---|---|
| Ei | 79+ | Ei | Ei | Ei |
Demo
Lisälukemista
- CSS: n loogisten ominaisuuksien ja arvojen tason 1 määrittely (toimittajan luonnos)
- MDN-dokumentaatio
- Loogisten ominaisuuksien ja arvojen ymmärtäminen (Smashing Magazine)
- CSS: n loogiset ominaisuudet (Adrian Roselli)
- Kaksisuuntaiset horisontaaliset säännöt CSS: ssä (Hussein Al Hammad)