insetNehnuteľnosť v CSS je skratka pre štyri vložené vlastnosti, top, right, bottoma leftv jednom vyhlásení. Rovnako ako samotné štyri jednotlivé vlastnosti, insetnemá žiadny vplyv na neumiestnené (statické) prvky. Inými slovami, prvok musí deklarovať explicitnú positionhodnotu, aby sa vložené vlastnosti prejavili.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset je pôvodne definované v špecifikácii úrovne logických vlastností a hodnôt CSS 1, ktorá je v koncepte editora od 20. apríla 2020.
Syntax
Ako ste sa už mohli dozvedieť z vyššie uvedeného príkladu, insetpostupuje sa rovnakou viachodnotovou syntaxou znakov paddinga margin. To znamená, že prijíma toľko ako štyri hodnoty (vyhlásiť prelisy pre top, right, bottoma left) i napríklad len jednej hodnoty (deklarovať sa rovnať offset pre všetky štyri vlastnosti). A ako paddinga margin, hodnoty tečú v smere hodinových ručičiek, počnúc 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 */ )Predtým insetby sme museli každú insetpodvlastnosť deklarovať osobitne, napríklad takto:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Teraz to môžeme jednoducho urobiť na jeden riadok CSS:
.box ( position: absolute; inset: 0; /* ? */ )Hodnoty
insetVlastnosť prijíma číselné hodnoty, rovnako ako hore, vpravo, dole a vľavo. Tieto hodnoty môžu byť ľubovoľná platná dĺžka CSS, ako je napríklad px, em, rema %, medzi ostatnými.
Hovorme o logických vlastnostiach
Iba tu poškriabeme povrch logických vlastností, pretože sa sústreďujeme na insetich súvisiace podvlastnosti. Získajte dôkladný ponor do tejto témy v tomto článku Rachel Andrewovej v kategórii Smashing Magazine.
Existuje viac insetpodvlastnosti ako top, right, bottoma left, ale aby ich pochopili, že to stojí za zoznámenie s logickými vlastnosťami a hodnotami.
Obsah je možné zobraziť v rôznych smeroch (tj. Režimy písania), vrátane zľava doprava, sprava doľava, zhora nadol a zdola nahor. Keď hovoríme o „logických“ konceptoch, máme na mysli skutočne východiskový bod na základe smeru písania obsahu.
Predstavte si, že budujete web, ktorý musí podporovať jazyky zľava doprava (LTR), ako je angličtina a španielčina, aj jazyky sprava doľava (RTL), ako perzština alebo arabčina. Povedzme, že chcete pridať okraj medzi ikonu a riadkový text vedľa nej.
Prirodzene, môžete siahnuť po margin-rightvlastnosti, ktorá podporuje LTR, a potom pridať ďalšiu množinu pravidiel, ktorá túto hranicu odstráni a nahradí ju margin-leftpre RTL:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )Toto je malá časť stránky. Teraz si predstavte, že by ste takýmto spôsobom vytvorili veľkú webovú stránku - to je veľa práce! Ale logické vlastnosti z toho robia hračku, keď vezmeme do úvahy režim písania. Napríklad môžeme pridať okraj na koniec prvku, nech už sa to stane kdekoľvek:
.icon ( margin-inline-end: 1em; )
To máme na mysli, keď hovoríme o logických vlastnostiach - sú relatívne skôr k režimu písania ako k fyzickému smeru. Pozrieť sa na to, ako logickejšie vlastnosti sú logické pre prácu?
Vložiť logické vlastnosti
Ak viete, čo teraz viete o logických vlastnostiach, sú tu ďalšie štyri vložené čiastkové vlastnosti:
| Logické vlastníctvo | Ekvivalent vodorovného toku | Čo to robí |
|---|---|---|
inset-block-start | top | Určuje odsadenie začiatočnej hrany v smere, ktorý je kolmý na smer písania. |
inset-block-end | bottom | Určuje odsadenie koncovej hrany v smere, ktorý je kolmý na smer písania. |
inset-inline-start | left | Určuje posun počiatočnej hrany v smere zápisu, ktorý sa mapuje na fyzické posunutie v závislosti od režimu písania prvku, smeru a orientácie textu. |
inset-inline-end | right | Určuje odsadenie koncovej hrany v smere zápisu. |
Tieto štyri čiastkové vlastnosti môžeme dokonca zoskupiť do dvoch ďalších stenografických vlastností:
| Logické vlastníctvo | Skratka pre | Čo to robí |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Prijíma jednu hodnotu a nastavuje obidve inset-inline-starta inset-inline-end.Prijíma tiež dve hodnoty, kde prvá určuje inset-inline-starta druhá určuje inset-inline-end. |
inset-block | inset-block-startinset-block-end | Prijíma jednu hodnotu na nastavenie inset-block-start a inset-block-end.Prijíma tiež dve hodnoty, kde prvá určuje inset-block-starta druhá určuje inset-block-end. |
Ukážka
Zmeňte režim zápisu a hodnoty vložených vlastností, aby ste získali lepšiu predstavu o ich fungovaní:
Upozornenie: Táto insetvlastnosť nie je logická
Aj keď insetje súčasťou špecifikácie Logické vlastnosti a hodnoty, nedefinuje logické bloky ani vložené posuny. Namiesto toho definuje fyzické posuny bez ohľadu na režim písania, smer a orientáciu textu prvku. Inými slovami, insetje len skratka pre top, right, bottoma left.
Na serveri GitHub sa vedie diskusia o použití niektorých kľúčových slov, aby bolo možné túto vlastnosť používať aj logicky.
Takže stále používame fyzické vyrovnania? Predstavte si, že chcete mať odznak alebo logo pripevnené v hornom a ľavom rohu stránky a bez ohľadu na jazyk chcete, aby tam boli. V takom prípade nemôžete použiť logické vyrovnania a budete sa musieť uchýliť k fyzikálnym vlastnostiam.
Podpora prehľadávača
Podpora pre insetnehnuteľnosť je stále v počiatočných fázach. V čase písania tohto článku odhaduje spoločnosť caniuse globálnu podporu na iba 3,79%.
Desktop
| internet Explorer | Hrana | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nie | Nie | 66+ | Nie | Nie | Nie |
Mobilné
| iOS Safari | Opera Mini | Prehliadač Android | Chrome pre Android | Firefox Android |
|---|---|---|---|---|
| Nie | Nie | 68 | Nie | Nie |
Viac informácií
- Logické vlastnosti a hodnoty CSS úrovne 1 (špecifikácia, redakčný koncept)
- Pochopenie logických vlastností a hodnôt (Smashing Magazine)
- Logické vlastnosti CSS (triky CSS)