inset-inline-startyra CSS ypatybė, nustatanti ilgį, kurį elementas kompensuoja pradine tiesės kryptimi. Tai tarsi kaip deklaruojant left, kad ji taikoma pastatytas elementų ir kompensacijų kairiojoje kryptimi elementas, išskyrus jo pradžios ir pabaigos taškai gali pakeisti remiantis pagrindinio 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-inline-start: 50px; 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-inline-startturto veiks kaip nustatymo left, įskaitymo elementą iš kairiojo 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 „pradinis“ kraštas pasisuks vertikalia kryptimi, veikdamas labiau kaip topvietoj to.
Sintaksė
inset-inline-start: ;- Pradinė vertė:
auto - Taikoma: išdėstytiems elementams
- Paveldima: ne
- Procentai: kaip ir atitinkamai fizinei nuosavybei
- Apskaičiuota vertė: tokia pati kaip ir atitinkama
leftsavybė - 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-inline-start: 50px; inset-inline-start: 4em; inset-inline-start: 3.5rem inset-inline-start: 25vh; /* Percentage values */ inset-inline-start: 50%; /* Keyword values */ inset-inline-start: auto; /* initial value */ /* Global values */ inset-inline-start: initial inset-inline-start: inherit; inset-inline-start: 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)