inset-inlineeste o proprietate CSS logică care stabilește lungimea pe care un element este decalat în direcția de combinare în linie inset-inline-startși inset-inline-end. Este un fel de declarare rightși cu leftexcepția de pornire și se termină puncte sunt determinate 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: 50px 15%; position: relative; /* Applies 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 și și setați elementul offset de la marginea de jos. 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-inlinetopbottomposition
Dar schimbați elementul writing-modecu ceva de genul vertical-lrși marginea „de jos” este rotită în direcția verticală, acționând mai mult ca leftși rightproprietățile și .
Sintaxă
inset-inline: ;- Valoarea initiala:
auto - Se aplică: elementelor poziționate
- Moștenit: nu
- Procente: ca pentru proprietatea fizică corespunzătoare
- Valoare calculată: identică cu cea corespunzătoare
topșileftproprietățile - Tipul animației: după tipul valorii calculate
Valori
inset-inlineia o valoare de lungime și acceptă cuvinte cheie globale. Valoarea sa implicită este 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;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)