`@supports (Feature Queries)` în CSS

Reguli @ (at-rules) CSS3+ (Chrome 28, Firefox 22, Safari 9; selector(): Chrome 83, Firefox 69, Safari 14.1)

Aplică un bloc de reguli doar dacă browserul suportă o anumită proprietate, valoare sau selector.

Sintaxă CSS

@supports (display: grid) { ... }
@supports not (aspect-ratio: 1) { ... }
@supports (position-area: top) and (anchor-name: --a) { ... }
@supports selector(:has(img)) { ... }

Ce face `@supports (Feature Queries)`

@supports (numită și feature query) verifică dacă browserul înțelege o declarație CSS, de exemplu (display: grid). Dacă da, aplică regulile din bloc; dacă nu, le ignoră. Așa poți folosi o funcție nouă și păstra o variantă simplă pentru browserele mai vechi.

Condițiile se combină cu and, or și not, iar selector(...) testează un selector (de exemplu :has()). Din JavaScript, același test se face cu CSS.supports("display", "grid").

Testul verifică doar dacă browserul recunoaște sintaxa, nu și dacă implementarea este completă sau fără erori.

Valori uzuale

Valoare	Descriere
`(proprietate: valoare)`	Adevărat dacă browserul acceptă declarația.
`not (...)`	Adevărat dacă browserul NU acceptă declarația; util pentru variante de rezervă.
`and / or`	Combină mai multe condiții (fiecare în paranteze proprii).
`selector(...)`	Adevărat dacă browserul înțelege selectorul dat.
`font-tech(...) / font-format(...)`	Testează tehnologii de fonturi (ex. font-tech(color-COLRv1)) sau formate (font-format(woff2)).

Exemple

Exemplul 1: Layout cu Grid și variantă simplă pentru browsere vechi

Implicit cardurile sunt unele sub altele; dacă browserul suportă grid, devin o grilă.

.produse {
  display: block;
}
.produs { margin-bottom: 16px; }

@supports (display: grid) {
  .produse {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
  .produs { margin-bottom: 0; }
}

Efect vizual în browser

În browserele actuale produsele (Cafea 24 lei, Ceai 18 lei, Ciocolată 12 lei) apar pe trei coloane cu spații egale. Într-un browser fără grid apar unul sub altul, tot ușor de citit.

Exemplul 2: Stil aplicat doar dacă există suport pentru :has()

Formularul primește un chenar roșu când conține un câmp invalid, dar doar acolo unde selectorul este înțeles.

@supports selector(:has(input)) {
  form:has(input:user-invalid) {
    border: 2px solid #dc2626;
    border-radius: 8px;
  }
}