Kako koristiti upite spremnika u CSS-u

Dugo su vremena medijski upiti bili jedini način da dizajn korisničkog sučelja bude osjetljiv na različite veličine zaslona. Ali i to je imalo svojih ograničenja. Jedan od najvećih problema s korištenjem medijskih upita bilo je to što ste mogli stilizirati samo element kao odgovor na promjene u veličini zaslona, ​​a ne njegov najbliži element spremnika.

Za rješavanje ovog problema uvedeni su upiti spremnika. Također su porasli s popularnošću okvira kao što su React i Vue.js koji rade stvaranjem modularnih "komponenti" korisničkog sučelja. Naučite kako koristiti upite spremnika za stvaranje responzivnih elemenata u vašem CSS-u.

Kôd korišten u ovom članku dostupan je u ovom GitHub spremište i besplatan je za korištenje pod MIT licencom.

Zašto biste trebali koristiti upite CSS spremnika?

Kako bismo razumjeli važnost upita spremnika, poslužimo se primjerom koji olakšava razumijevanje koncepta. Ali prvo morate klonirati početni kod iz ovoga GitHub spremište.

Nakon što ste uspješno klonirali repo, pokrenite kod. Naći ćete web stranicu sličnu sljedećoj slici:

Ovdje imate raspored mreže koji se sastoji od dva stupca: glavnog odjeljka i bočne trake. Glavni odjeljak izgleda dobro, ali bočna traka (koja je mnogo manja od glavnog sadržaja) izgleda malo zgnječeno.

Izgled je responzivan. Kada smanjite preglednik, možete vidjeti da se kartica pretvara u okomiti stupac:

Drugim riječima, kada sadržaj počne postati nečitljiv, izgled se pretvara u okomiti stupac gdje je slika naslagana na vrhu sadržaja. Ovaj efekt dolazi kao rezultat medijskih upita, što je jedini način na koji možete odrediti veličinu elemenata na temelju cijele veličine vašeg zaslona.

U ovom slučaju, kad god je vaš zaslon manji od 800 piksela, sve slažete jedno na drugo pomoću Flexbox poravnanje. Na većim ekranima sadržaj postavljamo jedan pored drugog:

@mediji(maksimalna širina: 800 px) {
.kartica {
flex-direction: stupac;
 }
.zaglavlje kartice { 
širina: 100%;
 }
}

Najdulje su vrijeme medijski upiti bili jedni od glavnih načela web dizajna za stvaranje responzivnih izgleda s CSS-om (i bio je dovoljno dobar za većinu stvari). No sigurno ćete naići na scenarije u kojima medijski upiti jednostavno neće biti dovoljni ili barem neće biti prikladno rješenje.

Jedan od tih scenarija je kada imate bočnu traku (kao što imamo u gornjem primjeru). U ovim slučajevima kada imate bočnu traku, morali biste izravno odabrati karticu bočne trake i pokušati je smanjiti:

.bočna traka.kartica {
/* Smanjite karticu bočne trake */
}
@mediji(maksimalna širina: 800 px) {
/* Stilizirajte stranicu kada je zaslon uži od 800px */
}

Može biti prilično komplicirano ako radite s mnogo elemenata jer morate ručno odabrati sve elemente i promijeniti im veličinu. Dobili biste više koda i dodatnu složenost.

Ovdje bi upiti spremnika mogli biti korisni. Umjesto da budete prisiljeni koristiti svoj okvir za prikaz kao svoju veličinu, možete koristiti bilo koji element na svojoj stranici kao spremnik. Zatim taj spremnik može imati vlastite širine na kojima biste temeljili svoje medijske upite.

Kako stvoriti upit za spremnik

Da biste stvorili upit za spremnik, počeli biste ciljati element koji želite koristiti kao spremnik (u ovom slučaju, glavni odjeljak i bočnu traku). Unutar bloka trebate postaviti kontejnerskog tipa do inline-veličina:

glavni, .bočna traka {
kontejnerskog tipa: inline-veličina
}

