inset-block-endto logiczna właściwość CSS, która ustawia długość odsunięcia elementu w kierunku bloku od jego końcowej krawędzi. Jest to coś w rodzaju deklarując bottomwyjątkiem punktu końcowego zależy od tego elementu 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-end: 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-endwłaściwość, będzie działać tak samo bottomi ustawi odsunięcie elementu od dolnej krawędzi. Musisz nawet określić jawnie positionten sam element, aby zadziałał, tak jak bottomi inne fizyczne właściwości przesunięcia.
Ale zmień element na writing-modecoś podobnego, vertical-lra „dolna” krawędź zostanie obrócona w kierunku pionowym, zachowując się bardziej jak rightwłaściwość.
Składnia
inset-block-end: ;- 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
bottomwłaściwość - Typ animacji: według obliczonego typu wartości
Wartości
inset-block-endprzyjmuje wartość długości i obsługuje globalne słowa kluczowe. Jego domyślną wartością jest 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;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)