Indsat-blok - CSS-tricks

Indholdsfortegnelse:

Anonim

inset-blocker en stenografisk logisk CSS-egenskab, der indstiller den længde, som et element forskydes i blokretningen ved at kombinere inset-block-startog inset-block-end. Det er lidt ligesom at erklære topog bottomundtagen 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-block: 50px 15%; 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-blockejendom 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-block: ;
  • Startværdi: auto
  • Gælder for: placerede elementer
  • Arvet: nej
  • Procentdele: som for den tilsvarende fysiske egenskab
  • Beregnet værdi: samme som tilsvarende topog bottomegenskaber
  • 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-block: 50px; inset-block: 4em; inset-block: 3.5rem inset-block: 25vh; /* Percentage values */ inset-block: 50%; /* Keyword values */ inset-block: auto; /* initial value */ /* Global values */ inset-block: initial inset-block: inherit; inset-block: 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)