De ce nu sunt suficiente întotdeauna media queries
Media queries au fost mult timp instrumentul principal pentru design responsive. Ele adaptează pagina în funcție de caracteristicile viewportului, precum lățimea, orientarea sau preferința pentru mișcare redusă. Problema apare când o componentă este reutilizată în mai multe zone ale aceluiași website. Un card poate avea 700 de pixeli într-o pagină, 320 într-o bară laterală și 480 într-un modul de recomandări, deși fereastra browserului rămâne aceeași.
CSS Container Queries permit unei componente să reacționeze la dimensiunea containerului său, nu doar la dimensiunea întregului ecran. Astfel, un card poate trece de la o dispunere verticală la una cu imagine în stânga atunci când spațiul disponibil devine suficient. Aceeași componentă poate fi folosită într-o pagină de produs, într-un sidebar sau într-o grilă fără să aibă nevoie de breakpointuri diferite pentru fiecare context.
Cum funcționează containerul de interogare
Pentru o interogare de dimensiune trebuie să definești un container. În varianta uzuală pentru layout-uri orizontale, folosești container-type: inline-size pe elementul părinte. Proprietatea stabilește un context de containment pe axa inline, astfel încât descendenții pot fi stilizați în funcție de dimensiunea acelui container. Poți adăuga și container-name pentru a identifica explicit containerul atunci când pagina are mai multe zone care pot fi interogate.
Regula @container verifică o condiție și aplică stiluri elementelor din interior dacă acea condiție este adevărată. Este important să reții că regula nu selectează containerul însuși, ci descendenții lui. De aceea, stilul de bază trebuie să existe înainte de interogare, iar containerul trebuie să fie un strămoș al elementului pe care vrei să îl modifici.
Documentația regulii CSS @container explică sintaxa și tipurile de condiții. Container queries sunt disponibile în browserele moderne, dar pentru proiecte cu public și dispozitive mai vechi merită să verifici compatibilitatea și să păstrezi un layout de bază funcțional.
Exemplu practic pentru un card reutilizabil
Imaginează-ți un card de produs cu fotografie, titlu, descriere și preț. Într-un spațiu îngust, imaginea ar trebui să ocupe toată lățimea, iar informațiile să apară sub ea. Într-un container mai lat, fotografia poate deveni o coloană laterală. Nu vrei să legi această schimbare de viewport, pentru că acel card poate fi introdus și într-un widget îngust pe un ecran mare.
Într-un magazin online, același card poate apărea în arhiva de produse, în recomandări și într-o secțiune de produse similare. Container queries permit componentelor să se adapteze la locul în care sunt afișate, fără să adaugi clase speciale pentru fiecare pagină. Acest lucru este util mai ales când designul este construit din blocuri reutilizabile sau din componente care sunt mutate între layout-uri.
Cod CSS pentru container queries
Definește containerul pe un wrapper, apoi aplică layout-ul alternativ descendenților. Folosește un breakpoint în unități relative, adaptat dimensiunii reale a componentei. Valorile de mai jos sunt demonstrative; măsoară conținutul și testează cardul cu titluri lungi, imagini diferite și traduceri mai ample.
.card-wrap {
container-type: inline-size;
container-name: product-card;
}
.card { display: block; }
@container product-card (min-width: 34rem) {
.card {
display: grid;
grid-template-columns: 8rem 1fr;
gap: 1rem;
}
}Containere denumite și reguli mai ușor de întreținut
Când ai mai multe containere în aceeași pagină, un nume explicit face codul mai lizibil. De exemplu, poți numi containerul product-card și poți scrie @container product-card (min-width: 34rem). Astfel, regula indică clar ce context trebuie verificat. Dacă ai un container interior și unul exterior, gândește-te la ierarhia lor înainte să adaugi nume, pentru a evita aplicarea accidentală a unei condiții la un strămoș diferit.
Nu adăuga container-type peste tot. Fiecare container creează un context de containment, iar proprietatea are implicații asupra modului în care browserul calculează dimensiunile. Definește containere numai acolo unde componenta are nevoie de ele. De regulă, wrapperul este locul potrivit: componenta poate fi mutată fără să fie obligată să își gestioneze singură propriul context.
Container units și dimensiuni fluide
Pe lângă @container, CSS oferă unități relative la container, precum cqw, cqi, cqh și cqb. Acestea pot fi utile pentru dimensiuni fluide ale unor elemente interne, dar nu trebuie folosite doar pentru că sunt noi. Pentru text, păstrează lizibilitatea și evită variații care fac fontul prea mic în containere înguste. clamp() poate limita intervalul unei valori și poate oferi un comportament mai previzibil.
Un card nu trebuie să devină complet fluid în fiecare privință. Uneori este suficient să schimbi dispunerea, să ascunzi un detaliu secundar sau să mărești spațiul dintre elemente. Stabilește ce informație este esențială și păstreaz-o vizibilă în toate dimensiunile. Nu ascunde prețul, acțiunea principală sau informațiile necesare pentru înțelegerea produsului doar pentru a obține un aspect compact.
Container queries în WordPress și WooCommerce
Container queries sunt utile în teme WordPress care reutilizează aceleași componente în zone diferite. Un bloc de recomandări poate apărea în conținut, în sidebar sau în footer. În WooCommerce, cardurile de produs sunt folosite în arhive, produse similare, upsell și carusele. Dacă layout-ul depinde numai de viewport, componenta poate arăta bine într-o arhivă, dar prea înghesuit într-un modul lateral.
Înainte de a modifica tema, identifică wrapperul real generat de bloc sau de builder. Unele module au containere suplimentare, iar interogarea poate ajunge să citească dimensiunea unui element diferit de cel pe care îl ai în minte. Testează în inspectorul browserului și verifică DOM-ul la lățimi diferite. Pentru alte principii de structurare a interfețelor, vezi articolul despre principiile web designului modern și materialul despre editarea și organizarea unui website.
Fallback, accesibilitate și testare
Un fallback bun pornește de la layout-ul cel mai simplu. Dacă browserul nu înțelege container queries, cardul trebuie să rămână lizibil și utilizabil. Poți folosi media queries pentru schimbări generale ale paginii și container queries pentru componente. Nu încerca să reproduci fiecare variantă de layout în două sisteme dacă nu există un beneficiu clar; păstrează o structură de bază care funcționează și adaugă îmbunătățirea progresivă.
Testează componentele la lățimi intermediare, nu doar la telefon și desktop. O componentă poate arăta bine la 320 și 900 de pixeli, dar poate avea o ruptură la 500. Verifică titluri lungi, prețuri, butoane, traduceri, zoom de browser și text mărit. Asigură-te că ordinea DOM rămâne logică pentru tastatură și cititoare de ecran, chiar dacă CSS schimbă dispunerea vizuală.
Înainte de lansare, verifică performanța și inspectează stilurile calculate. Evită reguli duplicate și breakpointuri care se contrazic. Folosește nume clare pentru containere, comentarii scurte pentru cazurile speciale și valori coerente între componente. Un set mic de reguli bine testate este mai ușor de întreținut decât o colecție de excepții.
Ce nu rezolvă Container Queries
Container queries nu înlocuiesc toate media queries. Dacă vrei să schimbi navigarea principală în funcție de lățimea ferestrei, o media query rămâne potrivită. Dacă o componentă trebuie să reacționeze la spațiul părintelui, container query este mai expresivă. Cele două tehnici pot coexista, fiecare având o responsabilitate clară.
Ele nu rezolvă automat problemele de conținut. Un titlu foarte lung poate depăși cardul, o imagine poate avea un raport nepotrivit, iar un buton poate deveni prea mic pentru atingere. Testează cu date reale și stabilește limite pentru text, dimensiuni minime și spațiere. În special pentru prețuri și butoane de cumpărare, verifică să nu apară suprapuneri în limbi diferite sau la zoom.
Container queries sunt potrivite când o componentă este reutilizată în containere cu lățimi diferite și trebuie să își schimbe layout-ul independent de viewport. Începe cu o componentă reală, stabilește layout-ul minim și adaugă o singură condiție @container. Testează rezultatul în contexte diferite și mărește complexitatea numai dacă este necesar. Astfel obții componente mai portabile și mai ușor de integrat în pagini noi.
Container queries și componente accesibile
Schimbarea vizuală a unei componente nu trebuie să schimbe ordinea logică a informației. Păstrează titlul înaintea descrierii și descrierea înaintea acțiunii în ordinea DOM, chiar dacă într-un container lat folosești grid pentru a pune imaginea în stânga. Utilizatorii care navighează cu tastatura sau cu un cititor de ecran trebuie să întâlnească aceleași informații într-o ordine previzibilă. Evită să ascunzi informații esențiale numai în varianta îngustă sau numai în varianta lată.
Testează componentele și la zoom de 200%, nu doar la dimensiunea implicită. Un container poate avea suficient spațiu în condiții normale, dar poate deveni îngust când utilizatorul mărește textul sau folosește o fereastră împărțită. Folosește min-width: 0 pentru elementele flex sau grid care trebuie să se poată micșora, verifică overflow-wrap pentru cuvinte lungi și oferă butoanelor spațiu suficient pentru atingere. Container queries sunt un instrument de layout, nu o înlocuire pentru testarea accesibilității.
Înainte de lansare, inspectează comportamentul în browserele folosite de publicul tău și păstrează un fallback simplu. Dacă o componentă nu are nevoie de două variante de layout, nu introduce o interogare doar pentru a demonstra că folosești o funcție nouă. Cel mai bun rezultat este o componentă care rămâne clară, stabilă și ușor de întreținut în toate locurile în care este reutilizată.
