Innfelt-inline-end - CSS-triks

Innholdsfortegnelse:

Anonim

inset-inline-ender en CSS-egenskap som setter lengden på at et element skal forskyves i startretningen. Det er som å erklære rightat det gjelder posisjonerte elementer og forskyver et element i venstre retning, bortsett fra at start- og sluttpunktene kan endres basert på elementets direction, text-orientationog writing-modeakkurat som andre logiske egenskaper.

Eiendommen er en del av CSS Logical Properties and Values ​​Level 1-spesifikasjonen som for øyeblikket er i Editor's Draft-status. Det betyr at definisjonen og informasjonen om den kan endres mellom nå og offisiell anbefaling.

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

Så, for eksempel, hvis skrivemodus er satt til horizontal-lrden inset-inline-endeiendommen vil fungere akkurat som innstilling left, utligne et element fra venstre kant. Du må til og med spesifisere et eksplisitt positionpå det samme elementet for at det skal tre i kraft, akkurat som fysiske offsetegenskaper.

Men endre elementets writing-modetil noe sånt, vertical-lrog "startkanten" roteres i vertikal retning, og virker mer som den i topstedet.

Syntaks

inset-inline-end: ;
  • Opprinnelig verdi: auto
  • Gjelder: posisjonerte elementer
  • Arvet: nei
  • Prosentandel: som for den tilsvarende fysiske egenskapen
  • Beregnet verdi: samme som tilsvarende lefteiendom
  • Animasjonstype: etter beregnet verditype

Verdier

inset-blocktar en lengdeverdi og støtter globale søkeord. Standardverdien er 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;

Nettleserstøtte

DVS Kant Firefox Chrome Safari Opera
Nei Nei 63+ Nei Nei Nei
Android Chrome Android Firefox Android-nettleser iOS Safari Opera Mini
Nei 79+ Nei Nei Nei
Kilde: caniuse

Demo

Videre lesning

  • CSS logiske egenskaper og verdier nivå 1 spesifikasjon (Editor's Draft)
  • MDN-dokumentasjon
  • Forstå logiske egenskaper og verdier (Smashing Magazine)
  • CSS Logical Properties (Adrian Roselli)
  • Toveis horisontale regler i CSS (Hussein Al Hammad)