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

@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:

<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>

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

Xem thêm

lệnh @import,
nhập tệp CSS
lệnh @media,
thiết lập định dạng cho loại phương tiện
lệnh !important,
thiết lập mức độ ưu tiên cho định dạng