Ako používať kontajnerové dotazy v CSS

Po dlhú dobu boli dopyty na médiá jediným spôsobom, ako zabezpečiť, aby návrhy používateľského rozhrania reagovali na rôzne veľkosti obrazovky. Ale aj to malo svoje obmedzenia. Jedným z najväčších problémov pri používaní mediálnych dopytov bolo, že ste mohli upravovať štýl prvku iba v reakcii na zmeny veľkosti obrazovky, nie jeho najbližší kontajnerový prvok.

Na vyriešenie tohto problému boli zavedené kontajnerové dotazy. Zvýšili sa aj popularitou rámcov ako React a Vue.js, ktoré fungujú tak, že vytvárajú modulárne „komponenty“ používateľského rozhrania. Zistite, ako používať kontajnerové dotazy na vytváranie responzívnych prvkov vo vašom CSS.

Kód použitý v tomto článku je dostupný v tomto úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT.

Prečo by ste mali používať kontajnerové dopyty CSS?

Aby sme pochopili dôležitosť kontajnerových dopytov, použite príklad, ktorý uľahčuje pochopenie konceptu. Najprv však z tohto musíte naklonovať štartovací kód

úložisko GitHub.

Keď úspešne naklonujete repo, spustite kód. Nájdete webovú stránku podobnú nasledujúcemu obrázku:

Tu máte rozloženie mriežky obsahujúce dva stĺpce: hlavnú časť a bočný panel. Hlavná časť vyzerá v poriadku, ale bočný panel (ktorý je oveľa menší ako hlavný obsah) vyzerá trochu stlačený.

Rozloženie je responzívne. Keď zmenšíte prehliadač, uvidíte, že sa karta premení na zvislý stĺpec:

Inými slovami, keď obsah začne byť nečitateľný, rozloženie sa zmení na zvislý stĺpec, v ktorom je obrázok naskladaný na obsah. Tento efekt prichádza ako výsledok mediálnych dopytov, čo je jediný spôsob, ako môžete určiť veľkosť prvkov na základe celej veľkosti vašej obrazovky.

V tomto prípade vždy, keď je vaša obrazovka menšia ako 800 pixelov, naukladáte všetko na seba pomocou Zarovnanie Flexboxu. Na väčších obrazovkách umiestňujeme obsah vedľa seba:

@media(maximálna šírka: 800 pixelov) {
.karta {
flex-direction: stĺpec;
 }
.hlavička-karty { 
šírka: 100%;
 }
}

Najdlhšie boli mediálne dopyty jedným z hlavných princípy webdizajnu na vytváranie responzívnych rozložení pomocou CSS (a to bolo dosť dobré pre väčšinu vecí). Určite však narazíte na scenáre, v ktorých mediálne dopyty jednoducho nestačia, alebo aspoň nebudú vhodným riešením.

Jedným z týchto scenárov je, keď máte bočný panel (ako to robíme vo vyššie uvedenom príklade). V týchto prípadoch, keď máte bočný panel, budete musieť priamo vybrať kartu bočného panela a pokúsiť sa ju zmenšiť:

.bočný panel.karta {
/* Zmenšiť kartu bočného panela */
}
@media(maximálna šírka: 800 pixelov) {
/* Štýl stránky, keď je obrazovka užšia ako 800 pixelov */
}

Ak pracujete s množstvom prvkov, môže to byť dosť komplikované, pretože musíte manuálne vybrať všetky prvky a zmeniť ich veľkosť. Skončili by ste s ďalším kódom a dodatočnou zložitosťou.

Tu môžu byť užitočné kontajnerové dotazy. Namiesto toho, aby ste boli nútení používať svoju zobrazenú oblasť ako veľkosť, môžete ako kontajner použiť ľubovoľný prvok na svojej stránke. Potom môže mať tento kontajner svoje vlastné šírky, na ktorých by ste zakladali svoje mediálne dopyty.

Ako vytvoriť dopyt na kontajner

Ak chcete vytvoriť dopyt kontajnera, začnite zacielením na prvok, ktorý chcete použiť ako kontajner (v tomto prípade na hlavnú sekciu a bočný panel). Vo vnútri bloku musíte nastaviť kontajnerového typu do inline-size:

Hlavná, .bočný panel {
kontajnerového typu: inline-size
}

