Phần tử giả được tối ưu hoá theo độ phân giải

Việc sử dụng hình ảnh được tối ưu hoá về độ phân giải trong các phần tử giả CSS (như ::before hoặc ::after) cho phép bạn thêm biểu tượng trang trí hoặc đồ hoạ cấu trúc mà không làm lộn xộn HTML bằng các nút DOM bổ sung. Bằng cách kết hợp các phần tử giả với hàm CSS image-set(), bạn có thể cung cấp cho trình duyệt nhiều định dạng (chẳng hạn như AVIF hoặc WebP) và độ phân giải (như 1x và 2x). Trình duyệt sẽ tự động chọn hình ảnh tối ưu nhất cho khả năng của thiết bị của người dùng.

Triển khai

Bạn có thể sử dụng hàm image-set() ngay trong thuộc tính content của một phần tử giả hoặc trong thuộc tính background-image của phần tử đó (trong khi đặt content: ""). Xin lưu ý rằng mặc dù việc cung cấp cả định dạng hình ảnh thông qua type() và độ phân giải (như 1x hoặc 2x) sẽ mang lại kết quả tốt nhất, nhưng cả hai đối số này đều không bắt buộc.

.icon-button::before {
  /* Using image-set directly in the content property */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.webp") type("image/webp") 1x,
    url("icon-2x.webp") type("image/webp") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
  
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

Chiến lược dự phòng

Đối với các trình duyệt cũ không hỗ trợ hàm image-set(), bạn PHẢI cung cấp một nội dung khai báo hình ảnh chuẩn trước quy tắc image-set(). Chiến lược cải tiến tăng dần này dựa trên bản chất xếp tầng của CSS: các quy tắc không được hỗ trợ sẽ bị bỏ qua.

.icon-button::before {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  content: url("icon.png");
  
  /* Modern browsers will apply this and override the fallback */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
}