Infälld-inline-end - CSS-tricks

Innehållsförteckning:

Anonim

inset-inline-endär en CSS-egenskap som ställer in den längd som ett element förskjuts i inline-riktningen. Det är som att förklara genom rightatt det gäller placerade element och förskjuter ett element i vänster riktning, förutom att dess start- och slutpunkter kan ändras baserat på 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-inline-end: 50px; 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-inline-endegenskapen kommer att fungera precis som inställning left, kvittning ett element från den vänstra 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 ändra elementets writing-modetill något liknande vertical-lroch "start" -kanten roteras i vertikal riktning och fungerar mer som topistället.

Syntax

inset-inline-end: ;
  • 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 leftegenskap
  • 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-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;

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)