Lisäys - CSS-temppuja

insetOmaisuus CSS on lyhenteenä neljän upotettavat ominaisuuksia top, right, bottomja leftyhdessä ilmoituksessa. Aivan kuten neljä yksittäistä ominaisuutta itse, insetsillä ei ole vaikutusta sijoittumattomiin (staattisiin) elementteihin. Toisin sanoen elementin on ilmoitettava eksplisiittinen positionarvo ennen kuin lisäysominaisuudet voivat tulla voimaan.

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

inset on alun perin määritelty CSS: n loogisten ominaisuuksien ja arvojen tason 1 määrittelyssä, joka on Editorin luonnoksessa 20. huhtikuuta 2020.

Syntaksi

Kuten ehkä olette kerätty Edellisessä esimerkissä insetnoudattaa samaa moniarvoisesta syntaksia paddingja margin. Se tarkoittaa, että hyväksyy peräti neljä arvoa (julistaa vaihesiirrot top, right, bottomja left) ja niin vähän kuin yksi arvo (julistaa Equal Offset kaikkien neljän ominaisuudet). Ja kuten paddingja margin, arvot virtaavat myötäpäivään alkaen 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 */ )

Aikaisemmin insetmeidän on ilmoitettava kukin insetosaomaisuus erikseen seuraavasti:

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

Nyt voimme yksinkertaisesti tehdä sen yhdelle CSS-riville:

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

Arvot

insetOmaisuuden hyväksyy numeerisia arvoja kuten ylhäällä, oikealla, alhaalla ja vasemmalla. Nuo arvot voivat olla mitä tahansa validi CSS pituus, kuten px, em, remja %muun muassa.

Puhutaan loogisista ominaisuuksista

Aion vain naarmuttaa loogisten ominaisuuksien pintaa täällä, koska todellinen painopiste on insetja siihen liittyvät aliominaisuudet. Tutustu perusteelliseen aiheeseen tässä Rachel Andrewn Smashing Magazine -artikkelissa.

On enemmän insetosa-ominaisuuksia kuin top, right, bottomja leftmutta, jotta ymmärtää niitä, se on tutustumisen arvoinen loogisia ominaisuuksia ja arvoja.

Sisältöä voidaan näyttää eri suuntiin (ts. Kirjoitustilat), mukaan lukien vasemmalta oikealle, oikealta vasemmalle, ylhäältä alas ja alhaalta ylös. Kun puhumme "loogisista" käsitteistä, viittaamme todella lähtökohtaan sisällön kirjoittamissuunnan perusteella.

Kuvittele, että rakennat verkkosivustoa, jonka on tuettava sekä vasemmalta oikealle (LTR) -kieliä, kuten englanti ja espanja, että oikealta vasemmalle (RTL), kuten persia tai arabia. Oletetaan, että haluat lisätä marginaalin kuvakkeen ja viereisen tekstin väliin.

Luonnollisesti saatat margin-rightpyrkiä omaisuuteen tukemaan LTR: ää ja lisätä sitten toisen sääntöjoukon, joka poistaa kyseisen marginaalin ja korvaa sen margin-leftRTL: llä:

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

Tämä on pieni osa sivua. Kuvittele nyt, että rakennat suuren verkkosivuston tällä tavalla - se on paljon työtä! Mutta loogiset ominaisuudet tekevät siitä hetken, kun otetaan huomioon kirjoitustila meille. Esimerkiksi voimme lisätä marginaalin elementin loppuun , missä se sattuu olemaan:

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

Tätä tarkoitamme viitatessamme loogisiin ominaisuuksiin - ne ovat suhteessa kirjoitustilaan eikä fyysiseen suuntaan. Katso kuinka loogisten ominaisuuksien kanssa on paljon loogisempaa työskennellä?

Syötä loogiset ominaisuudet

Joten, tietäen mitä tiedät nyt loogisista ominaisuuksista, tässä on neljä uutta lisäominaisuutta:

Looginen ominaisuus	Vaakasuuntainen virtausekvivalentti	Mitä se tekee
inset-block-start	top	Määrittää alkureunan siirtymän kohtisuorassa kirjoitussuuntaan nähden.
inset-block-end	bottom	Määrittää loppureunan siirtymän kohtisuorassa kirjoitussuuntaan nähden.
inset-inline-start	left	Määrittää aloitusreunan siirtymän kirjoitussuunnassa, joka kartoittaa fyysisen siirtymän elementin kirjoitustilan, suunnan ja tekstin suunnan mukaan.
inset-inline-end	right	Määrittää loppureunan siirtymän kirjoitussuunnassa.

Voimme jopa ryhmitellä nämä neljä alaominaisuutta kahteen muuhun lyhytominaisuuteen:

Looginen ominaisuus	Lyhyesti	Mitä se tekee
inset-inline	inset-inline-start inset-inline-end	Hyväksyy yksi arvo asettaa sekä inset-inline-startja inset-inline-end. Hyväksyy myös kaksi arvoa, joista ensimmäinen määrittelee inset-inline-startja toinen määrittelee inset-inline-end.
inset-block	inset-block-start inset-block-end	Hyväksyy yhden arvon asettaa sekä inset-block-start että inset-block-end. Hyväksyy myös kaksi arvoa, joista ensimmäinen määrittelee inset-block-startja toinen määrittelee inset-block-end.

Demo

Muuta lisäysominaisuuksien kirjoitustilaa ja arvoja saadaksesi paremman käsityksen niiden toiminnasta:

Huomioitavaa: insetOminaisuus ei ole looginen

Vaikka se inseton osa loogisten ominaisuuksien ja arvojen määrittelyä, se ei määritä loogisia lohkoja tai sisäisiä siirtymiä. Sen sijaan se määrittelee fyysiset siirtymät elementin kirjoitustilasta, suunnasta ja tekstin suunnasta riippumatta. Toisin sanoen, inseton vain lyhenteenä top, right, bottomja left.

GitHubissa on jonkin verran keskustelua joidenkin avainsanojen käytöstä, jotta myös tätä ominaisuutta voidaan käyttää loogisella tavalla.

Joten, käytämmekö edelleen fyysisiä siirtoja? Kuvittele, että haluat merkin tai logon kiinnitettäväksi sivusi ylä- ja vasempaan kulmaan ja kielestä riippumatta, että haluat sen olevan siellä. Siinä tapauksessa et voi käyttää loogisia siirtymiä ja sinun on sen sijaan käytettävä fyysisiä ominaisuuksia.

Selaimen tuki

Tuki insetomaisuus on vielä alkuvaiheessa. Tämän kirjoituksen jälkeen caniuse arvioi maailmanlaajuisen tuen olevan vain 3,79%.

Työpöytä

Internet Explorer	Reuna	Firefox	Kromi	Safari	Ooppera
Ei	Ei	66+	Ei	Ei	Ei

Matkapuhelin

iOS Safari	ooppera Mini	Android-selain	Chrome Android	Firefox Android
Ei	Ei	68	Ei	Ei

Lisää tietoa

• CSS: n loogisten ominaisuuksien ja arvojen taso 1 (määrittely, toimittajan luonnos)
• Loogisten ominaisuuksien ja arvojen ymmärtäminen (Smashing Magazine)
• CSS: n loogiset ominaisuudet (CSS-temput)