Vložený inline-start - Triky CSS

Obsah:

Anonim

inset-inline-startje vlastnost CSS, která nastavuje délku posunutí prvku ve směru počátečního řádku. Je to něco jako prohlásit left, že se vztahuje na umístěných prvků a kompenzací prvek v levém směru, s výjimkou jejího zahájení a ukončení body mohou změnit podle prvek je direction, text-orientationa writing-modestejně 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-inline-start: 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-lrna inset-inline-startmajetku bude chovat stejně jako nastavení left, vyrovnání prvku od levého okraje. Dokonce musíte zadat explicitní positionna stejném prvku, aby se projevil, stejně jako vlastnosti fyzického posunutí.

Ale změňte prvek writing-modena něco jako vertical-lra „počáteční“ hrana se otočí ve svislém směru a bude spíše působit jako topmísto.

Syntax

inset-inline-start: ;
  • 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í leftvlastnost
  • Typ animace: podle typu vypočítané hodnoty

Hodnoty

inset-blockmá hodnotu délky a podporuje globální klíčová slova. Jeho výchozí hodnota je 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;

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
Zdroj: caniuse

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)