CSS Container Queries: Dincolo de Media Queries

Timp de peste un deceniu, designul responsive s-a bazat exclusiv pe interogări media (@media), raportate la lățimea totală a ferestrei browserului (viewport). Însă într-un sistem modern bazat pe componente reutilizabile, un card poate fi plasat atât pe un ecran mare, cât și într-o bară laterală îngustă. Află cum Container Queries rezolvă definitiv modularitatea componentelor.

ARHITECTURĂ COMPONENTE Publicat: 10 octombrie 2026 Actualizat: 13 octombrie 2026 Timp lectură: ~8 minute (1.550 cuvinte) Nivel: Intermediar → Avansat

Ideea de bază: Cu @container, un element își schimbă înfățișarea (din format vertical în format orizontal cu imagine laterală) nu pentru că utilizatorul a redimensionat monitorul, ci pentru că spațiul oferit de părintele său a depășit un anumit prag.

1. De ce Media Queries nu au fost suficiente

Imaginează-ți o componentă universală .user-card. Într-un design tradițional cu @media (min-width: 768px), cardul se transformă dintr-un layout vertical compact într-unul orizontal desfășurat când ecranul depășește 768px.

Dar ce se întâmplă dacă utilizatorul navighează pe un desktop de 1920px și plasezi acest card într-un sidebar îngust de 300px? Media Query-ul va vedea un ecran uriaș și va declanșa stilul orizontal, distrugând complet layout-ul înghesuit din bara laterală!

Soluțiile vechi necesitau zeci de clase suplimentare (ex.: .user-card--compact, .user-card--sidebar). Container Queries elimină aceste hack-uri, făcând componenta 100% autonomă și inteligentă.

2. Sintaxa în Doi Pași a Container Queries

Pentru a utiliza această funcționalitate nativă, trebuie să parcurgi doi pași simpli:

Pasul 1: Declararea Părintelui drept Container

Aplică proprietatea container-type pe elementul părinte care delimitează spațiul disponibil:

/* 1. Definim contextul de container */
.card-wrapper {
  container-type: inline-size;
  container-name: cardContext; /* Opțional, dar recomandat dacă imbrici containere */
}

Valoarea inline-size instruiește browserul să măsoare dimensiunea pe axa orizontală (în mod obișnuit lățimea), prevenind buclele infinite de calcul ale înălțimii.

Pasul 2: Interogarea Dimensiunii Părintelui cu @container

În stilurile elementului copil, folosești direct regula @container:

/* Stilul implicit (pentru containere mici sub 450px) */
.user-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* Dacă spațiul părintelui atinge cel puțin 450px, comută pe orizontală */
@container cardContext (min-width: 450px) {
  .user-card {
    flex-direction: row;
    align-items: center;
    padding: 24px;
  }

  .user-avatar {
    width: 80px;
    height: 80px;
  }
}

3. Unitățile de Măsură Container (cqw, cqh, cqi, cqb)

Similar unităților de viewport (vw, vh), specificația introduce unități relative la dimensiunea directă a containerului:

Unitate	Semnificație	Caz Practic de Utilizare
`1cqw`	1% din lățimea (width) containerului	Tipografie fluidă adaptată mărimii exacte a cardului
`1cqh`	1% din înălțimea (height) containerului	Hero banners și panouri cu înălțime fixată
`1cqi`	1% din dimensiunea pe axa inline (recomandat)	Design internațional compatibil cu limbile RTL (arabă, ebraică)
`cqmin` / `cqmax`	Cea mai mică / mare valoare dintre cqi și cqb	Scalare proporțională a iconițelor din carduri pătrate

Exemplu de font scalabil raportat la mărimea cardului:

.card-title {
  /* Titlul se scalează fluid cu lățimea cardului, între 1rem și 1.8rem */
  font-size: clamp(1rem, 4cqi, 1.8rem);
}

4. Matrice de Compatibilitate în Browsere

CSS Container Queries a atins statutul oficial Baseline și este suportat nativ fără prefixe în toate browserele moderne majore:

Google Chrome: Suport complet începând cu versiunea 105 (august 2022);
Microsoft Edge: Suport complet din versiunea 105;
Safari: Suport complet din versiunea 16 (septembrie 2022);
Mozilla Firefox: Suport complet din versiunea 110 (februarie 2023).

5. Bune Practici & Greșeli Comune de Evitat

Nu uita container-type: O regulă @container nu va avea niciun efect dacă nu ai declarat pe un strămoș proprietatea container-type: inline-size;.
Evită buclele de layout (Layout Loops): Nu încerca să măsori ambele axe cu container-type: size dacă înălțimea containerului este dictată chiar de conținutul din el, altfel browserul nu poate stabili dimensiunea finală.
Ierarhizează containerele prin nume: Folosește întotdeauna container-name atunci când lucrezi cu componente imbricate, pentru a nu interoga din greșeală un părinte mai îndepărtat.

Ghiduri recomandate în continuare:

Ciprian P. & Echipa Tehnică css3.ro

Senior Front-End Architect • Specializare W3C CSS Modules

Dezvoltator web cu peste 12 ani de experiență practică în arhitecturi front-end, sisteme de design scalabile și optimizarea performanței de randare (Core Web Vitals). Fiecare articol și generator de pe css3.ro este testat riguros cross-browser (Chromium, Gecko, WebKit) pentru a asigura precizie tehnică absolută și conformitate cu standardele deschise.

Despre echipa editorială → Jurnal actualizări & W3C → Semnalează o eroare →