A tárolólekérdezések használata CSS-ben

Sokáig a médialekérdezések voltak az egyetlen módja annak, hogy a felhasználói felületek érzékenyek legyenek a különböző képernyőméreteken. De még ennek is megvoltak a korlátai. A médialekérdezések használatával kapcsolatos egyik legnagyobb probléma az volt, hogy egy elemet csak a képernyő méretének változásaira lehetett stílusozni, a legközelebbi tárolóelemet nem.

A probléma megoldására konténeres lekérdezéseket vezettek be. Az olyan keretrendszerek, mint a React és a Vue.js népszerűsége is megnőtt, amelyek moduláris felhasználói felületi "komponensek" létrehozásával működnek. Ismerje meg, hogyan használhat tárolólekérdezéseket adaptív elemek létrehozásához a CSS-ben.

A cikkben használt kód itt érhető el GitHub adattár és az MIT licence alapján ingyenesen használható.

Miért érdemes CSS-tárolólekérdezéseket használni?

A konténerlekérdezések fontosságának megértéséhez használjunk egy példát, amely megkönnyíti a fogalom megértését. De először ebből kell klónoznia az indítókódot

GitHub adattár.

Miután sikeresen klónozta a repót, futtassa a kódot. A következő képhez hasonló weboldalt talál:

Itt van egy rács elrendezés, amely két oszlopból áll: a fő részből és az oldalsávból. A fő rész jól néz ki, de az oldalsáv (amely sokkal kisebb, mint a fő tartalom) kissé összenyomottnak tűnik.

Az elrendezés reszponzív. Ha összehúzza a böngészőt, láthatja, hogy a kártya függőleges oszlopmá alakul:

Más szóval, amikor a tartalom kezd olvashatatlanná válni, az elrendezés függőleges oszlopmá alakul, ahol a kép a tartalom tetejére kerül. Ez a hatás a médialekérdezések eredményeként jön létre, és csak így határozhatja meg az elemek méretét a képernyő teljes mérete alapján.

Ebben az esetben, amikor a képernyő 800 képpontnál kisebb, mindent egymásra helyez Flexbox igazítás. Nagyobb képernyőkön egymás mellé helyezzük a tartalmat:

@média(max. szélesség: 800 képpont) {
.kártya {
flex-irány: oszlop;
 }
.kártya-fejléc { 
szélesség: 100%;
 }
}

A leghosszabb ideig a médialekérdezések voltak az egyik fő webdesign alapelvei reszponzív elrendezések létrehozásához CSS-sel (és ez a legtöbb dologhoz elég jó). De biztosan belefuthat olyan helyzetekbe, amikor a médialekérdezések egyszerűen nem lesznek elegendőek, vagy legalábbis nem lesznek kényelmes megoldások.

Az egyik ilyen forgatókönyv az, amikor van egy oldalsáv (ahogyan a fenti példában tesszük). Ezekben az esetekben, amikor van oldalsávja, közvetlenül ki kell választania az oldalsáv kártyáját, és meg kell próbálnia kicsinyíteni:

.oldalsáv.kártya {
/* Az oldalsáv kártya kicsinyítése */
}
@média(max. szélesség: 800 képpont) {
/* Az oldal stílusának beállítása, ha a képernyő keskenyebb 800 képpontnál */
}

Ez meglehetősen bonyolult lehet, ha sok elemmel dolgozik, mert az összes elemet manuálisan kell kijelölnie és átméreteznie. A végén több kódot és extra bonyolultságot kapna.

Itt lehetnek hasznosak a konténerlekérdezések. Ahelyett, hogy a nézetablakot használná méretezésként, az oldalon lévő bármely elemet használhatja tárolóként. Ezután a tárolónak saját szélessége lehet, amelyre a médialekérdezéseket alapozhatja.

Konténerlekérdezés létrehozása

Tárolólekérdezés létrehozásához először célozza meg a tárolóként használni kívánt elemet (ebben az esetben a fő szakaszt és az oldalsávot). A blokkon belül be kell állítani a konténer típusú nak nek soros méretű:

fő-, .oldalsáv {
konténer típusú: soros méretű
}

A CSS-fájl mentésekor semmi sem változik az oldalon. De most már használhatja a tárolólekérdezéseket a fő szakaszban és az oldalsávban beágyazott kártyák átméretezésére és stílusának megváltoztatására. A következő tárolólekérdezésben a kártyákat függőleges oszlopokra változtatja a legfeljebb 500 képpont szélességű képernyőkön:

@tartály(max. szélesség: 500 képpont) {
.kártya {
flex-irány: oszlop;
 }
.kártya-fejléc {
szélesség: 100%;
 }
}

Ez normál médialekérdezésként fog működni. De a képernyő méretének mérése helyett a tárolók méretét méri (fő és oldalsáv). Így most, ha a tárolója 500 képpont vagy nagyobb, a vízszintes nézetet használja. Ellenkező esetben függőlegest használ (a flexbox alapértelmezése).

A fenti képen látható, hogy az oldalsáv függőleges formát ölt, mert kisebb, mint 500 képpont. Míg a fő tartalom megtartja vízszintes elrendezését, mert nagyobb, mint 500 képpont. Ha csökkenti a böngészőt, az oldalsáv és a fő tartalom egyaránt a függőleges igazítást fogja használni, amikor eléri az 500 képpontot vagy kevesebbet.

A tárolólekérdezés hihetetlenül hatékony, mert lehetővé teszi a dolgok átméretezését a tároló alapján, nem pedig a böngésző teljes szélessége alapján. Ez különösen akkor hasznos, ha komponensekkel foglalkozik (mint például a React vagy a Vue).

A tárolólekérdezések segítségével egyszerűen átméretezheti a felhasználói felület összetevőit a tárolójuk alapján, így teljesen önálló összetevőket hozhat létre.

Tárolók elnevezése

Amikor létrehozza a @tartály lekérdezés esetén először megkeresi a lekérdezésben megcélzott elem tárolóját. Esetünkben ez lenne a fő tároló és az oldalsáv tároló.

És még ha a kártyák egy másik konténerben lennének is, az csak figyelmen kívül hagyná a többi tárolót, és csak a hozzá legközelebbi tárolót választaná. Ez egy szélesebb kör része CSS-szelektorként ismert CSS-koncepció.

A következő példában a body elemet tárolóvá alakítottuk:

test {
konténer típusú: soros méretű;
}

Most három külön konténerünk van: törzs, fő és mellékrész. Alapértelmezés szerint a tárolólekérdezésben megcélzott kártyák közelebb vannak a fő szakaszhoz vagy oldalsávhoz, mint a törzshöz. Tehát a fő és az oldalsáv szakaszt használja tárolóként a konténerlekérdezéshez.

Ennek a viselkedésnek a felülbírálásához két dolgot kell tennie. Először is meg kell adnia a törzselemnek egy tárolónevet:

test {
konténer típusú: soros méretű;
konténernév: test;
}

Ezután a tárolólekérdezés létrehozásakor meg kell adnia a tároló nevét @tartály.

@tartály test (maximális szélesség:1000 képpont){
/* A törzstárolót célzó CSS-szabályok */
}

Ez akkor hasznos, ha egy adott elemet szeretne tárolóként használni, nem pedig a megcélzott elemhez legközelebb eső tárolót. Más szóval, kiválaszthat bármilyen tárolót, és finomhangolhatja az elrendezést.

Konténer egységek

A konténerek másik nagyszerű tulajdonsága, hogy konténeregységeket használhat. Ezek az egységek ugyanúgy működnek, mint a nézetablakok (mindegyik pontosan ugyanolyan típusú). A konténeres egységek azonban használnak cqw (szélesség beállításához) és cqh (magasság beállításához). Ezek az egységek határozzák meg a konténer pontos szélességét és magasságát.

A CSS-tárolólekérdezések lehetővé teszik, hogy meghatározott elemeket használjon referenciapontként a médialekérdezésekhez. Ez a technika nagyon hasznos moduláris, önálló elemek létrehozásához, amelyek függetlenül attól, hogy melyik tárolóban vannak, önállóan megállják a helyüket. A konténerlekérdezések azonban ugyanazokat az elveket használják, mint a médialekérdezések, és ezt érdemes elsajátítania, ha egy százalékos CSS-fejlesztő szeretne lenni.