`Unități de container (cqi, cqw, cqh, cqb)` în CSS

Funcții și unități CSS Chrome 105, Firefox 110, Safari 16

Unități relative la mărimea containerului părinte, nu la fereastră: fonturi și spațieri care se adaptează la locul unde este pus un component.

Sintaxă CSS

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

.card h2 {
  font-size: clamp(1rem, 6cqi, 2rem);
  padding: 4cqi;
}

Ce face `Unități de container (cqi, cqw, cqh, cqb)`

Unitățile de container funcționează la fel ca vw și vh, dar procentul se calculează din mărimea celui mai apropiat strămoș declarat container prin container-type, nu din fereastra browserului.

Lista completă: cqw (1% din lățime), cqh (1% din înălțime), cqi (1% din dimensiunea inline, adică lățimea în textele orizontale), cqb (1% din dimensiunea block), cqmin și cqmax (latura mai mică / mai mare). În practică, cqi este cea mai folosită.

container-type: inline-size permite folosirea lui cqi și cqw. Pentru cqh și cqb containerul are nevoie de container-type: size (și de o înălțime stabilită). Dacă nu există niciun container potrivit, unitățile folosesc mărimea ferestrei mici (ca svw / svh).

Valori uzuale

Valoare	Descriere
`cqi / cqw`	1% din lățimea (dimensiunea inline) containerului.
`cqb / cqh`	1% din înălțimea (dimensiunea block) containerului; cere container-type: size.
`cqmin / cqmax`	1% din latura mai mică / mai mare a containerului.
`container-type: inline-size`	Declară elementul container pentru lățime.

Exemple

Exemplul 1: Card de produs care arată bine și în coloana îngustă, și în cea lată

Același card este folosit în bara laterală (300px) și în zona principală (800px); fontul urmează lățimea cardului, nu a ecranului.

.zona-produs {
  container-type: inline-size;
}

.card-produs h3 {
  font-size: clamp(1rem, 5cqi, 1.75rem);
}

.card-produs .pret {
  font-size: clamp(1.25rem, 8cqi, 3rem);
  font-weight: 700;
}

.card-produs {
  padding: 4cqi;
}

Efect vizual în browser

În bara laterală de 300px, cardul „Telemea de Sibiu – 32 lei” are titlul de 16px, prețul de 24px și padding de 12px. Același card în zona principală de 800px are titlul de 28px, prețul de 48px (limita maximă) și padding de 32px.

Exemplul 2: Banner cu raport fix, cu text dimensionat după înălțime

Pentru cqb containerul are nevoie de container-type: size și de o înălțime cunoscută.

.banner {
  container-type: size;
  aspect-ratio: 3 / 1;
  width: 100%;
}

.banner p {
  font-size: 20cqb;
  margin: 0;
  line-height: 1;
}