inset-inline-endon CSS-ominaisuus, joka asettaa pituuden, jonka elementti siirtyy alkusuuntaiseen suuntaan. Se on eräänlainen julistaminen right, koska se koskee sijoitettuja elementtejä ja siirtää elementin vasemmalle suunnalle, paitsi että sen alku- ja loppupisteet voivat muuttua elementin directionperusteella 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-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Niinpä esimerkiksi, jos kirjoitus on asetettu tilaan kiinteistön toimii aivan kuten asetus , kuittaaminen elementti vasemmasta reunasta. Sinun on jopa määritettävä nimenomainen samalle elementille, jotta se voi tulla voimaan, aivan kuten fyysiset offset-ominaisuudet.horizontal-lrinset-inline-endleftposition
Mutta vaihda elementin writing-modekaltaiseksi vertical-lrja “aloitusreuna” pyörii pystysuunnassa toimien enemmän kuin sen topsijaan.
Syntaksi
inset-inline-end: ;- Alkuarvo:
auto - Koskee: sijoitettuja elementtejä
- Peritty: ei
- Prosenttiosuudet: kuten vastaavan fyysisen omaisuuden kohdalla
- Laskettu arvo: sama kuin vastaava
leftominaisuus - Animaatiotyyppi: lasketun arvotyypin mukaan
Arvot
inset-blockvie pituusarvon ja tukee globaaleja avainsanoja. Sen oletusarvo on auto.
/* Length values */ inset-inline-end: 50px; inset-inline-end: 4em; inset-inline-end: 3.5rem inset-inline-end: 25vh; /* Percentage values */ inset-inline-end: 50%; /* Keyword values */ inset-inline-end: auto; /* initial value */ /* Global values */ inset-inline-end: initial inset-inline-end: inherit; inset-inline-end: 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)