Kaip naudoti sudėtinių rodinių užklausas CSS

Ilgą laiką medijos užklausos buvo vienintelis būdas, kad vartotojo sąsajos dizainas atitiktų skirtingų dydžių ekranus. Tačiau net ir tai turėjo savo apribojimų. Viena didžiausių problemų, susijusių su medijos užklausomis, buvo ta, kad elemento stilių galėjote nustatyti tik atsižvelgiant į ekrano dydžio pokyčius, o ne artimiausią konteinerio elementą.

Norėdami išspręsti šią problemą, buvo įvestos konteinerių užklausos. Jie taip pat išpopuliarėjo dėl tokių sistemų kaip „React“ ir „Vue.js“, kurios veikia kurdamos modulinius vartotojo sąsajos „komponentus“. Sužinokite, kaip naudoti sudėtinių rodinių užklausas kuriant interaktyvius elementus savo CSS.

Šiame straipsnyje naudojamas kodas pateikiamas čia GitHub saugykla ir jūs galite nemokamai naudotis pagal MIT licenciją.

Kodėl turėtumėte naudoti CSS konteinerių užklausas?

Norėdami suprasti sudėtinio rodinio užklausų svarbą, naudokime pavyzdį, kuris palengvina sąvokos suvokimą. Bet pirmiausia iš to turite klonuoti starterio kodą

GitHub saugykla.

Kai sėkmingai klonuosite atpirkimą, paleiskite kodą. Rasite tinklalapį, panašų į šį paveikslėlį:

Čia yra tinklelio išdėstymas, kurį sudaro du stulpeliai: pagrindinė dalis ir šoninė juosta. Pagrindinė dalis atrodo gerai, bet šoninė juosta (kuri yra daug mažesnė nei pagrindinis turinys) atrodo šiek tiek suglebęs.

Išdėstymas yra jautrus. Kai sumažinate naršyklę, pamatysite, kad kortelė virsta vertikaliu stulpeliu:

Kitaip tariant, kai turinys pradeda tapti neįskaitomas, išdėstymas paverčiamas vertikaliu stulpeliu, kuriame vaizdas yra sukrautas ant turinio. Šis efektas atsiranda dėl medijos užklausų, o tai yra vienintelis būdas nustatyti elementų dydį pagal visą ekrano dydį.

Tokiu atveju, kai ekranas yra mažesnis nei 800 piks., viską sukraunate vieną ant kito naudodami Flexbox lygiavimas. Didesniuose ekranuose turinį dedame greta:

@media(maksimalus plotis: 800 piks) {
.kortelė {
lankstumo kryptis: stulpelyje;
 }
.kortelė-antraštė { 
plotis: 100%;
 }
}

Ilgiausiai žiniasklaidos užklausos buvo viena iš pagrindinių interneto dizaino principai interaktyvių maketų kūrimui naudojant CSS (ir jis buvo pakankamai geras daugeliui dalykų). Tačiau jūs tikrai susidursite su scenarijais, kai žiniasklaidos užklausų tiesiog nepakaks arba tai nebus patogus sprendimas.

Vienas iš tų scenarijų yra tada, kai turite šoninę juostą (kaip darome aukščiau esančiame pavyzdyje). Tokiais atvejais, kai turite šoninę juostą, turėsite tiesiogiai pasirinkti šoninės juostos kortelę ir pabandyti ją sumažinti:

.šoninė juosta.kortelė {
/* Sumažinkite šoninės juostos kortelę */
}
@media(maksimalus plotis: 800 piks) {
/* Sukurkite puslapio stilių, kai ekranas siauresnis nei 800 pikselių */
}

Tai gali būti gana sudėtinga, jei dirbate su daugybe elementų, nes turite rankiniu būdu pasirinkti visus elementus ir pakeisti jų dydį. Turėtumėte daugiau kodo ir daugiau sudėtingumo.

Čia gali būti naudingos sudėtinių rodinių užklausos. Užuot priversti naudoti peržiūros sritį kaip dydį, galite naudoti bet kurį puslapio elementą kaip sudėtinį rodinį. Tada tas sudėtinis rodinys gali turėti savo pločius, kuriais remdamiesi pateiksite medijos užklausas.

Kaip sukurti sudėtinio rodinio užklausą

Norėdami sukurti sudėtinio rodinio užklausą, pirmiausia taikykite pagal elementą, kurį norite naudoti kaip sudėtinį rodinį (šiuo atveju į pagrindinę skiltį ir šoninę juostą). Bloko viduje turite nustatyti konteinerio tipo į eilutinio dydžio:

pagrindinis, .šoninė juosta {
konteinerio tipo: eilutinio dydžio
}

