inset-block-end
je logická vlastnost CSS, která nastavuje délku posunutí prvku ve směru bloku od jeho koncové hrany. Je to něco jako deklarace bottom
kromě toho, že jeho koncový bod je určen elementem direction
, text-orientation
a writing-mode
, stejně jako ostatní logické vlastnosti.
Tato vlastnost je součástí specifikace CSS Logical Properties and Values úrovně 1, která je aktuálně ve stavu konceptu editora. To znamená, že definice a informace o ní se mohou změnit mezi dnešním dnem a oficiálním doporučením.
.element ( inset-block-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )
Tak například, pokud je režim zápisu nastaven horizontal-lr
na inset-block-end
majetku bude chovat stejně jako bottom
a nastavte element je odsazení od spodního okraje. Dokonce musíte zadat explicitní position
na stejném prvku, aby se projevil, stejně jako bottom
a další vlastnosti fyzického posunu.
Ale změňte prvky writing-mode
na něco jako vertical-lr
a „spodní“ hrana se otočí ve svislém směru a bude se chovat spíše jako right
vlastnost.
Syntax
inset-block-end: ;
- Počáteční hodnota:
auto
- Platí pro: umístěné prvky
- Zděděno: ne
- Procenta: pokud jde o odpovídající fyzickou vlastnost
- Vypočítaná hodnota: stejná jako odpovídající
bottom
vlastnost - Typ animace: podle typu vypočítané hodnoty
Hodnoty
inset-block-end
má hodnotu délky a podporuje globální klíčová slova. Jeho výchozí hodnota je 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;
Podpora prohlížeče
TJ | Okraj | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
Ne | Ne | 63+ | Ne | Ne | Ne |
Android Chrome | Android Firefox | Prohlížeč Android | iOS Safari | Opera Mini |
---|---|---|---|---|
Ne | 79+ | Ne | Ne | Ne |
Ukázka
Další čtení
- Specifikace logických vlastností a hodnot CSS úrovně 1 (koncept editora)
- Dokumentace MDN
- Porozumění logickým vlastnostem a hodnotám (Smashing Magazine)
- Logické vlastnosti CSS (Adrian Roselli)
- Obousměrná horizontální pravidla v CSS (Hussein Al Hammad)