insetHotel v CSS je okrajšava za štiri notranjimi lastnostmi, top, right, bottomin leftv eni izjavi. Tako kot štiri posamezne lastnosti same insetne vpliva na nepozicionirane (statične) elemente. Z drugimi besedami, element mora prijaviti izrecno positionvrednost, preden lahko vstavljene lastnosti začnejo veljati.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset je prvotno opredeljen v specifikaciji CSS Logical Properties and Values Level 1, ki je v urednikovem osnutku od 20. aprila 2020.
Sintaksa
Kot ste morda zbrali iz zgornjega primera, insetsledi isti sintaksi več vrednosti paddingin margin. To pomeni, da sprejema več kot štirih vrednosti (jo razglaša za protidobave za top, right, bottomin left) in več kot samo eno vrednost (naj ugotovi enakopravni nadomestilo za vse štiri lastnosti). In, kot paddingin margin, vrednosti tečejo v smeri urinega kazalca, začenši z 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 */ )Pred insettem bi morali vsako insetpodlastnost prijaviti posebej, takole:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Zdaj lahko to preprosto spremenimo v eno vrstico CSS:
.box ( position: absolute; inset: 0; /* ? */ )Vrednote
insetLastnina sprejema številčne vrednosti, tako kot zgoraj, desno, spodaj in levo. Te vrednosti lahko katera koli veljavna dolžina CSS, kot so px, em, remin %, med drugim.
Pogovorimo se o logičnih lastnostih
Tukaj bomo samo opraskali površino logičnih lastnosti, saj je resnična pozornost usmerjena na insetz njimi povezane pod-lastnosti. Poglobite se v to temo v tem članku Smashing Magazine Rachel Andrew.
Obstaja več insetsub-lastnosti kot top, right, bottomin leftvendar, da bi jih razumeli, da je vredno spoznavanje logičnih lastnosti in vrednosti.
Vsebina je lahko prikazana v različnih smereh (tj. Načini pisanja), vključno z levo-desno, od desne proti levi, od zgoraj navzdol in od spodaj navzgor. Ko govorimo o "logičnih" konceptih, v resnici mislimo na izhodišče, ki temelji na smeri pisanja vsebine.
Predstavljajte si, da gradite spletno mesto, ki mora podpirati jezike od leve proti desni (LTR), kot sta angleščina in španščina, in jezike od desne proti levi (RTL), kot sta perzijščina ali arabščina. Recimo, da želite dodati rob med ikono in besedilom vrstice ob njej.
Seveda lahko posežete po margin-rightznamki, ki podpira LTR, nato pa dodate še en nabor pravil, ki odstrani to mejo in jo nadomesti z margin-leftRTL:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )To je majhen del strani. Zdaj pa si predstavljajte, kako na ta način zgradite veliko spletno mesto - to je veliko dela! Toda logične lastnosti naredijo trenutek tako, da za nas upoštevajo način pisanja. Na primer, lahko na koncu elementa dodamo rob , kjer koli se to zgodi:
.icon ( margin-inline-end: 1em; )
To je tisto, kar mislimo, ko se sklicujemo na logične lastnosti - so bolj odvisne od načina pisanja kot od fizične smeri. Oglejte si, kako je z logičnimi lastnostmi veliko bolj logično delati?
Vstavi logične lastnosti
Torej, če veste, kaj zdaj veste o logičnih lastnostih, tukaj so štiri dodatne vstavljene pod-lastnosti:
| Logična lastnost | Ekvivalent vodoravnega pretoka | Kaj naredi |
|---|---|---|
inset-block-start | top | Določa odmik začetnega roba v smeri, ki je pravokotna na smer pisanja. |
inset-block-end | bottom | Določa odmik končnega roba v smeri, ki je pravokotna na smer pisanja. |
inset-inline-start | left | Določi odmik začetnega roba v smeri pisanja, ki se preslika v fizični odmik, odvisno od načina pisanja, smeri in usmeritve besedila elementa. |
inset-inline-end | right | Določa odmik končnega roba v smeri pisanja. |
Te štiri podlastnosti lahko celo združimo v dve dodatni okrajšavi:
| Logična lastnost | Okrajšava za | Kaj naredi |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Sprejema eno vrednost za nastavitev obeh inset-inline-startin inset-inline-end.Sprejema tudi dve vrednosti, pri čemer prva določa, inset-inline-startdruga pa inset-inline-end. |
inset-block | inset-block-startinset-block-end | Sprejema eno vrednost za nastavitev inset-block-start in inset-block-end.Sprejema tudi dve vrednosti, pri čemer prva določa, inset-block-startdruga pa inset-block-end. |
Demo
Spremenite način pisanja in vrednosti lastnosti vstavka, da boste bolje razumeli, kako delujejo:
Pozor: insetLastnost ni logična
Čeprav insetje del specifikacije logičnih lastnosti in vrednosti, ne opredeljuje logičnih blokov ali vrstnih odmikov. Namesto tega določa fizične odmike, ne glede na način pisanja, smeri in usmerjenosti besedila elementa. Z drugimi besedami, insetje le okrajšava za top, right, bottomin left.
Na GitHubu je nekaj razprav glede uporabe nekaterih ključnih besed, da bi lahko to lastnost uporabili tudi na logičen način.
Torej, ali še vedno uporabljamo fizične odmike? Predstavljajte si, da želite v zgornjem in levem kotu strani pritrditi značko ali logotip in ne glede na jezik želite, da je tam. V tem primeru ne morete uporabiti logičnih odmikov in se boste morali namesto tega zateči k fizičnim lastnostim.
Podpora za brskalnik
Podpora insetnepremičnini je še v začetni fazi. Od tega pisanja Caniuse ocenjuje svetovno podporo na le 3,79%.
Namizje
| internet Explorer | Rob | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ne | Ne | 66+ | Ne | Ne | Ne |
Mobilni
| iOS Safari | Opera Mini | Brskalnik Android | Chrome Android | Firefox Android |
|---|---|---|---|---|
| Ne | Ne | 68 | Ne | Ne |
Več informacij
- Logične lastnosti in vrednosti CSS 1. stopnja (specifikacija, uredniški osnutek)
- Razumevanje logičnih lastnosti in vrednosti (Smashing Magazine)
- Logične lastnosti CSS (triki CSS)