Indsat-inline - CSS-tricks

Indholdsfortegnelse:

Anonim

inset-inlineer en stenografisk logisk CSS-egenskab, der indstiller længden, som et element forskydes i den integrerede retning, der kombinerer inset-inline-startog inset-inline-end. Det er lidt ligesom at erklære rightog leftundtagen dens start og slut punkter bestemmes af 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: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Så for eksempel, hvis skriften er indstillet til horizontal-lrden inset-inlineejendom vil fungere ligesom indstilling topog bottomog sæt elementets forskudt fra den nederste kant. Du skal endda angive et eksplicit positionpå det samme element for at det kan træde i kraft, ligesom fysiske forskydningsegenskaber.

Men ændre elementets writing-modetil noget som vertical-lrog ”bunden” kant drejes i lodret retning, der handler mere som den leftog rightegenskaber.

Syntaks

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

Værdier

inset-inlinetager en længdeværdi og understøtter globale søgeord. Dens standardværdi 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;

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)