Inzetblok - CSS-trucs

Inhoudsopgave:

Anonim

inset-blockis een steno logische CSS-eigenschap die de lengte instelt waarmee een element wordt verschoven in de blokrichting door inset-block-starten te combineren inset-block-end. Het is een beetje zoals declareren topen bottombehalve 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-block: 50px 15%; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Dus als de schrijfmodus bijvoorbeeld is ingesteld op horizontal-lrde inset-blockeigenschap, 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-block: ;
  • Beginwaarde: auto
  • Geldt voor: gepositioneerde elementen
  • Overgenomen: nee
  • Percentages: zoals voor de bijbehorende fysieke eigenschap
  • Berekende waarde: hetzelfde als corresponderend topen bottomeigenschappen
  • Animatietype: op type berekende waarde

Waarden

inset-blockheeft een lengtewaarde en ondersteunt globale trefwoorden. De standaardwaarde is auto.

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