inset-block-endeste o proprietate CSS logică care stabilește lungimea pe care un element este decalat în direcția blocului de la marginea sa finală. Este un fel de declarare cu bottomexcepția punctului său final este determinat 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-block-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 și a stabilit elementul de 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 și alte proprietăți fizice de compensare.horizontal-lrinset-block-endbottompositionbottom
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 rightproprietatea.
Sintaxă
inset-block-end: ;- Valoarea initiala:
auto - Se aplică: elementelor poziționate
- Moștenit: nu
- Procente: ca pentru proprietatea fizică corespunzătoare
- Valoare calculată: la fel ca
bottomproprietatea corespunzătoare - Tipul animației: după tipul valorii calculate
Valori
inset-block-endia o valoare de lungime și acceptă cuvinte cheie globale. Valoarea sa implicită este auto.
/* Length values */ inset-block-end: 50px; inset-block-end: 4em; inset-block-end: 3.5rem inset-block-end: 25vh; /* Percentage values */ inset-block-end: 50%; /* Keyword values */ inset-block-end: auto; /* initial value */ /* Global values */ inset-block-end: initial inset-block-end: inherit; inset-block-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)