Vložený koniec do riadku - Triky CSS

Obsah:

Anonim

inset-inline-endje vlastnosť CSS, ktorá nastavuje dĺžku, ktorú má prvok posunutú v počiatočnom smere vloženia. Je to niečo ako vyhlásiť right, že sa vzťahuje na umiestnených prvkov a kompenzáciou prvok v ľavom smere, s výnimkou jej začatia a ukončenia body môžu zmeniť podľa prvok je direction, text-orientationa writing-moderovnako ako ostatné 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-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Napríklad, ak je režim zápisu nastavený na horizontal-lrtúto inset-inline-endvlastnosť, bude fungovať rovnako ako nastavenie left, čím posunie prvok od ľavé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 „začiatočná“ hrana sa otočí vo zvislom smere, takže bude pôsobiť viac ako topnaopak.

Syntax

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

Hodnoty

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

/* Length values */ inset-inline-end: 50px; inset-inline-end: 4em; inset-inline-end: 3.5rem inset-inline-end: 25vh; /* Percentage values */ inset-inline-end: 50%; /* Keyword values */ inset-inline-end: auto; /* initial value */ /* Global values */ inset-inline-end: initial inset-inline-end: inherit; inset-inline-end: 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)