Sử dụng @supports trong css

Bài đăng này đã không được cập nhật trong 5 năm

Chắc hẳn bug xuất hiện khi một thuộc tính css không được hỗ trợ trên một trình duyệt nào đó là điều không thể tránh khỏi khi mà hiện nay sử dụng css3 rất nhiều trong một bộ phận người dùng vẫn cố chấp sử dụng những trình duyệt họ thích hay những phiên bản cũ kĩ. Sử dụng @supports giúp ta kiểm tra sự hỗ trợ của trình duyệt đối với thuộc tính css để đưa ra phương án giả quyết tốt.

Cú pháp

@supports(property:value) {
	/* styles */
}

property:value # Đây chính là thuộc tính css cần kiểm tra

Giả sử ta muốn kiểm tra thuộc tính 'display: flex' trong việc hỗ trợ trên trình duyêt.

@supports(display: flex) {
	.class {
        display: flex;
       align-items: center;     #đây là các thuộc tính được sử dụng nếu trình duyết hộ trợ 'display: flex'
      justify-content: center;
    }
}

Sử dung 'not' keyword

Giúp ta muốn thực hiện phương án css khác nếu trình duyệt không hỗ trợ thuộc tính đang dùng. Cú pháp

@supports not (property:value) {
	# style thay thế nếu brower không hỗ trợ
}

Example

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

# Sử dụng thuộc tính 'float: left' nếu flex không được hỗ trợ trên trình duyệt.

Kiểm tra một lúc nhiều thuộc tính

Sử dụng 'or', 'and' để kiểm tra

Sử dụng OR

# OR
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
        # styles 
 }

Sử dụng AND

# AND
@supports (display: flex) and (-webkit-appearance: menulist) {
	# Sử dụng style
}

Ta có thể sử dụng cả OR và AND

# OR và AND
@supports ((display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex)) and (-webkit-appearance: menulist) {

    # Sử dụng style
}

CSS.supports trong javascript

Cũng giống như trong css,, trong Javascript ta cũng cần truyền vào thuộc tính cho nó

Thuộc tính đơn


var checkFlex = CSS.supports('display', 'flex);

Nhiều thuộc tính với OR, AND

var checkFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: menulist)");

Example

Ta lấy một ví dụ sử dụng @supports với phần menu:

  .menulist {
      float: left; # Thuộc tính mặc định
  }

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
    .menulist {
        display: -webkit-flex; # thuộc tính nếu trình duyệt hộ trợ flex
        display: -moz-flex;
    	display: flex;
    	float: none;
    }
}