Cum folosești proprietatea CSS Container Queries pentru ecrane pliabile și tablete

Ecranele pliabile au schimbat fundamental modul în care gândim design-ul responsive. Nu mai vorbim despre un singur viewport care se micșorează sau se mărește, ci despre un dispozitiv care își schimbă dimensiunea și forma în timp real, de la o stare compactă la una extinsă, uneori cu două zone de afișare separate fizic de un hinge. În acest context, CSS Container Queries devine un instrument esențial, pentru că permite componentelor să reacționeze la dimensiunea containerului lor, nu la dimensiunea întregului viewport.

În acest articol explorăm în profunzime cum funcționează CSS Container Queries, de ce sunt superioare media queries tradiționale pentru ecrane pliabile și tablete, cum le implementezi corect și care sunt capcanele de evitat. Vom acoperi de la sintaxa de bază la pattern-uri avansate pentru layout-uri dual-screen, de la unități de container la combinații cu Viewport Segments API.

De ce media queries nu mai sunt suficiente

Media queries au fost standardul pentru responsive design timp de peste un deceniu. Funcționează simplu: dacă viewport-ul are o anumită lățime, aplică anumite stiluri. Problema apare când același component este folosit în contexte diferite în cadrul aceleiași pagini. Un card de produs într-o bară laterală de 280px ar trebui să arate altfel decât același card într-o zonă principală de 800px, chiar dacă viewport-ul este identic în ambele cazuri.

Media queries nu pot distinge aceste situații pentru că nu au acces la contextul local al componentului. Ele știu doar cât de lat este ecranul, nu cât de lat este containerul în care trăiește componentul. În plus, pe ecranele pliabile, viewport-ul se schimbă fizic când dispozitivul este pliat sau desfășurat, iar media queries nu pot anticipa aceste tranziții fără JavaScript suplimentar.

Container Queries rezolvă această problemă fundamentală. Un component poate spune: „dacă containerul meu are mai puțin de 400px, afișează conținutul pe verticală; dacă are mai mult, afișează-l pe orizontală." Acest lucru funcționează indiferent de dimensiunea viewport-ului și indiferent dacă dispozitivul este pliat sau desfășurat [citation:2][citation:6].

Sintaxa de bază a Container Queries

Pentru a folosi Container Queries, primul pas este să declari un container. Acest lucru se face cu proprietatea container-type, care poate lua valorile inline-size, size sau normal [citation:10].

.card-container {
  container-type: inline-size;
  container-name: card;
}

Valoarea inline-size este cea mai comună și permite interogarea dimensiunii pe axa inline (lățimea în modul de scriere orizontal). Valoarea size permite interogarea atât pe lățime, cât și pe înălțime, dar aplică containement de dimensiune care poate afecta layout-ul dacă nu este gestionat corect. Valoarea normal este implicită și nu creează un container de dimensiune, dar poate fi folosită pentru container queries bazate doar pe nume [citation:10].

După ce containerul este declarat, poți scrie interogări folosind @container:

@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

Acest pattern permite componentului să se adapteze automat la spațiul disponibil. Dacă .card-container este plasat într-o bară laterală îngustă, cardul se afișează pe verticală. Dacă este plasat într-o zonă largă, se afișează pe orizontală. Același cod, contexte diferite, fără media queries separate [citation:6].

Unități de container: cqw, cqh, cqi, cqb

Container Queries vin cu propriile unități de măsură relative la dimensiunea containerului. Acestea sunt esențiale pentru design-uri fluide care se scalează proporțional cu containerul, nu cu viewport-ul [citation:10].

Unitățile disponibile sunt: cqw (1% din lățimea containerului), cqh (1% din înălțimea containerului), cqi (1% din dimensiunea inline a containerului), cqb (1% din dimensiunea block a containerului), cqmin (valoarea mai mică dintre cqi și cqb) și cqmax (valoarea mai mare) [citation:10].

Un exemplu practic: un titlu care se scalează în funcție de lățimea containerului, nu a ecranului.

.card-title {
  font-size: clamp(1rem, 5cqi, 2rem);
}

Această abordare este mult mai flexibilă decât folosirea vw pentru că se adaptează la contextul local al componentului. Un card într-o bară laterală va avea un titlu proporțional mai mic, iar același card într-o zonă principală va avea un titlu mai mare, fără cod suplimentar [citation:9].

Container Queries pentru tablete: pattern-uri practice

Tabletele sunt un caz interesant pentru că au dimensiuni variabile și pot fi folosite atât în orientare portret, cât și landscape. Un layout care funcționează pe iPad Mini nu funcționează neapărat pe iPad Pro 12.9". Container Queries permit componentelor să se adapteze la spațiul disponibil în fiecare context.

Un pattern comun este cardul de produs care își schimbă layout-ul în funcție de lățimea disponibilă. Pe o tabletă în portret, cardul poate fi afișat într-o singură coloană. Pe aceeași tabletă în landscape, sau pe un desktop, cardul poate fi afișat în două coloane [citation:6].

.product-grid {
  container-type: inline-size;
}

.product-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@container (min-width: 500px) {
  .product-card {
    grid-template-columns: 200px 1fr;
  }
}

@container (min-width: 800px) {
  .product-card {
    grid-template-columns: 300px 1fr;
    gap: 2rem;
  }
}

Această abordare elimină nevoia de a scrie media queries separate pentru fiecare breakpoint de tabletă. Componentul se adaptează singur la orice lățime de container, fie că este o tabletă de 7 inch, una de 11 inch sau o fereastră redimensionată pe desktop [citation:15].

