Indsat-inline-start - CSS-tricks

Indholdsfortegnelse:

Anonim

inset-inline-starter en CSS-egenskab, der indstiller længden, som et element forskydes i startretningen. Det er lidt ligesom at erklære left, at det gælder for placerede elementer og forskydninger et element i den venstre retning, undtagen sit udgangspunkt og slutpunkter kan ændres baseret på elementets direction, text-orientationog writing-mode, ligesom andre logiske egenskaber.

Ejendommen er en del af CSS logiske egenskaber og værdier niveau 1 specifikation, som i øjeblikket er i Editor's kladdestatus. Det betyder, at definitionen og informationen om den kan ændre sig fra nu til officiel anbefaling.

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

Så for eksempel, hvis skriften er indstillet til horizontal-lrden inset-inline-startejendom vil fungere ligesom indstilling left, modregning et element fra venstre kant. Du skal endda angive et eksplicit positionpå det samme element for at det kan træde i kraft, ligesom fysiske forskydningsegenskaber.

Men skift elementets writing-modetil noget lignende, vertical-lrog “start” -kanten roteres i lodret retning og fungerer mere som den i topstedet.

Syntaks

inset-inline-start: ;
  • Startværdi: auto
  • Gælder for: placerede elementer
  • Arvet: nej
  • Procentdele: som for den tilsvarende fysiske egenskab
  • Beregnet værdi: samme som den tilsvarende leftegenskab
  • Animationstype: efter beregnet værditype

Værdier

inset-blocktager en længdeværdi og understøtter globale søgeord. Dens standardværdi er auto.

/* Length values */ inset-inline-start: 50px; inset-inline-start: 4em; inset-inline-start: 3.5rem inset-inline-start: 25vh; /* Percentage values */ inset-inline-start: 50%; /* Keyword values */ inset-inline-start: auto; /* initial value */ /* Global values */ inset-inline-start: initial inset-inline-start: inherit; inset-inline-start: unset;

Browsersupport

IE Edge Firefox Chrome Safari Opera
Ingen Ingen 63+ Ingen Ingen Ingen
Android Chrome Android Firefox Android-browser iOS Safari Opera Mini
Ingen 79+ Ingen Ingen Ingen
Kilde: caniuse

Demo

Yderligere læsning

  • CSS logiske egenskaber og værdier niveau 1 specifikation (Editor's Draft)
  • MDN-dokumentation
  • Forståelse af logiske egenskaber og værdier (Smashing Magazine)
  • CSS logiske egenskaber (Adrian Roselli)
  • Tovejs vandrette regler i CSS (Hussein Al Hammad)