Innfelt - CSS-triks

Innholdsfortegnelse:

Anonim

inset-inlineer en stenografisk logisk CSS-egenskap som setter lengden som et element forskyves i den innebygde retningen som kombinerer inset-inline-startog inset-inline-end. Det er som å erklære, rightog leftbortsett fra start- og sluttpunktene bestemmes av 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: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Så, for eksempel, hvis skrivemodus er satt til horizontal-lrden inset-inlineeiendommen vil fungere akkurat som innstillingen topog bottomog stille elementet er forskjøvet fra den nederste kanten. 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 “bottom” edge roteres i vertikal retning, opptrer mer som leftog rightegenskaper.

Syntaks

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

Verdier

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

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)