Infälld-block - CSS-tricks

Innehållsförteckning:

Anonim

inset-blockär en kortfattad logisk CSS-egenskap som anger längden som ett element förskjuts i blockriktningen genom att kombinera inset-block-startoch inset-block-end. Det är ungefär som att deklarera topoch bottomförutom att dess start- och slutpunkter bestäms av elementets direction, text-orientationoch writing-modeprecis som andra logiska egenskaper.

Egenskapen är en del av CSS Logical Properties and Values ​​Level 1-specifikationen som för närvarande är i Editors utkaststatus. Det betyder att definitionen och informationen om den kan ändras mellan nu och officiell rekommendation.

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

Så till exempel om skrivläget är inställt på horizontal-lrden inset-blockegenskapen kommer att fungera precis som inställning topoch bottomoch ställ in elementets förskjuten från den nedre kanten. Du måste till och med ange ett uttryck positionför samma element för att det ska träda i kraft, precis som fysiska offsetegenskaper.

Men ändrar elementets writing-modeatt något liknande vertical-lroch ”botten” kant roteras i vertikal riktning, i egenskap av mer som leftoch rightegenskaper.

Syntax

inset-block: ;
  • Ursprungligt värde: auto
  • Gäller för: placerade element
  • Ärvt: nej
  • Procentandelar: för motsvarande fysiska egendom
  • Beräknat värde: samma som motsvarande topoch bottomegenskaper
  • Animationstyp: efter beräknad värdetyp

Värden

inset-blocktar ett längdvärde och stöder globala sökord. Standardvärdet är 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;

Webbläsarstöd

IE Kant Firefox Krom Safari Opera
Nej Nej 63+ Nej Nej Nej
Android Chrome Android Firefox Android-webbläsare iOS Safari Opera Mini
Nej 79+ Nej Nej Nej
Källa: caniuse

Demo

Vidare läsning

  • CSS logiska egenskaper och värden nivå 1 specifikation (Editor's Draft)
  • MDN-dokumentation
  • Förstå logiska egenskaper och värden (Smashing Magazine)
  • CSS Logical Properties (Adrian Roselli)
  • Dubbelriktade horisontella regler i CSS (Hussein Al Hammad)