Wstawka-blok - CSS-Tricks

Spisie treści:

Anonim

inset-blockto skrótowa logiczna właściwość CSS, która ustawia długość przesunięcia elementu w kierunku bloku, łącząc inset-block-starti inset-block-end. Jest to coś w rodzaju deklarowania topi bottompoza jej początkowego i końcowego punkty zależą od 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: 50px 15%; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Tak więc, na przykład, czy tryb nagrywania jest ustawiony horizontal-lrna inset-blocknieruchomości będzie działać podobnie jak ustawienie topi bottomi ustawić element na odsunięcie od dolnej 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 „dolna” krawędź jest obracana w kierunku pionowym, zachowując się bardziej jak właściwości lefti right.

Składnia

inset-block: ;
  • 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 topi bottomwłaściwości
  • 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-block: 50px; inset-block: 4em; inset-block: 3.5rem inset-block: 25vh; /* Percentage values */ inset-block: 50%; /* Keyword values */ inset-block: auto; /* initial value */ /* Global values */ inset-block: initial inset-block: inherit; inset-block: 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
Źródło: caniuse

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)