Cum să utilizați interogări container în CSS

Pentru o lungă perioadă de timp, interogările media au fost singura modalitate de a face modelele de UI să răspundă pe diferite dimensiuni de ecran. Dar chiar și asta avea limitele sale. Una dintre cele mai mari probleme legate de utilizarea interogărilor media a fost că puteți stila un element doar ca răspuns la modificările dimensiunii ecranului, nu și cel mai apropiat element container al acestuia.

Au fost introduse interogări container pentru a rezolva această problemă. De asemenea, au crescut odată cu popularitatea cadrelor precum React și Vue.js, care funcționează prin crearea de „componente” modulare a UI. Aflați cum să utilizați interogări container pentru a crea elemente receptive în CSS.

Codul folosit în acest articol este disponibil în acest articol Depozitul GitHub și este gratuit pentru utilizare sub licența MIT.

De ce ar trebui să utilizați interogări de containere CSS?

Pentru a înțelege importanța interogărilor containerului, să folosim un exemplu care ușurează înțelegerea conceptului. Dar mai întâi, trebuie să clonați codul de pornire din acesta Depozitul GitHub.

După ce ați clonat cu succes repo, rulați codul. Veți găsi o pagină web similară cu următoarea imagine:

Aici aveți un aspect al grilei care cuprinde două coloane: secțiunea principală și bara laterală. Secțiunea principală arată în regulă, dar bara laterală (care este mult mai mică decât conținutul principal) pare puțin strivită.

Aspectul este receptiv. Când micșorați browserul, puteți vedea că cardul se transformă într-o coloană verticală:

Cu alte cuvinte, atunci când conținutul începe să devină ilizibil, aspectul se transformă într-o coloană verticală în care imaginea este stivuită deasupra conținutului. Acest efect vine ca urmare a interogărilor media, care este singura modalitate prin care puteți determina dimensiunea elementelor pe baza întregii dimensiuni a ecranului.

În acest caz, ori de câte ori ecranul dvs. este mai mic de 800 px, stivuiți totul unul peste altul folosind Alinierea Flexbox. Pe ecranele mai mari, plasăm conținutul unul lângă altul:

@mass-media(lățimea maximă: 800px) {
.card {
flex-direcție: coloană;
 }
.card-header { 
lăţime: 100%;
 }
}

Pentru cel mai mult timp, interogările media au fost una dintre principalele principii de design web pentru a crea machete receptive cu CSS (și a fost suficient de bun pentru majoritatea lucrurilor). Dar trebuie să vă întâlniți cu scenarii în care interogările media pur și simplu nu vor fi suficiente sau, cel puțin, nu vor fi o soluție convenabilă.

Unul dintre aceste scenarii este atunci când aveți o bară laterală (cum facem în exemplul de mai sus). În aceste cazuri în care aveți o bară laterală, va trebui să selectați direct cardul din bara laterală și să încercați să o micșorați:

.bara laterală.card {
/* Faceți cardul din bara laterală mai mic */
}
@mass-media(lățimea maximă: 800px) {
/* Stilează pagina când ecranul este mai îngust de 800 px */
}

Poate fi destul de complicat dacă lucrați cu o mulțime de elemente, deoarece trebuie să selectați manual toate elementele și să le redimensionați. Veți ajunge cu mai mult cod și o complexitate suplimentară.

Aici interogările containerului ar putea fi utile. În loc să fii forțat să folosești fereastra ca dimensiune, poți folosi orice element de pe pagină ca container. Apoi acel container poate avea propriile lățimi pe care v-ați baza interogările media.

Cum se creează o interogare de container

Pentru a crea o interogare de container, ați începe prin a viza elementul pe care doriți să îl utilizați ca container (în acest caz, secțiunea principală și bara laterală). În interiorul blocului, trebuie să setați tip container la mărime în linie:

principal, .bara laterală {
tip container: mărime în linie
}

