Infälld - CSS-tricks

Den insetegendom i CSS är en förkortning för de fyra infällda egenskaper top, right, bottomoch lefti ett uttalande. Precis som de fyra enskilda egenskaperna insethar de ingen effekt på icke-placerade (statiska) element. Med andra ord måste ett element deklarera ett uttryckligt positionvärde innan infällda egenskaper kan träda i kraft.

.box ( inset: 10px 20px 30px 40px; position: relative; )

inset definieras ursprungligen i CSS Logical Properties and Values ​​Level 1-specifikationen, som finns i Editor's Draft från och med den 20 april 2020.

Syntax

Som du kanske har samlat från exemplet ovan insetföljer samma syntax av flera värden för paddingoch margin. Det betyder att det tar emot så många som fyra värden (till DECLARE förskjutningar för top, right, bottomoch left) och så få som en värde (för att förklara ett Equal offset för alla fyra egenskaper). Och, som paddingoch margin, värdena flyter medurs, från och med 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 */ )

Innan inset, skulle vi behöva deklarera varje insetsub-egendom separat, så här:

.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )

Nu kan vi helt enkelt göra det till en rad CSS:

.box ( position: absolute; inset: 0; /* ? */ )

Värden

Den insetfastighet accepterar numeriska värden precis som topp, höger, botten och vänster. Dessa värden kan vara någon giltig CSS längd, såsom px, em, remoch %, bland annat.

Låt oss prata om logiska egenskaper

Vi ska bara skrapa ytan på logiska egenskaper här eftersom det verkliga fokuset är på insetoch dess relaterade underegenskaper. Få en grundlig djupdykning om ämnet i denna Smashing Magazine-artikel av Rachel Andrew.

Det finns fler insetunder egenskaper än top, right, bottomoch leftmen för att förstå dem, att få det är värt förtrogen med logiska egenskaper och värderingar.

Innehållet kan visas i olika riktningar (dvs. skrivlägen), inklusive vänster-till-höger, höger-till-vänster, topp-till-botten och botten-till-topp. När vi pratar om "logiska" begrepp hänvisar vi verkligen till utgångspunkten baserat på innehållets skrivriktning.

Tänk dig att du bygger en webbplats som behöver stödja både vänster-till-höger-språk (LTR), som engelska och spanska, och höger-till-vänster-språk (RTL), som persiska eller arabiska. Låt oss säga att du vill lägga till en marginal mellan en ikon och en radtext bredvid den.

Naturligtvis kan du nå för margin-rightfastigheten för att stödja LTR och sedan lägga till en annan regleruppsättning som tar bort marginalen och ersätter den med margin-leftför RTL:

.icon ( margin-right: 1em; ) 
 /* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )

Det här är en liten del av en sida. Tänk dig att bygga en stor webbplats på det här sättet - det är mycket arbete! Men logiska egenskaper gör det enkelt genom att ta hänsyn till skrivläget för oss. Till exempel kan vi lägga till marginal i slutet av elementet, varhelst det råkar vara:

.icon ( margin-inline-end: 1em; )

Detta är vad vi menar när vi hänvisar till logiska egenskaper - de är relativt skrivläget snarare än en fysisk riktning. Se hur logiska egenskaper är mycket mer logiska att arbeta med?

Infogade logiska egenskaper

Så att veta vad du nu vet om logiska egenskaper, här är ytterligare fyra underegenskaper:

Logisk egendom	Horisontellt flöde ekvivalent	Vad den gör
inset-block-start	top	Anger förskjutningen för startkanten i den riktning som är vinkelrät mot skrivriktningen.
inset-block-end	bottom	Anger förskjutningen för ändkanten i riktningen som är vinkelrät mot skrivriktningen.
inset-inline-start	left	Anger förskjutningen för startkanten i skrivriktningen, som kartläggs till en fysisk förskjutning beroende på elementets skrivläge, riktning och textorientering.
inset-inline-end	right	Anger förskjutningen för slutkanten i skrivriktningen.

Vi kan till och med gruppera de fyra delegenskaperna i ytterligare två stenografiska egenskaper:

Logisk egendom	Shorthand For	Vad den gör
inset-inline	inset-inline-start inset-inline-end	Accepterar ett enda värde för att ställa in både inset-inline-startoch inset-inline-end. Accepterar också två värden, där det första anger inset-inline-startoch det andra anger inset-inline-end.
inset-block	inset-block-start inset-block-end	Accepterar ett enda värde för att ställa in både inset-block-start och inset-block-end. Accepterar också två värden, där det första anger inset-block-startoch det andra anger inset-block-end.

Demo

Ändra skrivläge och värden för infällda egenskaper för att få en bättre uppfattning om hur de fungerar:

Kör upp: insetFastigheten är inte logisk

Även om det insetär en del av specifikationen för logiska egenskaper och värden definieras inte logiska block- eller inline-förskjutningar. Istället definierar den fysiska förskjutningar, oavsett elementets skrivläge, riktning och textorientering. Med andra ord, insetär bara förkortning för top, right, bottomoch left.

Det finns en del diskussion här på GitHub angående användningen av vissa nyckelord för att kunna använda den här egenskapen också på ett logiskt sätt.

Så använder vi fortfarande fysiska förskjutningar? Tänk dig att du vill ha ett märke eller en logotyp fast i det övre och vänstra hörnet på din sida och oavsett språk, vill du att den ska vara där. I så fall kan du inte använda logiska förskjutningar och måste använda fysiska egenskaper istället.

Webbläsarstöd

Stöd för insetfastigheten är fortfarande i ett tidigt skede. När detta skrivs uppskattar caniuse globalt stöd till bara 3,79%.

Skrivbord

Internet Explorer	Kant	Firefox	Krom	Safari	Opera
Nej	Nej	66+	Nej	Nej	Nej

Mobil

iOS Safari	Opera Mini	Android-webbläsare	Chrome Android	Firefox Android
Nej	Nej	68	Nej	Nej

Mer information

• CSS logiska egenskaper och värden nivå 1 (specifikation, redaktörens utkast)
• Förstå logiska egenskaper och värderingar (Smashing Magazine)
• CSS logiska egenskaper (CSS-Tricks)