Innfelt-blokk - CSS-triks

Innholdsfortegnelse:

Anonim

inset-blocker en kortfattet logisk CSS-egenskap som angir lengden som et element blir forskjøvet i blokkretningen ved å kombinere inset-block-startog inset-block-end. Det er som å erklære, topog bottombortsett 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-block: 50px 15%; 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-blockeiendommen 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-block: ;
  • Opprinnelig verdi: auto
  • Gjelder: posisjonerte elementer
  • Arvet: nei
  • Prosentandel: som for den tilsvarende fysiske egenskapen
  • Beregnet verdi: samme som tilsvarende topog bottomegenskaper
  • Animasjonstype: etter beregnet verditype

Verdier

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

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)