Kako uporabljati vsebniške poizvedbe v CSS

Dolgo časa so bile medijske poizvedbe edini način za odzivnost zasnov uporabniškega vmesnika na različnih velikostih zaslona. Toda tudi to je imelo svoje omejitve. Ena največjih težav pri uporabi medijskih poizvedb je bila ta, da ste lahko stilizirali le element kot odziv na spremembe velikosti zaslona, ​​ne pa njegovega najbližjega vsebniškega elementa.

Za rešitev tega problema so bile uvedene vsebniške poizvedbe. Prav tako so narasli zaradi priljubljenosti ogrodij, kot sta React in Vue.js, ki delujejo tako, da ustvarjajo modularne "komponente" uporabniškega vmesnika. Naučite se uporabljati vsebniške poizvedbe za ustvarjanje odzivnih elementov v vašem CSS.

Koda, uporabljena v tem članku, je na voljo tukaj Repozitorij GitHub in je brezplačen za uporabo pod licenco MIT.

Zakaj bi morali uporabljati poizvedbe vsebnika CSS?

Da bi razumeli pomen poizvedb vsebnikov, uporabimo primer, ki olajša razumevanje koncepta. Toda najprej morate klonirati začetno kodo iz tega

Repozitorij GitHub.

Ko ste uspešno klonirali repo, zaženite kodo. Našli boste spletno stran, podobno naslednji sliki:

Tukaj imate postavitev mreže, ki obsega dva stolpca: glavni del in stransko vrstico. Glavni razdelek je videti v redu, vendar je stranska vrstica (ki je precej manjša od glavne vsebine) videti nekoliko zmečkana.

Postavitev je odzivna. Ko skrčite brskalnik, lahko vidite, da se kartica spremeni v navpični stolpec:

Z drugimi besedami, ko začne vsebina postajati neberljiva, se postavitev spremeni v navpični stolpec, kjer je slika naložena na vrh vsebine. Ta učinek je posledica medijskih poizvedb, kar je edini način, da lahko določite velikost elementov glede na celotno velikost vašega zaslona.

V tem primeru, ko je vaš zaslon manjši od 800 slikovnih pik, vse zložite enega na drugega z uporabo Flexbox poravnava. Na večjih zaslonih postavimo vsebino eno ob drugo:

@mediji(največja širina: 800 slikovnih pik) {
.kartica {
flex-direction: stolpec;
 }
.card-header { 
premer: 100%;
 }
}

Najdlje so medijske poizvedbe med glavnimi načela spletnega oblikovanja za ustvarjanje odzivnih postavitev s CSS (in bil je dovolj dober za večino stvari). Vendar boste zagotovo naleteli na scenarije, kjer medijske poizvedbe preprosto ne bodo zadostovale ali vsaj ne bodo priročna rešitev.

Eden od teh scenarijev je, ko imate stransko vrstico (kot v zgornjem primeru). V teh primerih, ko imate stransko vrstico, bi morali neposredno izbrati kartico stranske vrstice in jo poskusiti zmanjšati:

.sidebar.kartica {
/* Pomanjšajte stransko kartico */
}
@mediji(največja širina: 800 slikovnih pik) {
/* Oblikujte stran, ko je zaslon ožji od 800 slikovnih pik */
}

Če delate z veliko elementi, je lahko precej zapleteno, ker morate ročno izbrati vse elemente in jim spremeniti velikost. Na koncu bi imeli več kode in dodatno zapletenost.

Tukaj so lahko koristne poizvedbe vsebnikov. Namesto da bi bili prisiljeni uporabljati svoje vidno polje kot velikost, lahko uporabite kateri koli element na svoji strani kot vsebnik. Nato ima ta vsebnik lahko svoje lastne širine, na podlagi katerih bi temeljili na medijskih poizvedbah.

Kako ustvariti poizvedbo vsebnika

Če želite ustvariti poizvedbo vsebnika, bi začeli s ciljanjem na element, ki ga želite uporabiti kot vsebnik (v tem primeru glavni razdelek in stransko vrstico). Znotraj bloka morate nastaviti kontejnerskega tipa do inline-size:

glavni, .sidebar {
kontejnerskega tipa: inline-size
}