Ecrane pliabile: provocări și soluții

Ecranele pliabile aduc provocări unice. Când dispozitivul este pliat, viewport-ul este îngust. Când este desfășurat, viewport-ul este larg. Dar problema nu este doar dimensiunea — este faptul că ecranul poate fi împărțit în două segmente fizice separate de un hinge, iar layout-ul trebuie să țină cont de această separare fizică.

Container Queries singure nu pot detecta starea de pliere a dispozitivului. Ele reacționează la dimensiunea containerului, nu la fizica ecranului. Pentru a detecta plierea și a adapta layout-ul la segmentele fizice, ai nevoie de Viewport Segments API și de media queries specifice [citation:4][citation:11].

Dar Container Queries rămân esențiale pentru componentele care trebuie să se adapteze la spațiul disponibil în interiorul fiecărui segment. Un card plasat în segmentul stâng al unui ecran pliabil desfășurat are o lățime limitată. Container Queries permit acelui card să se adapteze la lățimea segmentului, nu la lățimea întregului ecran.

Combinația cu Viewport Segments API

Viewport Segments API oferă media queries pentru a detecta numărul de segmente orizontale sau verticale [citation:4].

@media (horizontal-viewport-segments: 2) {
  .wrapper {
    display: grid;
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

Această abordare permite layout-uri care se împart exact în două segmente fizice. Container Queries completează acest lucru permițând componentelor din interiorul fiecărui segment să se adapteze la spațiul disponibil [citation:3][citation:4].

Safe area insets pentru notch-uri și hinge

Pe ecranele pliabile și dispozitivele cu notch-uri, este esențial să folosești env(safe-area-inset-*) pentru a evita ca conținutul să fie ascuns sub notch sau sub hinge [citation:3].

.panel {
  padding: 1rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

Meta tag-ul viewport trebuie să includă viewport-fit=cover pentru ca aceste variabile de mediu să funcționeze [citation:3].

Capcane frecvente și cum să le eviți

Container Queries sunt puternice, dar au capcane care pot face codul să nu funcționeze deloc, fără erori în consolă. Prima capcană este uitarea declarării container-type pe container. Fără această proprietate, @container nu se aplică niciodată [citation:11].

A doua capcană este aplicarea container-type pe elemente care nu au un block formatting context (BFC). Flex items și grid items nu creează implicit un BFC, iar browserul ignoră container queries pe acestea. Soluția este să adaugi display: flow-root sau contain: layout style paint [citation:13].

A treia capcană este folosirea container-type: size pe elemente cu înălțime determinată de conținut. Aceasta poate crea bucle de layout unde conținutul schimbă înălțimea, care schimbă query-ul, care schimbă conținutul. Folosește inline-size când ai nevoie doar de lățime [citation:5].

A patra capcană este așteptarea ca Container Queries să detecteze plierea ecranului. Ele nu fac asta. Pentru detectarea plierii, folosește Viewport Segments API sau device-posture media query [citation:7][citation:11].

Când să folosești Container Queries vs Media Queries

Regula generală este simplă: Container Queries pentru componente, Media Queries pentru layout-ul paginii. Dacă stilul depinde de spațiul disponibil în containerul componentului, folosește Container Queries. Dacă stilul depinde de caracteristicile globale ale dispozitivului (viewport, orientare, tip de ecran), folosește Media Queries [citation:15].

Un header de pagină care își schimbă înălțimea în funcție de lățimea viewport-ului este un caz pentru Media Queries. Un card de produs care își schimbă layout-ul în funcție de lățimea coloanei în care este plasat este un caz pentru Container Queries [citation:15].

Pe ecrane pliabile, ambele sunt necesare. Media Queries detectează starea de pliere și numărul de segmente. Container Queries adaptează componentele din interiorul fiecărui segment la spațiul disponibil [citation:13].

Suport în browsere și fallback-uri

Container Queries sunt suportate nativ în toate browserele majore din 2023. Chrome 105+, Safari 16+, Firefox 110+ oferă suport complet pentru container-type: inline-size și @container [citation:15].

Pentru browsere mai vechi, poți folosi @supports pentru a oferi un fallback bazat pe media queries:

@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .card {
      display: flex;
      flex-direction: row;
    }
  }
}

Această abordare garantă că utilizatorii cu browsere vechi au o experiență funcțională, chiar dacă nu beneficiază de adaptabilitatea completă a Container Queries [citation:13].

Concluzie

CSS Container Queries reprezintă o schimbare fundamentală în modul în care construim design-uri responsive. Pentru ecrane pliabile și tablete, ele sunt esențiale pentru că permit componentelor să se adapteze la contextul local, nu doar la dimensiunea globală a viewport-ului. Combinarea Container Queries cu Viewport Segments API și cu safe area insets oferă o soluție completă pentru provocările design-ului pe dispozitive moderne.

Dacă vrei să aprofundezi subiecte conexe de web development, explorează articolul nostru despre CSS modern: tehnici avansate în 2026 și descoperă responsive design explicat simplu, fără bătăi de cap.

Surse externe:

MDN Web Docs — documentația oficială CSS Container Queries

MDN Viewport Segments API — ghidul oficial pentru ecrane pliabile

web.dev — studiul de caz Netflix despre Container Queries

freeCodeCamp — ghid practic Container Queries

Chrome for Developers — origin trial pentru Foldable APIs