inset-inline-endeste o proprietate CSS care setează lungimea pe care un element este decalat în direcția inițială inițială. Este un fel de declarare rightîn care se aplică elemente și compensările poziționate un element în direcția stânga, cu excepția de pornire și cel final se pot schimba în funcție de elementul anilor direction, text-orientationși writing-mode, la fel ca și alte proprietăți logice.
Proprietatea face parte din specificația CSS Logical Properties and Values Level 1, care se află în prezent în starea Editor's Draft. Asta înseamnă că definiția și informațiile despre aceasta se pot schimba de acum până la recomandarea oficială.
.element ( inset-inline-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Deci, de exemplu, în cazul în care modul de scriere este setat la proprietatea va acționa la fel ca setare , compensând un element de la marginea din stânga. Trebuie chiar să specificați un explicit pe același element pentru ca acesta să aibă efect, la fel ca proprietățile fizice de compensare.horizontal-lrinset-inline-endleftposition
Însă schimbați elementul writing-modecu ceva de genul, vertical-lriar marginea „de pornire” este rotită în direcția verticală, acționând mai degrabă ca în topschimb.
Sintaxă
inset-inline-end: ;- Valoarea initiala:
auto - Se aplică: elementelor poziționate
- Moștenit: nu
- Procente: ca pentru proprietatea fizică corespunzătoare
- Valoare calculată: la fel ca
leftproprietatea corespunzătoare - Tipul animației: după tipul valorii calculate
Valori
inset-blockia o valoare de lungime și acceptă cuvinte cheie globale. Valoarea sa implicită este 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;Suport pentru browser
| IE | Margine | Firefox | Crom | Safari | Operă |
|---|---|---|---|---|---|
| Nu | Nu | Peste 63 de ani | Nu | Nu | Nu |
| Android Chrome | Android Firefox | Browser Android | Safari iOS | Opera mini |
|---|---|---|---|---|
| Nu | Peste 79 de ani | Nu | Nu | Nu |
Demo
Lecturi suplimentare
- Specificații de proprietăți și valori logice CSS Nivelul 1 (Proiectul editorului)
- Documentația MDN
- Înțelegerea proprietăților și valorilor logice (Smashing Magazine)
- Proprietăți logice CSS (Adrian Roselli)
- Reguli orizontale bidirecționale în CSS (Hussein Al Hammad)