Indsat - CSS-tricks

Den insetejendom i CSS er en forkortelse for de fire indsatte egenskaber, top, right, bottomog lefti en erklæring. Ligesom de fire individuelle egenskaber insethar den ingen effekt på ikke-placerede (statiske) elementer. Med andre ord skal et element deklarere en eksplicit positionværdi, før de indsatte egenskaber kan træde i kraft.

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

inset er oprindeligt defineret i CSS logiske egenskaber og værdier niveau 1 specifikation, som er i Editor's Draft fra 20. april 2020.

Syntaks

Som du måske har samlet fra eksemplet ovenfor, insetfølger den samme syntaks med flere værdier for paddingog margin. Det betyder at det accepterer så mange som fire værdier (at erklære forskydninger til top, right, bottomog left), og så få som én værdi (at erklære en lige offset for alle fire egenskaber). Og ligesom paddingog marginværdierne strømmer med uret, begyndende 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 insetskulle vi erklære hver insetunderejendom separat, sådan:

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

Nu kan vi simpelthen gøre det til en enkelt linje af CSS:

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

Værdier

Den insetejendom accepterer numeriske værdier ligesom toppen, højre og bund og venstre. Disse værdier kan være en hvilken som helst gyldigt CSS længde, såsom px, em, remog %, blandt andre.

Lad os tale om logiske egenskaber

Vi skal bare skrabe overfladen af ​​logiske egenskaber her, da det reelle fokus er på insetog dets relaterede underegenskaber. Få et grundigt dybdyk om emnet i denne Smashing Magazine-artikel af Rachel Andrew.

Der er flere insetsub-egenskaber end top, right, bottomog leftmen, for at forstå dem, at få det værd bekendt med logiske egenskaber og værdier.

Indholdet kan vises i forskellige retninger (dvs. skrivemetoder), inklusive venstre mod højre, højre mod venstre, top til bund og bund til top. Når vi taler om ”logiske” begreber, henviser vi virkelig til udgangspunktet baseret på indholdet af skriveretningen.

Forestil dig, at du bygger et websted, der skal understøtte både venstre mod højre (LTR) sprog, som engelsk og spansk, og højre til venstre (RTL) sprog, som persisk eller arabisk. Lad os sige, at du vil tilføje en margen mellem et ikon og en linjetekst ud for det.

Naturligvis kan du muligvis nå ud til margin-rightejendommen for at understøtte LTR og derefter tilføje endnu et regelsæt, der fjerner margenen 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 lille del af en side. Forestil dig nu at bygge et stort websted på denne måde - det er meget arbejde! Men logiske egenskaber gør det et øjeblik ved at tage skrivemåden i betragtning for os. For eksempel kan vi tilføje margen til slutningen af elementet, uanset hvor det sker:

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

Dette er hvad vi mener, når vi henviser til logiske egenskaber - de er i forhold til skrivetilstanden snarere end en fysisk retning. Se hvordan logiske egenskaber er meget mere logiske at arbejde med?

Indsatte logiske egenskaber

Så ved at vide, hvad du nu ved om logiske egenskaber, er her fire yderligere indsatte underegenskaber:

Logisk ejendom	Vandret flowækvivalent	Hvad det gør
inset-block-start	top	Angiver forskydningen for startkanten i den retning, der er vinkelret på skriveretningen.
inset-block-end	bottom	Specificerer forskydning for slutkant i den retning, der er vinkelret på skriveretningen.
inset-inline-start	left	Angiver forskydningen for startkanten i skriveretningen, som kortlægges til en fysisk forskydning afhængigt af elementets skrivemåde, retning og tekstretning.
inset-inline-end	right	Angiver forskydningen for slutkanten i skriveretningen.

Vi kan endda gruppere disse fire underejendomme i to yderligere stenografiske egenskaber:

Logisk ejendom	Shorthand For	Hvad det gør
inset-inline	inset-inline-start inset-inline-end	Accepterer en enkelt værdi for at indstille både inset-inline-startog inset-inline-end. Accepterer også to værdier, hvor den første angiver inset-inline-startog den anden angiver inset-inline-end.
inset-block	inset-block-start inset-block-end	Accepterer en enkelt værdi for at indstille både inset-block-start og inset-block-end. Accepterer også to værdier, hvor den første angiver inset-block-startog den anden angiver inset-block-end.

Demo

Skift skrivemåde og værdier for indsatte egenskaber for at få en bedre idé om, hvordan de fungerer:

Heads up: insetEjendommen er ikke logisk

Selvom det inseter en del af specifikationen for logiske egenskaber og værdier, definerer det ikke logiske blok- eller inline-forskydninger. I stedet definerer den fysiske forskydninger uanset elementets skrivemåde, retning og tekstorientering. Med andre ord, inseter bare forkortelse for top, right, bottomog left.

Der er en del diskussion her på GitHub angående brugen af ​​nogle nøgleord for også at kunne bruge denne egenskab på en logisk måde.

Så bruger vi stadig fysiske forskydninger? Forestil dig, at du vil have et badge eller et logo fastgjort i øverste og venstre hjørne af din side, og uanset sprog skal du have det til at være der. I så fald kan du ikke bruge logiske forskydninger og bliver nødt til at ty til fysiske egenskaber i stedet.

Browsersupport

Support til insetejendommen er stadig i sin tidlige fase. I skrivende stund estimerer caniuse global støtte til kun 3,79%.

Desktop

Internet Explorer	Edge	Firefox	Chrome	Safari	Opera
Ingen	Ingen	66+	Ingen	Ingen	Ingen

Mobil

iOS Safari	Opera Mini	Android-browser	Chrome Android	Firefox Android
Ingen	Ingen	68	Ingen	Ingen

Mere information

• CSS logiske egenskaber og værdier niveau 1 (specifikation, redaktørens kladde)
• Forståelse af logiske egenskaber og værdier (Smashing Magazine)
• CSS logiske egenskaber (CSS-tricks)