Lệnh supports

Lệnh @supports thiết lập định dạng cho các phần tử dựa trên các tính năng mà trình duyệt hỗ trợ. Trong lệnh này, có thể tạo các điều kiện bằng cách sử dụng các toán tử logic not, and, or.

Cú pháp

css@supports điều_kiện {
  
}

Ví dụ

Hãy đặt một điều kiện rằng nếu trình duyệt của bạn hỗ trợ thuộc tính display với giá trị flex, thì chỉ đoạn văn với văn bản tương ứng sẽ được hiển thị, đồng thời màu chữ của nó sẽ có màu xanh lam:

html<p class="yes">Trình duyệt của bạn hỗ trợ display: flex.</p>
<p class="no">Trình duyệt của bạn không hỗ trợ display: flex.</p>

css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

Xem thêm