@supports în CSS: browserul zice „da”, dar arată „nu”. Cum e posibil?

Regula CSS @supports a fost creată să fie colacul de salvare al dezvoltatorilor: verifici dacă o funcționalitate e suportată și aplici un fallback. În realitate, colacul ăsta e mai degrabă o găleată spartă. Browserul răspunde vesel „da, suport”, apoi se face că plouă. Sună cunoscut? Exact ca atunci când colegul zice „am făcut deploy”, iar CI-ul crapă cu roșu.

Problema e că @supports verifică doar suportul sintactic, nu și comportamentul real. De exemplu, browserul poate ști de backdrop-filter, dar nu-l poate aplica din cauza accelerării hardware dezactivate sau a unui bug. Rezultatul: primești true, dar pe ecran vezi un efect neclar. Ca și cum ai cumpăra pantofi mărimea potrivită, dar te strâng în vârf.

Doare și mai mult când încerci să folosești @supports pentru progressive enhancement. Scrii „dacă suportă grid – folosește grid”, iar browserul zice „da, suport”, apoi strică layout-ul. Mulțumesc, șefule. Un bug care te face să pomenești toate blestemele din IE6.

Soluția? Nu te baza 100% pe @supports. Verifică suportul manual cu CSS.supports() în JS sau folosește biblioteci ca Modernizr. Și, mai ales, testează pe dispozitive reale, nu doar în DevTools. Pentru că, după cum arată practica, browserelor le place să surprindă.

Comentariul studioului METABYTE: Și noi am pățit-o cu @supports într-un proiect. De atunci, motto-ul nostru e: „Încrede-te, dar verifică – mai ales când e vorba de CSS”. Dacă vreți să evitați astfel de surprize în proiectul vostru – știm cum să puneți paie.