inset-block-startjest logiczną właściwością CSS, która określa długość odsunięcia elementu w kierunku bloku od jego krawędzi początkowej. Jest to coś w rodzaju deklarując toppoza jej punktem wyjścia jest określana przez element użytkownika direction, text-orientationi writing-mode, podobnie jak inne właściwości logicznych.
Właściwość jest częścią specyfikacji CSS Logical Properties and Values Level 1, która obecnie znajduje się w statusie Editor's Draft. Oznacza to, że definicja i informacje na jego temat mogą ulec zmianie od chwili obecnej do oficjalnych zaleceń.
.element ( inset-block-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Na przykład, jeśli tryb pisania jest ustawiony horizontal-lrna inset-block-startwłaściwość, będzie zachowywał się tak samo topi ustawi przesunięcie elementu od jego krawędzi początkowej, która jest górą. Musisz nawet określić jawnie positionten sam element, aby zadziałał, tak jak topi inne fizyczne właściwości przesunięcia.
Ale zmień element na writing-modecoś podobnego, vertical-rla krawędź początkowa zostanie obrócona w kierunku pionowym, działając bardziej jak leftwłaściwość.
Składnia
inset-block-start: ;- Wartość początkowa:
auto - Dotyczy: elementów pozycjonowanych
- Odziedziczone: nie
- Procenty: jak dla odpowiedniej własności fizycznej
- Wartość obliczona: taka sama jak odpowiadająca
topwłaściwość - Typ animacji: według obliczonego typu wartości
Wartości
inset-block-startprzyjmuje wartość długości i obsługuje globalne słowa kluczowe. Jego domyślną wartością jest 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;Wsparcie przeglądarki
| TO ZNACZY | Brzeg | Firefox | Chrom | Safari | Opera |
|---|---|---|---|---|---|
| Nie | Nie | 63+ | Nie | Nie | Nie |
| Android Chrome | Android Firefox | Przeglądarka Android | iOS Safari | Opera Mini |
|---|---|---|---|---|
| Nie | 79+ | Nie | Nie | Nie |
Próbny
Dalsza lektura
- Specyfikacja logicznych właściwości i wartości CSS na poziomie 1 (wersja robocza redakcji)
- Dokumentacja MDN
- Zrozumienie właściwości i wartości logicznych (magazyn Smashing)
- Właściwości logiczne CSS (Adrian Roselli)
- Dwukierunkowe reguły poziome w CSS (Hussein Al Hammad)