Bạn muốn dùng một thuộc tính CSS mới nhưng vẫn phải chạy được trên trình duyệt cũ. `@supports` viết thế nào và lưu ý gì?

@supports là feature query: hỏi trình duyệt xem nó có hiểu một cặp property/value hay không, rồi mới áp dụng khối bên trong.

.layout { display: flex; gap: 16px; }

@supports (display: grid) {
  .layout { display: grid; grid-template-columns: repeat(3, 1fr); }
}

Cú pháp hỗ trợ not, and, or và cả selector() để kiểm tra selector:

@supports selector(:has(a)) { /* browser understands :has() */ }
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) { }

Lưu ý khi phỏng vấn hay hỏi:

• Viết fallback trước, @supports sau — trình duyệt cũ bỏ qua cả block nó không hiểu, trình duyệt mới ghi đè.
• @supports chỉ trả lời "có parse được không", không trả lời "có render đúng không". Một property được nhận nhưng lỗi thực thi vẫn lọt qua.
• Không cần @supports cho phần lớn CSS: cơ chế mặc định của CSS là bỏ qua khai báo không hiểu, nên display: flex; rồi display: grid; liền nhau đã là fallback tự nhiên. Chỉ cần feature query khi phải đổi nhiều thuộc tính cùng lúc theo một tính năng.