Phát hiện tính năng trong CSS với @supports

Một luật mới trong CSS, @supports, cho phép bạn dễ dàng phát hiện xem một tính năng CSS nhất định có sẵn hay không trong trình duyệt của khách truy cập. Điều này cho phép bạn chỉ sử dụng các tính năng này cho các trình duyệt được hỗ trợ hoặc chỉ xác định các luật cụ thể cho các trình duyệt không hỗ trợ và các trình duyệt khác hoàn toàn bỏ qua chúng. @supports là một cách CSS thuần túy để thay thế một công cụ như Modernizr . @supports cho phép bạn kiểm tra cả việc hỗ trợ một tính năng và không hỗ trợ một tính năng:

@supports (column-count: 3) {
  div { column-count: 3; }
}

Không hỗ trợ

Dưới đây là cách bạn sẽ kiểm tra và áp dụng các luật cụ thể khi một tính năng không được hỗ trợ:

@supports not (display: flex) {
  .sidebar { float: left; }
}

Chuỗi nhiều tính năng CSS bằng cách sử dụng và / hoặc toán tử:

@supports (display: flex)
or (display: -webkit-box)
or (display: -webkit-flex)
or (display: -ms-flexbox) {
 .menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 }
}

Một cảnh báo lớn

Có một cảnh báo chính đối với @supports ngay bây giờ: bản thân @supports không được hỗ trợ trên phạm vi global . Nó hoàn toàn không được hỗ trợ trong Internet Explorer, thậm chí không phải version 11 và chỉ được hỗ trợ trong Safari dành cho iOS kể từ v9.2. Xem trang @supports Tôi có thể sử dụng để biết thêm chi tiết.

Do đó, có thể sẽ thực tế hơn nếu tiếp tục sử dụng Modernizr trong một thời gian, cho đến khi hầu hết user IE chuyển sang Edge.

@supports cũng có một API JavaScript tiện dụng được dùng để phát hiện các tính năng trong JS.

Tags:

Các tin liên quan

Bộ chọn thuộc tính CSS
2016-02-05
Hàm calc () CSS
2015-10-08
Cách sử dụng Bộ tiền xử lý CSS LESS trên VPS Ubuntu
2014-01-27