inset-block-starteste o proprietate logică CSS care setează lungimea pe care un element este decalat în direcția blocului de la marginea sa de pornire. Este un fel de declarare , cu topexcepția punctului său de pornire 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-start: 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 ea începe de margine, care este în partea de sus. 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-starttoppositiontop
Dar schimbați elementul writing-modecu ceva de genul, vertical-rliar marginea de pornire este rotită în direcția verticală, acționând mai mult ca leftproprietatea.
Sintaxă
inset-block-start: ;- Valoarea initiala:
auto - Se aplică: elementelor poziționate
- Moștenit: nu
- Procente: ca pentru proprietatea fizică corespunzătoare
- Valoare calculată: la fel ca
topproprietatea corespunzătoare - Tipul animației: după tipul valorii calculate
Valori
inset-block-startia o valoare de lungime și acceptă cuvinte cheie globale. Valoarea sa implicită este auto.
/* Length values */ inset-block-start: 50px; inset-block-start: 4em; inset-block-start: 3.5rem inset-block-start: 25vh; /* Percentage values */ inset-block-start: 50%; /* Keyword values */ inset-block-start: auto; /* initial value */ /* Global values */ inset-block-start: initial inset-block-start: inherit; inset-block-start: 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)