Kai išsaugosite CSS failą, puslapyje niekas nepasikeis. Tačiau dabar galite naudoti sudėtinio rodinio užklausas, kad pakeistumėte pagrindinėje ir šoninės juostos skiltyje esančių kortelių dydį ir stilių. Toliau pateiktoje sudėtinio rodinio užklausoje keičiate korteles į vertikalius stulpelius ekranuose, kurių plotis 500 pikselių ar mažesnis:

@konteineris(maksimalus plotis: 500 piks) {
.kortelė {
lankstumo kryptis: stulpelyje;
 }
.kortelė-antraštė {
plotis: 100%;
 }
}

Tai veiks kaip įprasta medijos užklausa. Tačiau užuot matę ekrano dydį, matuojate konteinerių (pagrindinės ir šoninės juostos) dydį. Taigi dabar, kai sudėtinis rodinys yra 500 pikselių ar didesnis, naudokite horizontalųjį rodinį. Kitu atveju naudojate vertikalią padėtį (numatytasis „flexbox“).

Iš aukščiau pateikto vaizdo matote, kad šoninė juosta yra vertikali, nes yra mažesnė nei 500 pikselių. Tuo tarpu pagrindinis turinys išlaiko horizontalų išdėstymą, nes yra didesnis nei 500 pikselių. Jei sumažinsite naršyklę, šoninė juosta ir pagrindinis turinys naudos vertikalią išlygiavimą, kai pasieks 500 taškų ar mažiau.

Sudėtinio rodinio užklausa yra neįtikėtinai galinga, nes ji leidžia keisti dalykų dydį pagal sudėtinį rodinį, o ne visą naršyklės plotį. Tai ypač naudinga dirbant su komponentais (pvz., React arba Vue).

Naudodami sudėtinio rodinio užklausas galite lengvai pakeisti vartotojo sąsajos komponentų dydį pagal jų sudėtinį rodinį, kad galėtumėte sukurti visiškai savarankiškus komponentus.

Konteinerių pavadinimai

Kai sukuriate a @konteineris užklausą, pirmiausia užklausoje ieško elemento, pagal kurį taikote, sudėtinio rodinio. Mūsų atveju tai būtų pagrindinis konteineris ir šoninės juostos konteineris.

Ir net jei kortelės būtų kitame konteineryje, jis tiesiog ignoruotų kitus konteinerius ir pasirinktų tik artimiausią sau konteinerį. Tai yra platesnio masto dalis CSS koncepcija, žinoma kaip CSS selektoriai.

Šiame pavyzdyje kūno elementą pavertėme konteineriu:

kūnas {
konteinerio tipo: eilutinio dydžio;
}

Dabar turime tris atskirus konteinerius: korpusą, pagrindinį ir šoninį skyrių. Pagal numatytuosius nustatymus kortelės, pagal kurias taikome sudėtinio rodinio užklausą, yra arčiau pagrindinės skilties arba šoninės juostos, o ne korpuso. Taigi pagrindinės ir šoninės juostos dalys naudojamos kaip konteinerio užklausos konteineriai.

Norėdami nepaisyti šio elgesio, turite atlikti du dalykus. Pirmiausia savo kūno elementui turite suteikti konteinerio pavadinimą:

kūnas {
konteinerio tipo: eilutinio dydžio;
konteinerio pavadinimas: kūnas;
}

Tada, kai kuriate sudėtinio rodinio užklausą, po to turite nurodyti sudėtinio rodinio pavadinimą @konteineris.

@konteineris kūnas (maksimalus plotis:1000 piks){
/* CSS taisyklės, taikomos pagal pagrindinį sudėtinį rodinį */
}

Tai naudinga, jei norite naudoti konkretų elementą kaip sudėtinį rodinį, o ne artimiausią elementui, pagal kurį taikote, sudėtinį rodinį. Kitaip tariant, galite pasirinkti bet kurį konkretų konteinerį ir tiksliai suderinti išdėstymą.

Konteinerių vienetai

Kita puiki konteinerių savybė yra ta, kad galite naudoti konteinerių vienetus. Šie vienetai veikia taip pat, kaip peržiūros srities vienetai (jie visi yra vienodo tipo vienetai). Tačiau naudojami konteinerių vienetai cqw (pločiui nustatyti) ir cqh (aukščiui nustatyti). Šie vienetai nustato tikslų konteinerio plotį ir aukštį.

CSS sudėtinio rodinio užklausos leidžia naudoti konkrečius elementus kaip žiniasklaidos užklausų atskaitos taškus. Šis metodas yra gana patogus kuriant modulinius, autonominius elementus, kurie gali stovėti savarankiškai, nepaisant talpyklos, kurioje jie yra. Tačiau sudėtinių rodinių užklausos naudoja tuos pačius principus kaip ir medijos užklausos, ir tai turėtumėte išmokti, jei norite būti geriausiu vieno procento CSS kūrėju.