Kada spremite svoju CSS datoteku, ništa se neće promijeniti na stranici. Ali sada možete koristiti upite spremnika za promjenu veličine i stila kartica ugniježđenih unutar glavnog odjeljka i odjeljka bočne trake. U sljedećem upitu spremnika mijenjate kartice u okomite stupce na zaslonima koji su široki 500 piksela ili manje:

@kontejner(maksimalna širina: 500 px) {
.kartica {
flex-direction: stupac;
 }
.zaglavlje kartice {
širina: 100%;
 }
}

Ovo će funkcionirati kao uobičajeni medijski upit. Ali umjesto da mjerite veličinu svog zaslona, ​​mjerite veličinu svojih spremnika (glavni i bočni dijelovi). Dakle, sada kada vaš spremnik ima 500 px ili više, koristite vodoravni prikaz. U suprotnom koristite okomiti (zadano za flexbox).

Na gornjoj slici možete vidjeti da bočna traka ima okomiti oblik jer je manja od 500 piksela. Dok glavni sadržaj zadržava svoj horizontalni raspored jer je veći od 500 piksela. Ako smanjite preglednik, bočna traka i glavni sadržaj koristit će okomito poravnanje kada dosegnu 500 piksela ili manje.

Upit spremnika nevjerojatno je moćan jer vam omogućuje promjenu veličine stvari na temelju spremnika umjesto cijele širine preglednika. Ovo je posebno korisno kada se radi o komponentama (kao što su React ili Vue).

Pomoću upita spremnika možete jednostavno promijeniti veličinu komponenti korisničkog sučelja na temelju njihovog spremnika, što vam omogućuje stvaranje potpuno samostalnih komponenti.

Imenovanje spremnika

Kada stvorite a @kontejner upita, prvo traži spremnik elementa koji ciljate unutar upita. U našem slučaju, to bi bio glavni spremnik i spremnik bočne trake.

Čak i da su kartice u drugom spremniku, samo bi zanemario druge spremnike i izabrao samo sebi najbliži spremnik. Ovo je dio šireg CSS koncept poznat kao CSS selektori.

U sljedećem smo primjeru element body pretvorili u spremnik:

tijelo {
kontejnerskog tipa: inline-veličina;
}

Sada imamo tri odvojena spremnika: tijelo, glavni i bočni dio. Prema zadanim postavkama, kartice koje ciljamo u upitu spremnika bliže su glavnom odjeljku ili bočnoj traci nego tijelu. Stoga koristi glavne i bočne odjeljke kao spremnike za upit spremnika.

Da biste nadjačali ovo ponašanje, trebate učiniti dvije stvari. Najprije svom elementu tijela morate dati ime spremnika:

tijelo {
kontejnerskog tipa: inline-veličina;
naziv-spremnika: tijelo;
}

Zatim, kada kreirate svoj upit za spremnik, nakon njega morate navesti naziv spremnika @kontejner.

@kontejner tijelo (maksimalna širina:1000 px){
/* CSS pravila koja ciljaju na spremnik tijela */
}

Ovo je korisno ako želite koristiti određeni element kao spremnik, a ne najbliži spremnik elementu koji ciljate. Drugim riječima, možete odabrati bilo koji određeni spremnik i fino podesiti svoj izgled.

Jedinice spremnika

Još jedna sjajna značajka spremnika je da možete koristiti jedinice spremnika. Ove jedinice rade isto kao jedinice prozora za prikaz (sve su iste vrste jedinica). Međutim, kontejnerske jedinice koriste cqw (za podešavanje širine) i cqh (za podešavanje visine). Ove jedinice određuju točnu širinu i visinu vašeg spremnika.

Upiti CSS spremnika omogućuju vam korištenje određenih elemenata kao referentnih točaka za vaše medijske upite. Ova tehnika je vrlo zgodna za stvaranje modularnih, samostalnih elemenata koji mogu stajati neovisno bez obzira na spremnik u kojem se nalaze. Ali upiti spremnika koriste iste principe kao i medijski upiti, a to je nešto što biste trebali savladati ako želite biti jedan posto vrhunski CSS programer.