inset-block-starton looginen CSS-ominaisuus, joka asettaa pituuden, jonka elementti on siirretty lohkon suunnassa sen alkureunasta. Se on eräänlainen julistaminen, toppaitsi että alkupiste määräytyy elementin direction, text-orientationja writing-modeaivan kuten muutkin loogiset ominaisuudet.
Ominaisuus on osa CSS: n loogisten ominaisuuksien ja arvojen tason 1 määritystä, joka on tällä hetkellä Editorin luonnos -tilassa. Tämä tarkoittaa, että sen määritelmä ja tiedot voivat muuttua nykyisen ja virallisen suosituksen välillä.
.element ( inset-block-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Niinpä esimerkiksi, jos kirjoitus on asetettu tilaan kiinteistön toimii aivan kuten ja asettaa elementin siirtymän se alkaa reuna, joka on alkuun. Sinun on jopa määritettävä nimenomainen samalle elementille, jotta se voi tulla voimaan, kuten muutkin fyysiset offset-ominaisuudet.horizontal-lrinset-block-starttoppositiontop
Mutta vaihda elementin writing-modekaltaiseksi vertical-rlja aloitusreunaa käännetään pystysuunnassa, joka toimii enemmän kuin leftominaisuus.
Syntaksi
inset-block-start: ;- Alkuarvo:
auto - Koskee: sijoitettuja elementtejä
- Peritty: ei
- Prosenttiosuudet: kuten vastaavan fyysisen omaisuuden kohdalla
- Laskettu arvo: sama kuin vastaava
topominaisuus - Animaatiotyyppi: lasketun arvotyypin mukaan
Arvot
inset-block-startvie pituusarvon ja tukee globaaleja avainsanoja. Sen oletusarvo on auto.
/* Length values */ inset-block-start: 50px; inset-block-start: 4em; inset-block-start: 3.5rem inset-block-start: 25vh; /* Percentage values */ inset-block-start: 50%; /* Keyword values */ inset-block-start: auto; /* initial value */ /* Global values */ inset-block-start: initial inset-block-start: inherit; inset-block-start: unset;Selaimen tuki
| IE | Reuna | Firefox | Kromi | Safari | Ooppera |
|---|---|---|---|---|---|
| Ei | Ei | 63+ | Ei | Ei | Ei |
| Android Chrome | Android Firefox | Android-selain | iOS Safari | ooppera Mini |
|---|---|---|---|---|
| Ei | 79+ | Ei | Ei | Ei |
Demo
Lisälukemista
- CSS: n loogisten ominaisuuksien ja arvojen tason 1 määrittely (toimittajan luonnos)
- MDN-dokumentaatio
- Loogisten ominaisuuksien ja arvojen ymmärtäminen (Smashing Magazine)
- CSS: n loogiset ominaisuudet (Adrian Roselli)
- Kaksisuuntaiset horisontaaliset säännöt CSS: ssä (Hussein Al Hammad)