Konteinerpäringute kasutamine CSS-is

Pikka aega olid meediumipäringud ainus viis muuta kasutajaliidese kujundused erinevatel ekraanisuurustel tundlikuks. Kuid isegi sellel olid oma piirangud. Üks suurimaid probleeme meediumipäringute kasutamisel oli see, et elemendi stiili sai kujundada ainult vastavalt ekraani suuruse muutustele, mitte selle lähima konteineri elemendile.

Selle probleemi lahendamiseks võeti kasutusele konteineripäringud. Samuti on nad kasvanud tänu selliste raamistike nagu React ja Vue.js populaarsusele, mis töötavad modulaarsete kasutajaliidese komponentide loomisega. Siit saate teada, kuidas kasutada konteineripäringuid CSS-is reageerivate elementide loomiseks.

Selles artiklis kasutatud kood on saadaval selles GitHubi hoidla ja seda saate MIT-i litsentsi alusel tasuta kasutada.

Miks peaksite kasutama CSS-i konteineripäringuid?

Konteinerpäringute olulisuse mõistmiseks kasutame näidet, mis hõlbustab kontseptsiooni mõistmist. Kuid kõigepealt peate sellest lähtekoodi kloonima

GitHubi hoidla.

Kui olete repo edukalt klooninud, käivitage kood. Leiate järgmise pildiga sarnase veebilehe:

Siin on ruudustiku paigutus, mis koosneb kahest veerust: põhiosast ja külgribast. Põhiosa näeb välja okei, kuid külgriba (mis on põhisisust palju väiksem) näib pisut kokkusurutud.

Paigutus on tundlik. Brauseri kokkutõmbamisel näete, et kaart muutub vertikaalseks veeruks.

Teisisõnu, kui sisu hakkab loetamatuks muutuma, muutub paigutus vertikaalseks veeruks, kus pilt on sisu peale virnastatud. See efekt tuleneb meediumipäringutest, mis on ainus viis elementide suuruse määramiseks kogu ekraani suuruse põhjal.

Sel juhul, kui teie ekraani eraldusvõime on alla 800 piksli, asetate kõik asjad üksteise peale, kasutades Flexbox joondus. Suurematel ekraanidel asetame sisu kõrvuti:

@meedia(maksimaalne laius: 800 pikslit) {
.kaart {
painduv suund: veerg;
 }
.kaart-päis { 
laius: 100%;
 }
}

Kõige pikemat aega on meediapäringud olnud üks peamisi veebidisaini põhimõtted CSS-iga tundlike paigutuste loomiseks (ja see on olnud enamiku asjade jaoks piisavalt hea). Kuid kindlasti tuleb ette stsenaariume, kus meediumipäringutest lihtsalt ei piisa või need ei ole vähemalt mugav lahendus.

Üks neist stsenaariumidest on see, kui teil on külgriba (nagu me teeme ülaltoodud näites). Sellistel juhtudel, kui teil on külgriba, peate otse külgriba kaardi valima ja proovima seda väiksemaks muuta.

. külgriba.kaart {
/* Muuda külgriba kaart väiksemaks */
}
@meedia(maksimaalne laius: 800 pikslit) {
/* Lehe stiil, kui ekraan on kitsam kui 800 pikslit */
}

Kui töötate paljude elementidega, võib see olla üsna keeruline, kuna peate kõik elemendid käsitsi valima ja nende suurust muutma. Teil oleks rohkem koodi ja lisakeerukust.

Siin võivad konteinerpäringud olla kasulikud. Selle asemel, et olla sunnitud kasutama suuruse määramiseks oma vaateporti, saate konteinerina kasutada oma lehel mis tahes elementi. Siis võib sellel konteineril olla oma laiused, mille alusel saate oma meediumipäringuid teha.

Kuidas luua konteineripäringut

Konteineripäringu loomiseks peaksite kõigepealt sihtima elementi, mida soovite konteinerina kasutada (antud juhul põhijaotist ja külgriba). Ploki sees peate määrama konteineri tüüpi juurde reasiseses suuruses:

peamine, . külgriba {
konteineri tüüpi: reasiseses suuruses
}

Kui salvestate oma CSS-faili, ei muutu lehel midagi. Kuid nüüd saate põhijaotises ja külgriba sektsioonis olevate kaartide suuruse muutmiseks ja stiili muutmiseks kasutada konteineripäringuid. Järgmises konteineripäringus muudate kaardid vertikaalseteks veergudeks ekraanidel, mille laius on 500 pikslit või vähem.

@konteiner(maksimaalne laius: 500 pikslit) {
.kaart {
painduv suund: veerg;
 }
.kaart-päis {
laius: 100%;
 }
}

See toimib tavalise meediumipäringuna. Kuid selle asemel, et mõõta ekraani suurust, mõõdate konteinerite (peamise ja külgriba sektsioonid) suurust. Nüüd, kui teie konteiner on 500 pikslit või rohkem, kasutate horisontaalvaadet. Vastasel juhul kasutate vertikaalset (vaikimisi flexboxi jaoks).

Ülaltoodud pildilt näete, et külgriba on vertikaalsel kujul, kuna see on väiksem kui 500 pikslit. Põhisisu säilitab horisontaalse paigutuse, kuna see on suurem kui 500 pikslit. Kui kahandate brauserit, kasutavad nii külgriba kui ka põhisisu vertikaalset joondust, kui nende suurus on 500 pikslit või vähem.

Konteinerpäring on uskumatult võimas, kuna võimaldab muuta asjade suurust konteineri, mitte kogu brauseri laiuse põhjal. See on eriti kasulik komponentidega tegelemisel (nt React või Vue).

Konteinerpäringutega saate hõlpsasti muuta kasutajaliidese komponentide suurust nende konteineri alusel, võimaldades teil luua täiesti iseseisvaid komponente.

Konteinerite nimetamine

Kui loote a @konteiner päringule, otsib see kõigepealt päringus sihitava elemendi konteinerit. Meie puhul oleks see põhikonteiner ja külgriba konteiner.

Ja isegi kui kaardid oleksid teises konteineris, eiraks see teisi konteinereid ja valiks ainult endale lähima konteineri. See on osa laiemast CSS-i kontseptsioon, mida nimetatakse CSS-selektoriteks.

Järgmises näites oleme kehaelemendi muutnud konteineriks:

keha {
konteineri tüüpi: reasiseses suuruses;
}

Nüüd on meil kolm eraldi konteinerit: kere-, põhi- ja kõrvalosa. Vaikimisi on konteineri päringus sihitavad kaardid põhiosale või külgribale lähemal kui sisule. Seega kasutab see konteineripäringu konteineritena põhi- ja külgriba sektsioone.

Selle käitumise tühistamiseks peate tegema kahte asja. Esiteks peate oma kehaelemendile andma konteineri nime:

keha {
konteineri tüüpi: reasiseses suuruses;
konteineri nimi: keha;
}

Seejärel peate konteineripäringu loomisel määrama pärast konteineri nime @konteiner.

@konteiner keha (maksimaalne laius:1000 pikslit){
/* CSS-reeglid, mis sihivad põhikonteinerit */
}

See on kasulik, kui soovite kasutada konkreetset elementi konteinerina, mitte sihitavale elemendile lähima konteinerina. Teisisõnu saate valida mis tahes konkreetse konteineri ja oma paigutust täpsustada.

Konteinerühikud

Teine konteinerite suurepärane omadus on see, et saate kasutada konteineriühikuid. Need üksused töötavad täpselt nagu vaateava ühikud (need on kõik täpselt sama tüüpi ühikud). Kuid konteinerühikud kasutavad cqw (laiuse seadistamiseks) ja cqh (kõrguse seadmiseks). Need ühikud määravad teie konteineri täpse laiuse ja kõrguse.

CSS-i konteineri päringud võimaldavad teil kasutada teatud elemente oma meediumipäringute võrdluspunktidena. See tehnika on üsna mugav modulaarsete iseseisvate elementide loomiseks, mis võivad seista iseseisvalt olenemata konteinerist, milles need asuvad. Kuid konteineripäringud kasutavad samu põhimõtteid nagu meediapäringud ja see on midagi, mida peaksite valdama, kui soovite olla CSS-i üks protsenti kõrgeim arendaja.