Keď uložíte súbor CSS, na stránke sa nič nezmení. Teraz však môžete použiť kontajnerové dopyty na zmenu veľkosti a štýlu kariet vnorených do hlavnej sekcie a sekcie bočného panela. V nasledujúcom dopyte kontajnera meníte karty na zvislé stĺpce na obrazovkách so šírkou 500 pixelov alebo menej:

@kontajner(maximálna šírka: 500 pixelov) {
.karta {
flex-direction: stĺpec;
 }
.hlavička-karty {
šírka: 100%;
 }
}

Toto bude fungovať ako bežný mediálny dopyt. Namiesto merania veľkosti obrazovky však meriate veľkosť kontajnerov (hlavné a bočné časti). Takže teraz, keď má váš kontajner 500 pixelov alebo viac, používate horizontálne zobrazenie. V opačnom prípade použijete vertikálne (predvolené pre flexbox).

Na obrázku vyššie môžete vidieť, že bočný panel má zvislú formu, pretože je menší ako 500 pixelov. Zatiaľ čo hlavný obsah si zachováva svoje horizontálne rozloženie, pretože je väčší ako 500 pixelov. Ak zmenšíte svoj prehliadač, váš bočný panel aj hlavný obsah budú používať vertikálne zarovnanie, keď dosiahnu 500 pixelov alebo menej.

Kontajnerový dotaz je neuveriteľne výkonný, pretože vám umožňuje meniť veľkosť vecí na základe kontajnera namiesto celej šírky prehliadača. To je užitočné najmä pri práci s komponentmi (napríklad v React alebo Vue).

Pomocou kontajnerových dotazov môžete jednoducho zmeniť veľkosť komponentov používateľského rozhrania na základe ich kontajnera, čo vám umožní vytvárať úplne samostatné komponenty.

Pomenovanie kontajnerov

Keď vytvoríte a @kontajner dotaz, najprv vyhľadá kontajner prvku, na ktorý v rámci dotazu zacieľujete. V našom prípade by to bol hlavný kontajner a kontajner bočného panela.

A aj keby boli karty v inom kontajneri, jednoducho by ignoroval ostatné kontajnery a vybral by si len kontajner, ktorý je k sebe najbližšie. Toto je súčasť širšieho Koncept CSS známy ako selektory CSS.

V nasledujúcom príklade sme zmenili prvok tela na kontajner:

telo {
kontajnerového typu: inline-size;
}

Teraz máme tri samostatné kontajnery: telo, hlavnú a vedľajšiu časť. V predvolenom nastavení sú karty, na ktoré zacielime v dopyte kontajnera, bližšie k hlavnej časti alebo bočnému panelu než k telu. Používa teda sekciu hlavného a bočného panela ako kontajnery pre dotaz na kontajner.

Ak chcete prepísať toto správanie, musíte urobiť dve veci. Najprv musíte dať prvku tela názov kontajnera:

telo {
kontajnerového typu: inline-size;
názov-kontajnera: telo;
}

Potom, keď vytvoríte dotaz na kontajner, musíte zadať názov kontajnera @kontajner.

@kontajner telo (maximálna šírka:1000 pixelov){
/* Pravidlá CSS, ktoré sú zacielené na kontajner tela */
}

Je to užitočné, ak chcete použiť konkrétny prvok ako kontajner a nie kontajner najbližšie k prvku, na ktorý zacieľujete. Inými slovami, môžete si vybrať akýkoľvek konkrétny kontajner a doladiť svoje rozloženie.

Kontajnerové jednotky

Ďalšou skvelou vlastnosťou kontajnerov je, že môžete použiť kontajnerové jednotky. Tieto jednotky fungujú rovnako ako jednotky výrezu (všetky sú úplne rovnakého typu jednotiek). Používajú sa však kontajnerové jednotky cqw (na nastavenie šírky) a cqh (na nastavenie výšky). Tieto jednotky určujú presnú šírku a výšku vášho kontajnera.

Kontajnerové dopyty CSS vám umožňujú použiť špecifické prvky ako referenčné body pre vaše mediálne dopyty. Táto technika je celkom užitočná na vytváranie modulárnych samostatných prvkov, ktoré môžu stáť nezávisle bez ohľadu na nádobu, v ktorej sa nachádzajú. Kontajnerové dopyty však používajú rovnaké princípy ako mediálne dopyty a toto je niečo, čo by ste mali ovládať, ak chcete byť špičkovým vývojárom CSS na jedno percento.