Įterpti-blokuoti - CSS-gudrybės

Turinys:

Anonim

inset-blockyra sutrumpinta loginė CSS ypatybė, nustatanti ilgį, kurį elementas kompensuoja bloko kryptimi derindamas inset-block-startir inset-block-end. Tai tarsi skelbiantis topir bottomišskyrus jo pradžios ir pabaigos taškai nustatoma pagal elemento direction, text-orientationir writing-mode, kaip ir kitų loginių savybių.

Nuosavybė yra CSS loginių ypatybių ir reikšmių 1 lygio specifikacijos dalis, kuri šiuo metu yra redaktoriaus juodraščio būsenoje. Tai reiškia, kad apibrėžimas ir informacija apie jį gali pasikeisti nuo dabar iki oficialios rekomendacijos.

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

Taigi, pavyzdžiui, jei rašymo režimas horizontal-lrsu inset-blockturto veiks kaip nustatymo topir bottomir nustatykite elemento poslinkis nuo apatinio krašto. Tam, positionkad jis įsigaliotų, tame pačiame elemente netgi reikia nurodyti aiškų žodį, kaip ir fizinių kompensuotų savybių.

Bet pakeiskite elementą writing-modeį kažką panašaus vertical-lrir „apatinis“ kraštas pasisuks vertikalia kryptimi, veikdamas labiau ir leftir rightsavybėmis.

Sintaksė

inset-block: ;
  • Pradinė vertė: auto
  • Taikoma: išdėstytiems elementams
  • Paveldima: ne
  • Procentai: kaip ir atitinkamai fizinei nuosavybei
  • Apskaičiuota vertė: tokia pati kaip ir atitinkamos topir bottomsavybės
  • Animacijos tipas: pagal apskaičiuotą vertės tipą

Vertybės

inset-blockužima ilgio vertę ir palaiko pasaulinius raktinius žodžius. Numatytoji jo vertė yra 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;

Naršyklės palaikymas

T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
Ne Ne 63+ Ne Ne Ne
„Android Chrome“ „Android Firefox“ „Android“ naršyklė „iOS Safari“ „Opera Mini“
Ne 79+ Ne Ne Ne
Šaltinis: caniuse

Demonstracija

Papildoma literatūra

  • CSS loginių ypatybių ir reikšmių 1 lygio specifikacija (redaktoriaus juodraštis)
  • MDN dokumentacija
  • Suprasti logines savybes ir vertybes (žurnalas „Smashing“)
  • CSS loginės savybės (Adrianas Roselli)
  • Dvipusės horizontaliosios taisyklės CSS (Hussein Al Hammad)