insetNemovitost v CSS je zkratka pro čtyři vložené vlastnosti, top, right, bottoma leftv jednom prohlášení. Stejně jako samotné čtyři jednotlivé vlastnosti insetnemá žádný vliv na ne umístěné (statické) prvky. Jinými slovy, prvek musí deklarovat explicitní positionhodnotu, než se mohou projevit vlastnosti vložky.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset je původně definován ve specifikaci CSS Logical Properties and Values Level 1, která je v Draft editoru k 20. dubnu 2020.
Syntax
Jak jste možná shromáždili z výše uvedeného příkladu, insetnásleduje stejná vícehodnotová syntaxe paddinga margin. To znamená, že přijímá tolik jako čtyři hodnoty (prohlásit prolisy pro top, right, bottoma left) i třeba jen jedné hodnoty (deklarovat se rovnat offset pro všechny čtyři vlastnosti). A jako paddinga marginhodnoty plynou ve směru hodinových ručiček, počínaje 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 */ )Předtím insetbychom museli každou insetdílčí vlastnost deklarovat samostatně, například takto:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Nyní to jednoduše můžeme udělat na jeden řádek CSS:
.box ( position: absolute; inset: 0; /* ? */ )Hodnoty
insetVlastnost přijímá číselné hodnoty, stejně jako nahoře, vpravo, dole a vlevo. Tyto hodnoty mohou být libovolná platná délka CSS, jako je například px, em, rema %, mezi ostatními.
Promluvme si o logických vlastnostech
Prostě zde poškrábáme povrch logických vlastností, protože skutečné zaměření je na inseta jeho související podvlastnosti. Získejte důkladné hluboké ponoření do tohoto tématu v tomto článku Smashing Magazine od Rachel Andrew.
Existuje více insetpodvlastnosti než top, right, bottoma left, ale aby je pochopili, že to stojí za seznámení s logickými vlastnostmi a hodnotami.
Obsah lze zobrazit různými směry (tj. Režimy psaní), včetně zleva doprava, zprava doleva, shora dolů a zdola nahoru. Když mluvíme o „logických“ koncepcích, máme na mysli skutečný výchozí bod na základě směru psaní obsahu.
Představte si, že vytváříte web, který musí podporovat jazyky zleva doprava (LTR), jako je angličtina a španělština, a jazyky zprava doleva (RTL), jako je perština nebo arabština. Řekněme, že chcete přidat okraj mezi ikonu a text řádku vedle ní.
Přirozeně můžete sáhnout po margin-rightvlastnosti, která podporuje LTR, a pak přidat další sadu pravidel, která odstraní tento okraj a nahradí jej margin-leftpro RTL:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )Toto je malá část stránky. Nyní si představte, že tímto způsobem vytvoříte velkou webovou stránku - to je spousta práce! Díky logickým vlastnostem je ale hračka tím, že pro nás zohledňuje režim psaní. Například můžeme přidat okraj na konec prvku, ať se to stane kdekoli:
.icon ( margin-inline-end: 1em; )
To máme na mysli při odkazování na logické vlastnosti - jsou relativní spíše k režimu psaní než k fyzickému směru. Podívejte se, jak logické vlastnosti jsou mnohem logičtější pro práci?
Vložit logické vlastnosti
Takže víte, co teď víte o logických vlastnostech, zde jsou čtyři další vložené dílčí vlastnosti:
| Logická vlastnost | Ekvivalent vodorovného toku | Co to dělá |
|---|---|---|
inset-block-start | top | Určuje posun počáteční hrany ve směru, který je kolmý na směr psaní. |
inset-block-end | bottom | Určuje odsazení pro koncovou hranu ve směru, který je kolmý ke směru psaní. |
inset-inline-start | left | Určuje posun počáteční hrany ve směru zápisu, který se mapuje na fyzické posunutí v závislosti na režimu psaní, směru a orientaci textu. |
inset-inline-end | right | Určuje odsazení pro koncovou hranu ve směru zápisu. |
Můžeme dokonce seskupit tyto čtyři dílčí vlastnosti do dvou dalších zkratkových vlastností:
| Logická vlastnost | Zkratka pro | Co to dělá |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Přijme jednu hodnotu pro nastavení obou inset-inline-starta inset-inline-end.Přijímá také dvě hodnoty, kde první určuje inset-inline-starta druhá určuje inset-inline-end. |
inset-block | inset-block-startinset-block-end | Přijme jednu hodnotu pro nastavení inset-block-start a inset-block-end.Přijímá také dvě hodnoty, kde první určuje inset-block-starta druhá určuje inset-block-end. |
Ukázka
Změňte režim zápisu a hodnoty vložených vlastností, abyste získali lepší představu o tom, jak fungují:
Pozor: insetVlastnost není logická
Ačkoli insetje součástí specifikace Logické vlastnosti a hodnoty, nedefinuje logické bloky ani inline posuny. Místo toho definuje fyzické posuny, bez ohledu na režim psaní prvku, směr a orientaci textu. Jinými slovy, insetje jen zkratka pro top, right, bottoma left.
Zde na GitHubu se diskutuje o použití některých klíčových slov, aby bylo možné tuto vlastnost používat také logicky.
Takže stále používáme fyzické posuny? Představte si, že chcete odznak nebo logo upevněné v horním a levém rohu stránky a bez ohledu na jazyk chcete, aby tam byly. V takovém případě nemůžete použít logické posuny a místo toho se budete muset uchýlit k fyzickým vlastnostem.
Podpora prohlížeče
Podpora pro insetnemovitost je stále v raných fázích. V době psaní tohoto článku odhaduje caniuse globální podporu na pouhých 3,79%.
plocha počítače
| internet Explorer | Okraj | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ne | Ne | 66+ | Ne | Ne | Ne |
mobilní, pohybliví
| iOS Safari | Opera Mini | Prohlížeč Android | Chrome pro Android | Firefox Android |
|---|---|---|---|---|
| Ne | Ne | 68 | Ne | Ne |
Více informací
- Logické vlastnosti a hodnoty CSS úrovně 1 (specifikace, koncept editora)
- Porozumění logickým vlastnostem a hodnotám (Smashing Magazine)
- Logické vlastnosti CSS (triky CSS)