Innfelt - CSS-triks

Den inseteiendom i CSS er en forkortelse for de fire innfelte egenskaper top, right, bottomog lefti en erklæring. Akkurat som de fire individuelle egenskapene, insethar det ingen effekt på ikke-posisjonerte (statiske) elementer. Med andre ord, et element må erklære en eksplisitt positionverdi før innsatte egenskaper kan tre i kraft.

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

inset er opprinnelig definert i CSS Logical Properties and Values ​​Level 1 spesifikasjonen, som er i Editor's Draft fra 20. april 2020.

Syntaks

Som du kanskje har samlet fra eksemplet ovenfor, insetfølger den samme flerverdisyntaks av paddingog margin. Det betyr at det aksepterer så mange som fire verdier (for å erklære forskyvninger for top, right, bottomog left) og så få som én verdi (for å erklære en like stor forskyvning for alle fire egenskaper). Og som paddingog margin, verdiene flyter med urviseren, og begynner 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 */ )

Før måtte insetvi erklære hver insetundereiendom separat, slik:

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

Nå kan vi ganske enkelt gjøre det til en enkelt linje med CSS:

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

Verdier

Den inseteiendommen aksepterer numeriske verdier akkurat som topp, høyre, nederst og venstre. Disse verdiene kan være hvilken som helst gyldig CSS lengde, for eksempel px, em, remog %, blant andre.

La oss snakke om logiske egenskaper

Vi skal bare skrape overflaten av logiske egenskaper her siden det virkelige fokuset er på insetog dets relaterte underegenskaper. Få et grundig dykk i emnet i denne Smashing Magazine-artikkelen av Rachel Andrew.

Det er flere insetsub-egenskaper enn top, right, bottomog leftmen, for å forstå dem, det er verdt å bli kjent med logiske egenskaper og verdier.

Innholdet kan vises i forskjellige retninger (dvs. skrivemodus), inkludert venstre mot høyre, høyre mot venstre, topp til bunn og bunn til topp. Når vi snakker om "logiske" begreper, refererer vi virkelig til utgangspunktet basert på skriveretningen til innholdet.

Tenk deg at du bygger et nettsted som trenger å støtte både venstre til høyre (LTR) språk, som engelsk og spansk, og høyre til venstre (RTL) språk, som persisk eller arabisk. La oss si at du vil legge til en margin mellom et ikon og en linjetekst ved siden av det.

Naturligvis kan du nå ut til margin-righteiendommen for å støtte LTR, og deretter legge til et nytt regelsett som fjerner marginen og erstatter den med margin-leftfor RTL:

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

Dette er en liten del av en side. Tenk deg å bygge et stort nettsted på denne måten - det er mye arbeid! Men logiske egenskaper gjør det enkelt ved å ta skrivemodusen i betraktning for oss. For eksempel kan vi legge til margin på slutten av elementet, uansett hvor det skjer:

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

Dette er hva vi mener når vi refererer til logiske egenskaper - de er relativt til skrivemodus snarere enn en fysisk retning. Se hvordan logiske egenskaper er mye mer logiske å jobbe med?

Innfelt logiske egenskaper

Så, når du vet hva du nå vet om logiske egenskaper, er det fire ekstra underegenskaper:

Logisk eiendom	Horisontal flytekvivalent	Hva det gjør
inset-block-start	top	Spesifiserer forskyvning for startkanten i retningen som er vinkelrett på skriveretningen.
inset-block-end	bottom	Spesifiserer forskyvning for endekanten i retningen som er vinkelrett på skriveretningen.
inset-inline-start	left	Spesifiserer forskyvning for startkanten i skriveretningen, som tilordnes til en fysisk forskyvning avhengig av elementets skrivemodus, retning og tekstretning.
inset-inline-end	right	Spesifiserer forskyvning for sluttkanten i skriveretningen.

Vi kan til og med gruppere de fire underegenskapene i to ytterligere stenografiske egenskaper:

Logisk eiendom	Shorthand For	Hva det gjør
inset-inline	inset-inline-start inset-inline-end	Godtar en enkelt verdi for å stille både inset-inline-startog inset-inline-end. Godtar også to verdier, der den første spesifiserer inset-inline-startog den andre spesifiserer inset-inline-end.
inset-block	inset-block-start inset-block-end	Godtar en enkelt verdi for å sette både inset-block-start og inset-block-end. Godtar også to verdier, der den første spesifiserer inset-block-startog den andre spesifiserer inset-block-end.

Demo

Endre skrivemodus og verdier for innlagte egenskaper for å få et bedre inntrykk av hvordan de fungerer:

Heads up: insetEiendommen er ikke logisk

Selv om det inseter en del av spesifikasjonen for logiske egenskaper og verdier, definerer den ikke logiske blokk- eller inline-forskyvninger. I stedet definerer den fysiske forskyvninger, uavhengig av elementets skrivemodus, retning og tekstorientering. Med andre ord, inseter bare forkortelse for top, right, bottomog left.

Det er noen diskusjoner her på GitHub angående bruken av noen nøkkelord for å kunne bruke denne egenskapen på en logisk måte.

Så bruker vi fortsatt fysiske forskyvninger? Tenk deg at du vil ha et merke eller en logo festet øverst og til venstre på siden, og uansett språk, vil du at den skal være der. I så fall kan du ikke bruke logiske forskyvninger, og du må ty til fysiske egenskaper i stedet.

Nettleserstøtte

Støtte for inseteiendommen er fremdeles i en tidlig fase. I skrivende stund estimerer caniuse global støtte til bare 3,79%.

Desktop

Internet Explorer	Kant	Firefox	Chrome	Safari	Opera
Nei	Nei	66+	Nei	Nei	Nei

Mobil

iOS Safari	Opera Mini	Android-nettleser	Chrome Android	Firefox Android
Nei	Nei	68	Nei	Nei

Mer informasjon

• CSS logiske egenskaper og verdier nivå 1 (spesifikasjon, redaktørens utkast)
• Forstå logiske egenskaper og verdier (Smashing Magazine)
• CSS logiske egenskaper (CSS-triks)