Betét - CSS-trükkök

Az insetingatlan CSS egy rövidítés a négy betét tulajdonságok top, right, bottomés leftegy nyilatkozatot. Csakúgy, mint maga a négy egyedi tulajdonság, insetnincs hatása a nem pozicionált (statikus) elemekre. Más szavakkal, egy elemnek explicit positionértéket kell deklarálnia, mielőtt a beillesztett tulajdonságok érvénybe léphetnek.

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

inset kezdetben a CSS Logikai tulajdonságok és értékek 1. szintű specifikációja határozza meg, amely a Szerkesztő tervezetében található 2020. április 20-án.

Szintaxis

Ahogy már összegyűltek a fenti példában insetkövetkezik, ugyanazt a multi-érték szintaxisa paddingés margin. Ez azt jelenti, hogy elfogadja kevesebb, mint négy értéket (nyilatkozni eltolását top, right, bottomés left), és mindössze egyetlen értéket (hogy állapítsa meg az egyenlő eltolás mind a négy tulajdonságok). És hasonlóan paddingés marginaz értékek az óramutató járásával megegyező irányban folynak, kezdve 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 */ )

Korábban insetminden egyes insettulajdont külön-külön kell deklarálnunk , így:

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

Most egyszerűen a CSS egyetlen vonalára tehetjük:

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

Értékek

A insettulajdonság ugyanúgy fogad el numerikus értékeket, mint a felső, a jobb, az alsó és a bal. Ezek az értékek bármilyen érvényes CSS hosszúságú, például px, em, remés %, többek között.

Beszéljünk a logikai tulajdonságokról

Itt csak a logikai tulajdonságok felületét fogjuk megkarcolni, mivel a valódi fókusz insetés a kapcsolódó résztulajdonságok vannak rajta. Alapos elmélyülés a témában Rachel Andrew ebben a Smashing Magazine cikkében.

Több insetaltulajdonsággal mint top, right, bottomés leftde ahhoz, hogy megértsük őket, akkor érdemes megismerkedni a logikai tulajdonságok és értékek.

A tartalom különböző irányokban jeleníthető meg (pl. Írási módok), beleértve a balról jobbra, jobbról balra, fentről lefelé és alulról fentre. Amikor „logikus” fogalmakról beszélünk, akkor valóban a kiindulópontra hivatkozunk a tartalom írási iránya alapján.

Képzelje el, hogy olyan weboldalt épít, amelynek támogatnia kell a balról jobbra (LTR) nyelveket, például az angol és a spanyol, valamint a jobbról balra (RTL) nyelveket, például a perzsa vagy az arab nyelvet. Tegyük fel, hogy margót akar hozzáadni egy ikon és egy mellette levő szöveg között.

Természetesen elérheti a margin-righttulajdonságot, hogy támogassa az LTR-t, majd adjon hozzá egy másik szabálykészletet, amely eltávolítja ezt a margót és lecseréli margin-leftaz RTL-re:

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

Ez egy oldal kis része. Most képzelje el, hogy ilyen módon nagy weboldalt épít - ez sok munka! De a logikai tulajdonságok egy pillanattá teszik, ha figyelembe vesszük számunkra az írás módját. Például margót adhatunk az elem végéhez , bárhol történjen is:

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

Erre gondolunk, amikor logikai tulajdonságokra hivatkozunk - ezek inkább az írási módhoz viszonyulnak, mint fizikai irányhoz. Nézze meg, hogy a logikai tulajdonságokkal sokkal logikusabb a munka?

Logikai tulajdonságok beírása

Tehát, ismerve, hogy mit tud a logikai tulajdonságokról, íme négy további beillesztett résztulajdonság:

Logikai tulajdonság	Vízszintes áramlás egyenértékű	Mit csinál
inset-block-start	top	Megadja a kezdőél eltolását abban az irányban, amely merőleges az írási irányra.
inset-block-end	bottom	Megadja a végél eltolását abban az irányban, amely merőleges az írási irányra.
inset-inline-start	left	Megadja a kezdőél eltolását az írás irányában, amely egy fizikai eltoláshoz térképez az elem írásmódjától, irányától és a szöveg tájolásától függően.
inset-inline-end	right	Megadja az írásirányú végél eltolását.

Ezt a négy altulajdonságot akár két további gyors tulajdonságba is csoportosíthatjuk:

Logikai tulajdonság	Gyorsírás	Mit csinál
inset-inline	inset-inline-start inset-inline-end	Egyetlen értéket fogad el a inset-inline-startés a beállításához inset-inline-end. Két értéket is elfogad, ahol az első meghatározza inset-inline-start, a második pedig inset-inline-end.
inset-block	inset-block-start inset-block-end	Egyetlen értéket fogad el a inset-block-start és a beállításához inset-block-end. Két értéket is elfogad, ahol az első meghatározza inset-block-start, a második pedig inset-block-end.

Demó

Módosítsa a beillesztett tulajdonságok írási módját és értékeit, hogy jobb képet kapjon a működésükről:

Figyelem: A insettulajdonság nem logikus

Bár insetrésze a Logikai tulajdonságok és értékek specifikációnak, nem határoz meg logikai blokkot vagy inline eltolást. Ehelyett fizikai eltolódásokat határoz meg, függetlenül az elem írásmódjától, irányától és a szöveg tájolásától. Más szóval, insetcsak rövidítés top, right, bottomés left.

Itt van egy vita a GitHubon néhány kulcsszó használatával kapcsolatban, hogy ezt a tulajdonságot is logikusan lehessen használni.

Tehát mégis használunk fizikai ellentételezéseket? Képzelje el, hogy szeretne egy jelvényt vagy logót rögzíteni az oldalának felső és bal sarkába, és bármi legyen is a nyelv, azt szeretné, hogy ott legyen. Ebben az esetben nem használhat logikai eltolásokat, és inkább fizikai tulajdonságokhoz kell folyamodnia.

Böngésző támogatás

Az insetingatlan támogatása még mindig a kezdeti szakaszban van. Jelen írásban a caniuse a globális támogatást csupán 3,79% -ra becsüli.

Asztal

internet böngésző	Él	Firefox	Króm	Szafari	Opera
Nem	Nem	66+	Nem	Nem	Nem

Mobil

iOS Safari	Opera Mini	Android böngésző	Chrome Android	Firefox Android
Nem	Nem	68	Nem	Nem

Több információ

• CSS logikai tulajdonságok és értékek 1. szint (specifikáció, szerkesztő tervezete)
• A logikai tulajdonságok és értékek megértése (Smashing Magazine)
• CSS logikai tulajdonságok (CSS-trükkök)