Ko shranite datoteko CSS, se na strani ne bo nič spremenilo. Zdaj pa lahko s poizvedbami vsebnika spremenite velikost in slog kartic, ugnezdenih v glavnem razdelku in razdelku stranske vrstice. V naslednji poizvedbi vsebnika spreminjate kartice v navpične stolpce na zaslonih, ki so široki 500 slikovnih pik ali manj:

@kontejner(največja širina: 500 slikovnih pik) {
.kartica {
flex-direction: stolpec;
 }
.card-header {
premer: 100%;
 }
}

To bo delovalo kot običajna medijska poizvedba. Toda namesto da bi merili velikost zaslona, ​​meriš velikost svojih vsebnikov (glavni in stranski deli). Zdaj, ko ima vaš vsebnik 500 slikovnih pik ali več, uporabite vodoravni pogled. V nasprotnem primeru uporabite navpično (privzeto za flexbox).

Na zgornji sliki lahko vidite, da ima stranska vrstica navpično obliko, ker je manjša od 500 slikovnih pik. Medtem ko glavna vsebina ohrani vodoravno postavitev, ker je večja od 500 slikovnih pik. Če skrčite brskalnik navzdol, bosta stranska vrstica in glavna vsebina uporabili navpično poravnavo, ko dosežeta 500 slikovnih pik ali manj.

Poizvedba vsebnika je neverjetno zmogljiva, saj vam omogoča spreminjanje velikosti stvari glede na vsebnik namesto celotne širine brskalnika. To je še posebej uporabno pri delu s komponentami (na primer v React ali Vue).

S poizvedbami vsebnika lahko preprosto spremenite velikost komponent uporabniškega vmesnika glede na njihov vsebnik, kar vam omogoča ustvarjanje popolnoma samostojnih komponent.

Poimenovanje vsebnikov

Ko ustvarite a @kontejner poizvedbo, najprej poišče vsebnik elementa, na katerega ciljate znotraj poizvedbe. V našem primeru bi bil to glavni vsebnik in vsebnik stranske vrstice.

In tudi če bi bile kartice v drugem vsebniku, bi preprosto prezrl druge vsebnike in izbral samo sebi najbližji vsebnik. To je del širšega Koncept CSS, znan kot izbirniki CSS.

V naslednjem primeru smo element telesa spremenili v vsebnik:

telo {
kontejnerskega tipa: inline-size;
}

Zdaj imamo tri ločene vsebnike: telo, glavni in stranski del. Privzeto so kartice, na katere ciljamo v poizvedbi vsebnika, bližje glavnemu razdelku ali stranski vrstici kot telesu. Tako uporablja odseke glavne in stranske vrstice kot vsebnike za poizvedbo vsebnika.

Če želite preglasiti to vedenje, morate narediti dve stvari. Najprej morate elementu telesa dati ime vsebnika:

telo {
kontejnerskega tipa: inline-size;
ime-vsebnika: telo;
}

Potem, ko ustvarite poizvedbo vsebnika, morate za njo podati ime vsebnika @kontejner.

@kontejner telo (največja širina:1000 slikovnih pik){
/* Pravila CSS, ki ciljajo na vsebnik telesa */
}

To je uporabno, če želite uporabiti določen element kot vsebnik in ne vsebnika, ki je najbližji elementu, na katerega ciljate. Z drugimi besedami, izberete lahko kateri koli poseben vsebnik in natančno prilagodite svojo postavitev.

Kontejnerske enote

Druga odlična lastnost zabojnikov je, da lahko uporabite vsebniške enote. Te enote delujejo tako kot enote vidnega polja (vse so popolnoma iste vrste enot). Vendar pa uporabljajo kontejnerske enote cqw (za nastavitev širine) in cqh (za nastavitev višine). Te enote določajo natančno širino in višino vaše posode.

Poizvedbe vsebnika CSS vam omogočajo uporabo določenih elementov kot referenčnih točk za vaše medijske poizvedbe. Ta tehnika je zelo priročna za ustvarjanje modularnih, samostojnih elementov, ki lahko stojijo neodvisno ne glede na posodo, v kateri so. Toda vsebniške poizvedbe uporabljajo enaka načela kot medijske poizvedbe in to je nekaj, kar bi morali obvladati, če želite biti najboljši enoodstotni razvijalec CSS.