Vložené vložené - Triky CSS

Obsah:

Anonim

inset-inlineje skratková logická vlastnosť CSS, ktorá nastavuje dĺžku, ktorú má prvok posunutý v kombinovanom smere inset-inline-starta inset-inline-end. Je to niečo ako deklarácia righta leftokrem toho, že jeho počiatočné a koncové body sú určené prvkami prvku direction, text-orientationa writing-moderovnako ako ďalšie logické vlastnosti.

Táto vlastnosť je súčasťou špecifikácie úrovne 1 logických vlastností a hodnôt CSS, ktorá je momentálne v stave konceptu editora. To znamená, že definícia a informácie o nej sa môžu meniť medzi dnešným dňom a oficiálnym odporúčaním.

.element ( inset-inline: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Tak napríklad, ak je režim zápisu nastavený horizontal-lrna inset-inlinemajetku bude správať rovnako ako nastavenie topa bottoma nastavte element je odsadenie od spodného okraja. Pre positionrovnaký efekt musíte dokonca určiť explicitný výraz pre ten istý prvok, rovnako ako vlastnosti fyzického posunu.

Ale zmeňte element writing-modena niečo podobné vertical-lra „spodná“ hrana sa otočí vo vertikálnom smere, čím sa bude viac podobať vlastnostiam lefta right.

Syntax

inset-inline: ;
  • Pôvodná hodnota: auto
  • Platí pre: umiestnené prvky
  • Zdedené: č
  • Percentá: pokiaľ ide o zodpovedajúce fyzické vlastnosti
  • Vypočítaná hodnota: rovnaká ako zodpovedajúce topa leftvlastnosti
  • Typ animácie: podľa typu vypočítanej hodnoty

Hodnoty

inset-inlinemá dĺžku a podporuje globálne kľúčové slová. Jeho predvolená hodnota je auto.

/* Length values */ inset-inline: 50px; inset-inline: 4em; inset-inline: 3.5rem inset-inline: 25vh; /* Percentage values */ inset-inline: 50%; /* Keyword values */ inset-inline: auto; /* initial value */ /* Global values */ inset-inline: initial inset-inline: inherit; inset-inline: unset;

Podpora prehliadača

IE Hrana Firefox Chrome Safari Opera
Nie Nie 63+ Nie Nie Nie
Android Chrome Android Firefox Prehliadač Android iOS Safari Opera Mini
Nie 79+ Nie Nie Nie
Zdroj: caniuse

Ukážka

Ďalšie čítanie

  • Logické vlastnosti a hodnoty CSS úrovne 1 (návrh redaktora)
  • Dokumentácia MDN
  • Pochopenie logických vlastností a hodnôt (Smashing Magazine)
  • Logické vlastnosti CSS (Adrian Roselli)
  • Obojsmerné horizontálne pravidlá v CSS (Hussein Al Hammad)