inset-inline-end
on CSS-i omadus, mis määrab elemendi pikkuse nihke algussuunalises suunas. See on umbes nagu deklareerimine right
, kuna see kehtib paigutatud elementide kohta ja nihutab elementi vasakul suunal, välja arvatud see, et selle algus- ja lõpp-punkti saab muuta elemendi direction
põhjal text-orientation
ja writing-mode
nagu ka teisi loogilisi omadusi.
Atribuut on osa CSS-i loogiliste omaduste ja väärtuste 1. taseme spetsifikatsioonist, mis on praegu redaktori mustandi olekus. See tähendab, et selle määratlus ja teave selle ja ametliku soovituse vahel võivad muutuda.
.element ( inset-inline-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )
Nii näiteks, kui kirjalikult režiim on seatud vara toimib nagu seade , tasaarvestuse element vasakust servast. Selle jõustumiseks peate isegi sama elemendi jaoks täpsustama , nagu füüsilised nihkeomadused.horizontal-lr
inset-inline-end
left
position
Kuid muutke elemendi writing-mode
väärtuseks midagi sellist vertical-lr
ja algusserva pööratakse vertikaalselt, toimides pigem selle top
asemel.
Süntaks
inset-inline-end: ;
- Algne väärtus:
auto
- Kehtib: paigutatud elementide kohta
- Päritud: ei
- Protsendid: nagu ka vastava füüsilise omaduse osas
- Arvutatud väärtus: sama mis vastaval
left
atribuudil - Animatsiooni tüüp: arvutatud väärtuse tüübi järgi
Väärtused
inset-block
võtab pikkuse väärtuse ja toetab globaalseid märksõnu. Selle vaikeväärtus 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;
Brauseri tugi
IE | Edge | Firefox | Chrome | Safari | Ooper |
---|---|---|---|---|---|
Ei | Ei | 63+ | Ei | Ei | Ei |
Android Chrome | Android Firefox | Androidi brauser | iOS-i Safari | Opera Mini |
---|---|---|---|---|
Ei | 79+ | Ei | Ei | Ei |
Demo
Lisalugemist
- CSS-i loogiliste omaduste ja väärtuste 1. taseme spetsifikatsioon (redaktori mustand)
- MDN dokumentatsioon
- Loogiliste omaduste ja väärtuste mõistmine (ajakiri Smashing)
- CSS-i loogilised omadused (Adrian Roselli)
- Kahesuunalised horisontaalreeglid CSS-is (Hussein Al Hammad)