Het insetpand in CSS is een afkorting voor de vier inzet eigenschappen, top, right, bottomen leftin een verklaring. insetHeeft net als de vier individuele eigenschappen zelf geen effect op niet-gepositioneerde (statische) elementen. Met andere woorden, een element moet een expliciete positionwaarde declareren voordat inset-eigenschappen van kracht kunnen worden.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset wordt aanvankelijk gedefinieerd in de CSS Logical Properties and Values Level 1-specificatie, die in Editor's Draft staat vanaf 20 april 2020.
Syntaxis
Zoals je misschien hebt opgemaakt uit het bovenstaande voorbeeld, insetvolgt dezelfde syntaxis met meerdere waarden van paddingen margin. Dat betekent accepteert wel vier waarden (te verklaren offsets voor top, right, bottomen left) en zo weinig als één waarde (verklaren gelijke verschuiving voor alle vier eigenschappen). En, net als paddingen margin, stromen de waarden met de klok mee, te beginnen met 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 */ )Vroeger insetmoesten we elke insetsub-eigenschap apart declareren , als volgt:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Nu kunnen we dat eenvoudig doen naar een enkele regel CSS:
.box ( position: absolute; inset: 0; /* ? */ )Waarden
De inseteigenschap accepteert numerieke waarden net als boven, rechts, onder en links. Die waarden kan elke geldige CSS lengte zijn, zoals px, em, remen %, onder anderen.
Laten we het hebben over logische eigenschappen
We gaan hier gewoon de oppervlakte van logische eigenschappen bespreken, aangezien de echte focus ligt op inseten de gerelateerde subeigenschappen. Krijg een grondige diepe duik over het onderwerp in dit Smashing Magazine-artikel van Rachel Andrew.
Er zijn meer insetsub-eigenschappen dan top, right, bottomen leftmaar om ze te begrijpen, het is de moeite waard om kennis te maken met logische eigenschappen en waarden.
Inhoud kan in verschillende richtingen worden weergegeven (dwz schrijfmodi), inclusief van links naar rechts, van rechts naar links, van boven naar beneden en van beneden naar boven. Als we het hebben over 'logische' concepten, verwijzen we eigenlijk naar het startpunt op basis van de schrijfrichting van de inhoud.
Stel je voor dat je een website bouwt die zowel links-naar-rechts (LTR) talen moet ondersteunen, zoals Engels en Spaans, als rechts-naar-links (RTL) talen, zoals Perzisch of Arabisch. Stel dat u een marge wilt toevoegen tussen een pictogram en een regel tekst ernaast.
U kunt natuurlijk naar de margin-righteigenschap grijpen om LTR te ondersteunen, en vervolgens een andere regelset toevoegen die die marge verwijdert en vervangt margin-leftdoor RTL:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )Dit is een klein deel van een pagina. Stel je nu voor dat je op deze manier een grote website bouwt - dat is veel werk! Maar logische eigenschappen maken het een fluitje van een cent door voor ons rekening te houden met de schrijfmodus. We kunnen bijvoorbeeld een marge toevoegen aan het einde van het element, waar dat ook is:
.icon ( margin-inline-end: 1em; )
Dit is wat we bedoelen als we verwijzen naar logische eigenschappen - ze zijn relatief ten opzichte van de schrijfmodus in plaats van een fysieke richting. Zie je hoe logische eigenschappen veel logischer zijn om mee te werken?
Leg logische eigenschappen in
Dus, wetende wat u nu weet over logische eigenschappen, zijn hier vier aanvullende sub-eigenschappen voor inset:
| Logische eigenschap | Equivalent horizontale stroom | Wat het doet |
|---|---|---|
inset-block-start | top | Specificeert de offset voor de beginrand in de richting die loodrecht staat op de schrijfrichting. |
inset-block-end | bottom | Specificeert de offset voor de eindrand in de richting die loodrecht staat op de schrijfrichting. |
inset-inline-start | left | Specificeert de offset voor de beginrand in de schrijfrichting, die wordt toegewezen aan een fysieke offset, afhankelijk van de schrijfmodus, richting en tekstoriëntatie van het element. |
inset-inline-end | right | Specificeert de offset voor de eindrand in de schrijfrichting. |
We kunnen die vier subeigenschappen zelfs groeperen in twee aanvullende steno-eigenschappen:
| Logische eigenschap | Afkorting voor | Wat het doet |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Accepteert een enkele waarde om beide in te stellen inset-inline-starten inset-inline-end.Accepteert ook twee waarden, waarbij de eerste specificeert inset-inline-starten de tweede specificeert inset-inline-end. |
inset-block | inset-block-startinset-block-end | Accepteert een enkele waarde om zowel inset-block-start als in te stellen inset-block-end.Accepteert ook twee waarden, waarbij de eerste specificeert inset-block-starten de tweede specificeert inset-block-end. |
Demo
Wijzig de schrijfmodus en waarden van inset-eigenschappen om een beter idee te krijgen van hoe ze werken:
Let op: de inseteigenschap is niet logisch
Hoewel het insetdeel uitmaakt van de Logical Properties and Values-specificatie, definieert het geen logische blok- of inline offsets. In plaats daarvan worden fysieke offsets gedefinieerd, ongeacht de schrijfmodus, richting en tekstoriëntatie van het element. Met andere woorden, insetis gewoon afkorting voor top, right, bottomen left.
Er is hier op GitHub enige discussie over het gebruik van enkele sleutelwoorden om deze eigenschap ook op een logische manier te kunnen gebruiken.
Dus, gebruiken we nog steeds fysieke offsets? Stel u voor dat u een badge of een logo in de linkerboven- en bovenhoek van uw pagina wilt hebben en, ongeacht de taal, wilt dat deze daar aanwezig is. In dat geval kunt u geen logische offsets gebruiken en moet u in plaats daarvan toevlucht nemen tot fysieke eigenschappen.
Browser-ondersteuning
Ondersteuning voor het insetpand staat nog in de kinderschoenen. Op het moment van schrijven schat caniuse de wereldwijde ondersteuning op slechts 3,79%.
Bureaublad
| Internet Explorer | Rand | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nee | Nee | 66+ | Nee | Nee | Nee |
Mobiel
| iOS Safari | Opera Mini | Android-browser | Chrome Android | Firefox Android |
|---|---|---|---|---|
| Nee | Nee | 68 | Nee | Nee |
Meer informatie
- CSS logische eigenschappen en waarden niveau 1 (specificatie, concept van de redacteur)
- Logische eigenschappen en waarden begrijpen (Smashing Magazine)
- CSS Logische Eigenschappen (CSS-Tricks)