insetNekretnina u CSS je skraćenica za četiri leže unutar svojstava top, right, bottoma leftna jednoj deklaraciji. Baš kao i četiri pojedinačna svojstva, insetnema utjecaja na nepozicionirane (statičke) elemente. Drugim riječima, element mora deklarirati eksplicitnu positionvrijednost prije nego što umetnuta svojstva stupe na snagu.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset inicijalno je definiran u specifikaciji CSS logičkih svojstava i vrijednosti 1, koja se nalazi u Nacrtu urednika od 20. travnja 2020.
Sintaksa
Kao što ste možda skupili iz gornjeg primjera, insetslijedi istu višeznačnu sintaksu paddingi margin. To znači da prihvaća čak četiri vrijednosti (proglasiti offseta za top, right, bottoma left) i što manje jedne vrijednosti (proglasiti jednakim umanjen za sva četiri svojstva). I, poput paddingi margin, vrijednosti teku u smjeru kazaljke na satu, počevši od 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 */ )Prije insetbismo morali insetzasebno prijaviti svaku podvlasnost, ovako:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Sada to možemo jednostavno dodati na jedan redak CSS-a:
.box ( position: absolute; inset: 0; /* ? */ )Vrijednosti
insetNekretnine prihvaća brojčane vrijednosti kao i vrh, desni i donji i lijevo. Te vrijednosti mogu biti bilo koji valjani duljina CSS, kao što su px, em, remi %, među ostalima.
Razgovarajmo o logičkim svojstvima
Ovdje ćemo samo ogrebati površinu logičkih svojstava, jer je stvarni fokus na insetsrodnim svojstvima. Temeljito zaronite u temu u ovom članku Smashing Magazine Rachel Andrew.
Postoji više insetpod-svojstva nego top, right, bottomi leftveć, kako bi ih se razumjelo, to je vrijedno upoznavanja s logičkim svojstvima i vrijednostima.
Sadržaj se može prikazati u različitim smjerovima (tj. Načinima pisanja), uključujući slijeva udesno, zdesna ulijevo, od vrha do dna i od dna do vrha. Kada govorimo o "logičkim" konceptima, stvarno se pozivamo na polazište temeljeno na smjeru pisanja sadržaja.
Zamislite da gradite web stranicu koja mora podržavati jezike slijeva udesno (LTR), poput engleskog i španjolskog, i jezike zdesna ulijevo (RTL), poput perzijskog ili arapskog. Recimo da želite dodati marginu između ikone i teksta retka pored nje.
Naravno, možete posegnuti za margin-rightentitetom koji podržava LTR, a zatim dodati još jedan skup pravila koji uklanja tu marginu i zamjenjuje je margin-leftza RTL:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )Ovo je mali dio stranice. Sad zamislite da na ovaj način napravite veliku web stranicu - to je puno posla! Ali logička svojstva čine ga brzim uzimajući u obzir način pisanja. Na primjer, možemo dodati marginu na kraj elementa, ma gdje se to dogodilo:
.icon ( margin-inline-end: 1em; )
To je ono na što mislimo kada se referiramo na logička svojstva - ona su u odnosu na način pisanja, a ne na fizički smjer. Pogledajte kako je s logičkim svojstvima puno logičnije raditi?
Umetni logička svojstva
Dakle, znajući što sada znate o logičkim svojstvima, evo četiri dodatna umetnuta pod-svojstva:
| Logičko svojstvo | Ekvivalent vodoravnog protoka | Što to radi |
|---|---|---|
inset-block-start | top | Određuje pomak za početni rub u smjeru koji je okomit na smjer pisanja. |
inset-block-end | bottom | Određuje pomak za krajnji rub u smjeru koji je okomit na smjer pisanja. |
inset-inline-start | left | Određuje pomak za početni rub u smjeru pisanja, koji se preslikava na fizički pomak, ovisno o načinu pisanja, smjeru i orijentaciji teksta elementa. |
inset-inline-end | right | Određuje pomak za krajnji rub u smjeru pisanja. |
Ta četiri podvlasnika možemo čak grupirati u dva dodatna stenografska svojstva:
| Logičko svojstvo | Stenografija za | Što to radi |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Prihvaća jednu vrijednost za postavljanje inset-inline-starti inset-inline-end.Također prihvaća dvije vrijednosti, gdje prva navodi, inset-inline-starta druga određuje inset-inline-end. |
inset-block | inset-block-startinset-block-end | Prihvaća jednu vrijednost za postavljanje i inset-block-start i inset-block-end.Također prihvaća dvije vrijednosti, gdje prva navodi, inset-block-starta druga određuje inset-block-end. |
Demo
Promijenite način pisanja i vrijednosti svojstava umetka kako biste dobili bolju ideju o njihovom radu:
Pažnja: insetsvojstvo nije logično
Iako insetje dio specifikacije logičkih svojstava i vrijednosti, on ne definira logički blok ili inline pomake. Umjesto toga, definira fizičke pomake, bez obzira na način pisanja, smjera i orijentacije teksta elementa. Drugim riječima, insetsamo je skraćenica za top, right, bottomi left.
Ovdje se na GitHubu raspravlja o upotrebi nekih ključnih riječi da bi se i ovo svojstvo moglo koristiti na logičan način.
Pa, koristimo li još uvijek fizičke pomake? Zamislite da želite značku ili logotip pričvršćeni za gornji i lijevi kut stranice i, bez obzira na jezik, želite da bude tamo. U tom slučaju ne možete koristiti logičke pomake i umjesto toga morat ćete pribjeći fizičkim svojstvima.
Podrška preglednika
Podrška za insetimovinu još je u ranoj fazi. Od ovog pisanja, caniuse procjenjuje globalnu potporu na samo 3,79%.
Radna površina
| Internet Explorer | Rub | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Ne | Ne | 66+ | Ne | Ne | Ne |
Mobilni
| iOS Safari | Opera Mini | Android preglednik | Chrome Android | Firefox Android |
|---|---|---|---|---|
| Ne | Ne | 68 | Ne | Ne |
Više informacija
- CSS logička svojstva i vrijednosti razina 1 (specifikacija, urednikov nacrt)
- Razumijevanje logičkih svojstava i vrijednosti (Smashing Magazine)
- CSS logička svojstva (CSS-trikovi)