inset-inline-startto właściwość CSS, która ustawia długość odsunięcia elementu w początkowym kierunku liniowym. Jest to coś w rodzaju oświadczając left, że ma ona zastosowanie do elementów pozycjonowanych i przesunięcia elementu w lewym kierunku, z wyjątkiem jego rozpoczęcia i zakończenia może zmieniła na podstawie 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-inline-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-inline-startwłaściwość, będzie działać tak samo, jak ustawienie left, odsunięcie elementu od lewej krawędzi. Musisz nawet określić jawnie positionten sam element, aby zadziałał, podobnie jak właściwości przesunięcia fizycznego.
Ale zmień element na writing-modecoś podobnego, vertical-lra krawędź „początkowa” zostanie obrócona w kierunku pionowym, zachowując się bardziej jak element top.
Składnia
inset-inline-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
leftwłaściwość - Typ animacji: według obliczonego typu wartości
Wartości
inset-blockprzyjmuje wartość długości i obsługuje globalne słowa kluczowe. Jego domyślną wartością jest auto.
/* Length values */ inset-inline-start: 50px; inset-inline-start: 4em; inset-inline-start: 3.5rem inset-inline-start: 25vh; /* Percentage values */ inset-inline-start: 50%; /* Keyword values */ inset-inline-start: auto; /* initial value */ /* Global values */ inset-inline-start: initial inset-inline-start: inherit; inset-inline-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)