insetVara CSS on lühem neljast vahetükk omadused, top, right, bottomja leftühes deklaratsiooni. Nii nagu neli üksikut omadust ise, insetei mõjuta see ka positsioneerimata (staatilisi) elemente. Teisisõnu peab element positionenne deklareeritud omaduste jõustumist deklareerima selgesõnalise väärtuse.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset on algselt määratletud CSS-i loogiliste omaduste ja väärtuste 1. taseme spetsifikatsioonis, mis on redaktori mustandis alates 20. aprillist 2020.
Süntaks
Nagu te võib-olla kogutud ülaltoodud näites, insetjärgib sama multi-väärtus süntaksi paddingja margin. See tähendab, et aktsepteerib nii palju kui neli väärtused (kuulutada nihke top, right, bottomja left) ja nii vähe kui üks väärtus (kuulutada võrdne nihke kõik neli omadused). Ja nagu paddingja margin, voolavad väärtused päripäeva, alustades top.
.element ( inset: 1em 2em 3em 0; /* top right bottom left */ inset: 10% 5% -10%; /* top left/right bottom */ inset: 0 10px; /* top/bottom left/right */ inset: 20px; /* all edges = 20px */ )Enne insetpeame deklareerima iga insetalamvara eraldi, järgmiselt:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Nüüd saame selle lihtsalt CSS-i ühele reale:
.box ( position: absolute; inset: 0; /* ? */ )Väärtused
insetVara nõustub arvväärtused nagu ülemine, parem, alumine ja lahkus. Need väärtused võivad olla mis tahes kehtiva CSS pikkus, nagu px, em, remja %, teiste hulgas.
Räägime loogilistest omadustest
Me lihtsalt kraapime siin loogiliste omaduste pinda, kuna tegelik fookus on insetja sellega seotud alamomadused. Selles Rachel Andrew ajakirja Smashing Magazine artiklis saate põhjalikult süveneda teemasse.
Seal on rohkem insetsub-omadused kui top, right, bottomja leftvaid selleks, et mõista neid, see on väärt tutvumine loogiline omadused ja väärtused.
Sisu saab kuvada erinevates suundades (st kirjutamisrežiimid), sealhulgas vasakult paremale, paremalt vasakule, ülalt alla ja alt üles. Kui räägime "loogilistest" mõistetest, siis peame lähtepunkti sisu kirjutamise suuna põhjal.
Kujutage ette, et ehitate veebisaiti, mis peab toetama nii vasakult paremale (LTR), nagu inglise ja hispaania, kui ka paremalt vasakule (pärsia või araabia) keelt. Oletame, et soovite lisada varu ikooni ja selle kõrval oleva jooteksti vahele.
Muidugi võite margin-rightpöörduda vara poole, et LTR-i toetada, ja seejärel lisada veel üks reeglistik, mis eemaldab selle veerise ja asendab selle margin-leftRTL-iga:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )See on väike osa lehest. Kujutage nüüd ette suure veebisaidi sellisel viisil ehitamist - see on palju tööd! Kuid loogilised omadused muudavad selle hetkeks, võttes meie jaoks arvesse kirjutamisrežiimi. Näiteks võime elemendi lõppu lisada varu , ükskõik kus see juhtub olema:
.icon ( margin-inline-end: 1em; )
Seda mõtleme loogilistele omadustele viitamisel - need on pigem kirjutamisrežiimi kui füüsilise suuna suhtes. Vaadake, kuidas loogiliste omadustega on palju loogilisem töötada?
Sisestage loogilised omadused
Niisiis, teades, mida nüüd loogiliste omaduste kohta teate, on siin veel neli sisestatud alamomadust:
| Loogiline omadus | Horisontaalse voolu ekvivalent | Mida see teeb |
|---|---|---|
inset-block-start | top | Määrab alguserva nihke kirjutussuunaga risti asuvas suunas. |
inset-block-end | bottom | Määrab lõppserva nihke kirjutussuunaga risti asuvas suunas. |
inset-inline-start | left | Määrab algusserva nihke kirjutamissuunas, mis kaardistab füüsilise nihke sõltuvalt elemendi kirjutamisrežiimist, suunast ja teksti orientatsioonist. |
inset-inline-end | right | Määrab lõppserva nihke kirjutamissuunas. |
Me võime need neli alamomadust koguni kahte täiendavasse lühiomadusse rühmitada:
| Loogiline omadus | Lühikirjeldus | Mida see teeb |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Nõustub ühe väärtuse seadmiseks nii inset-inline-startja inset-inline-end.Aktsepteerib ka kahte väärtust, kus esimene määrab inset-inline-startja teine täpsustab inset-inline-end. |
inset-block | inset-block-startinset-block-end | Aktsepteerib ühe väärtuse nii inset-block-start kui ka määramiseks inset-block-end.Aktsepteerib ka kahte väärtust, kus esimene määrab inset-block-startja teine täpsustab inset-block-end. |
Demo
Muutke sisestatud omaduste kirjutamisrežiimi ja väärtusi, et saada parem ülevaade nende toimimisest:
Heads up: insetAtribuut pole loogiline
Kuigi see inseton osa loogiliste omaduste ja väärtuste spetsifikatsioonist, ei määratle see loogilisi plokke ega inline nihkeid. Selle asemel määratleb see füüsilised nihked, olenemata elemendi kirjutamisrežiimist, suunast ja teksti orientatsioonist. Teisisõnu, inseton vaid tingliku top, right, bottomja left.
Siin GitHubis arutatakse mõningate märksõnade kasutamise üle, et ka seda atribuuti loogiliselt kasutada.
Kas me siis ikkagi kasutame füüsilisi nihkeid? Kujutage ette, et soovite oma märgi või logo kinnitada oma lehe ülemisse ja vasakusse nurka ja keelest hoolimata soovite, et see seal oleks. Sel juhul ei saa te kasutada loogilisi nihkeid ja peate selle asemel kasutama füüsilisi omadusi.
Brauseri tugi
insetKinnisvara tugi on alles varajases staadiumis. Selle kirjutise seisuga on caniuse hinnangul ülemaailmne toetus vaid 3,79%.
Töölaud
| Internet Explorer | Edge | Firefox | Chrome | Safari | Ooper |
|---|---|---|---|---|---|
| Ei | Ei | 66+ | Ei | Ei | Ei |
Mobiilne
| iOS-i Safari | Opera Mini | Androidi brauser | Chrome Android | Firefox Android |
|---|---|---|---|---|
| Ei | Ei | 68 | Ei | Ei |
Rohkem informatsiooni
- CSS-i loogiliste omaduste ja väärtuste 1. tase (spetsifikatsioon, redaktori mustand)
- Loogiliste omaduste ja väärtuste mõistmine (ajakiri Smashing)
- CSS-i loogilised atribuudid (CSS-trikid)