Truy vấn tính năng CSS

Cách làm việc với các truy vấn tính năng trong CSS

Truy vấn tính năng là một khả năng gần đây và tương đối chưa được biết đến của CSS, nhưngđược hỗ trợ tốtmột.

Chúng tôi có thể sử dụng nó để kiểm tra xem một tính năng có được trình duyệt hỗ trợ hay không bằng cách sử dụng@supportstừ khóa.

Đây là một ví dụ mà tôi nghĩ rằng điều này đặc biệt hữu ích, tại thời điểm viết bài, để kiểm tra xem trình duyệt có hỗ trợ lưới CSS hay không, có thể được thực hiện bằng cách sử dụng:

@supports (display: grid) {
  /* apply this CSS */
}

Chúng tôi kiểm tra xem trình duyệt có hỗ trợgridgiá trị chodisplaybất động sản.

Chúng ta có thể sử dụng@supportscho bất kỳ thuộc tính CSS nào, để kiểm tra bất kỳ giá trị nào.

Chúng ta cũng có thể sử dụng các toán tử logicand,ornotđể xây dựng các truy vấn tính năng phức tạp.

Ví dụ này kiểm tra xem trình duyệt có hỗ trợ cả haiLưới CSSFlexbox:

@supports (display: grid) and (display: flex) {
  /* apply this CSS */
}

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: