Inzet-inline-einde - CSS-trucs

Inhoudsopgave:

Anonim

inset-inline-endis een CSS-eigenschap die de lengte instelt waarmee een element wordt verschoven in de beginnende inline-richting. Het ongeveer zoals verklaren rightdoordat zij van toepassing is gepositioneerd elementen en offsets een element in de linker richting met uitzondering van het begin- en eindpunt kan gewijzigd op basis van het element direction, text-orientationen writing-mode, net als andere logische eigenschappen.

De eigenschap maakt deel uit van de CSS Logical Properties and Values ​​Level 1-specificatie die momenteel de Editor's Draft-status heeft. Dat betekent dat de definitie en informatie erover kan veranderen tussen nu en officiële aanbeveling.

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

Als de schrijfmodus bijvoorbeeld is ingesteld op horizontal-lrde inset-inline-endeigenschap, werkt deze net als instellen left, waarbij een element wordt verschoven van de linkerrand. U moet zelfs een expliciet positionvoor hetzelfde element specificeren om het van kracht te laten worden, net als fysieke offset-eigenschappen.

Maar verander de elementen writing-modein iets dergelijks vertical-lren de "begin" -rand wordt in verticale richting geroteerd en gedraagt ​​zich in topplaats daarvan meer als het element .

Syntaxis

inset-inline-end: ;
  • Beginwaarde: auto
  • Geldt voor: gepositioneerde elementen
  • Overgenomen: nee
  • Percentages: zoals voor de bijbehorende fysieke eigenschap
  • Berekende waarde: hetzelfde als de bijbehorende lefteigenschap
  • Animatietype: op type berekende waarde

Waarden

inset-blockheeft een lengtewaarde en ondersteunt globale trefwoorden. De standaardwaarde is 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;

Browser-ondersteuning

D.W.Z Rand Firefox Chrome Safari Opera
Nee Nee 63+ Nee Nee Nee
Android Chrome Android Firefox Android-browser iOS Safari Opera Mini
Nee 79+ Nee Nee Nee
Bron: caniuse

Demo

Verder lezen

  • CSS logische eigenschappen en waarden Level 1 specificatie (Editor's Draft)
  • MDN-documentatie
  • Logische eigenschappen en waarden begrijpen (Smashing Magazine)
  • CSS logische eigenschappen (Adrian Roselli)
  • Bidirectionele horizontale regels in CSS (Hussein Al Hammad)