inset-inline
yra sutrumpinta loginė CSS ypatybė, nustatanti ilgį, kurį elementas kompensuoja tiesine kryptimi, sujungdamas inset-inline-start
ir inset-inline-end
. Tai tarsi skelbiantis right
ir left
išskyrus jo pradžios ir pabaigos taškai nustatoma pagal elemento direction
, text-orientation
ir 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-inline: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )
Taigi, pavyzdžiui, jei rašymo režimas horizontal-lr
su inset-inline
turto veiks kaip nustatymo top
ir bottom
ir nustatykite elemento poslinkis nuo apatinio krašto. Tam, position
kad 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-lr
ir „apatinis“ kraštas pasisuks vertikalia kryptimi, veikdamas labiau ir left
ir right
savybėmis.
Sintaksė
inset-inline: ;
- Pradinė vertė:
auto
- Taikoma: išdėstytiems elementams
- Paveldima: ne
- Procentai: kaip ir atitinkamai fizinei nuosavybei
- Apskaičiuota vertė: tokia pati kaip ir atitinkamos
top
irleft
savybės - Animacijos tipas: pagal apskaičiuotą vertės tipą
Vertybės
inset-inline
užima ilgio vertę ir palaiko pasaulinius raktinius žodžius. Numatytoji jo vertė yra 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;
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 |
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)