Când salvați fișierul CSS, nimic nu se va schimba pe pagină. Dar acum puteți folosi interogări container pentru a redimensiona și a remodifica cardurile imbricate în secțiunea principală și în secțiunea barei laterale. În următoarea interogare de container, modificați cardurile în coloane verticale pe ecrane care au o lățime de 500 pixeli sau mai puțin:

@container(lățimea maximă: 500px) {
.card {
flex-direcție: coloană;
 }
.card-header {
lăţime: 100%;
 }
}

Aceasta va funcționa ca o interogare media normală. Dar în loc să măsurați dimensiunea ecranului dvs., măsurați dimensiunea containerelor dvs. (secțiunile principale și din bara laterală). Deci, acum, când containerul dvs. are 500 px sau mai mult, utilizați vizualizarea orizontală. În caz contrar, utilizați vertical (implicit pentru flexbox).

Din imaginea de mai sus, puteți vedea că bara laterală ia o formă verticală, deoarece este mai mică de 500 px. În timp ce, conținutul principal își păstrează aspectul orizontal deoarece este mai mare de 500 px. Dacă micșorați browserul, bara laterală și conținutul principal vor folosi ambele alinierea verticală atunci când ating 500px sau mai puțin.

Interogarea containerului este incredibil de puternică, deoarece vă permite să redimensionați lucrurile în funcție de container în loc de lățimea întregului browser. Acest lucru este util în special atunci când aveți de-a face cu componente (cum ar fi în React sau Vue).

Cu interogările containerului, puteți redimensiona cu ușurință componentele UI în funcție de containerul lor, permițându-vă să creați componente complet autonome.

Denumirea containerelor

Când creați un @container interogare, mai întâi caută containerul elementului pe care îl vizați în interogare. În cazul nostru, acesta ar fi containerul principal și containerul barei laterale.

Și chiar dacă cărțile ar fi în interiorul altui container, ar ignora celelalte containere și ar alege doar containerul cel mai apropiat de sine. Aceasta face parte dintr-o mai amplă Conceptul CSS cunoscut sub numele de selectoare CSS.

În exemplul următor, am transformat elementul body într-un container:

corp {
tip container: mărime în linie;
}

Acum avem trei containere separate: secțiunea corp, principală și laterală. În mod prestabilit, cardurile pe care le vizam în interogarea containerului sunt mai aproape de secțiunea principală sau de bara laterală decât de corp. Deci, folosește secțiunile principale și laterale ca containere pentru interogarea containerului.

Pentru a anula acest comportament, trebuie să faceți două lucruri. Mai întâi, trebuie să dai elementului corpului tău un nume de container:

corp {
tip container: mărime în linie;
nume-container: corp;
}

Apoi, când creați interogarea containerului, trebuie să specificați numele containerului după @container.

@container corp (lățimea maximă:1000px){
/* Reguli CSS care vizează containerul de corp */
}

Acest lucru este util dacă doriți să utilizați un anumit element ca container, mai degrabă decât cel mai apropiat container de elementul pe care îl vizați. Cu alte cuvinte, puteți selecta orice container specific și vă puteți regla aspectul.

Unități de containere

O altă caracteristică excelentă a containerelor este că puteți utiliza unități de containere. Aceste unități funcționează la fel ca unitățile de vizualizare (sunt toate exact același tip de unități). Cu toate acestea, unitățile de containere folosesc cqw (pentru setarea lățimii) și cqh (pentru setarea înălțimii). Aceste unități determină lățimea și înălțimea exactă a containerului dvs.

Interogările de container CSS vă permit să utilizați anumite elemente ca puncte de referință pentru interogările media. Această tehnică este destul de utilă pentru a crea elemente modulare, autonome, care pot sta independent, indiferent de containerul în care se află. Dar interogările container folosesc aceleași principii ca și interogările media și acest lucru ar trebui să stăpânești dacă vrei să fii un dezvoltator CSS de top 1%.