Cú pháp @supports trong CSS

Định nghĩa và cách sử dụng

CSS @supports Quy tắc được sử dụng để kiểm tra trình duyệt có hỗ trợ CSS đặc tính nào đó hay không, và định nghĩa phong cách thay thế nếu không hỗ trợ.

Mô hình

Nếu trình duyệt hỗ trợ display: grid, thì áp dụng @supports CSS trong quy tắc. Nếu không hỗ trợ, thì áp dụng @supports Phong cách của lớp .container bên ngoài quy tắc:

/* Nếu trình duyệt không hỗ trợ display: grid, thì sử dụng CSS này */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* Nếu trình duyệt hỗ trợ display: grid, thì sử dụng CSS này */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

Thử ngay

cú pháp CSS

@supports (supports-condition) {
  /* Nếu điều kiện là đúng, thì áp dụng CSS này */
}

Giá trị thuộc tính

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ @ quy tắc.