Inzet-inline - CSS-trucs

Inhoudsopgave:

Anonim

inset-inlineis een verkorte logische CSS eigenschap dat de reeksen de lengte die een element wordt verschoven in de richting inline combineren inset-inline-starten inset-inline-end. Het is een beetje zoals declareren righten leftbehalve dat het begin- en eindpunt wordt bepaald door de elementen 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: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Dus als de schrijfmodus bijvoorbeeld is ingesteld op horizontal-lrde inset-inlineeigenschap, werkt deze net als het instellen van topen bottomen wordt de offset van het element vanaf de onderrand ingesteld. 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 "onderste" rand wordt in verticale richting gedraaid, meer als de leften righteigenschappen.

Syntaxis

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

Waarden

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

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)