Điều kiện CSS bằng hàm if() mới

Una Kravets

Ngày phát hành: 1 tháng 7 năm 2025

Từ Chrome 137, bạn có thể thử các điều kiện cùng dòng CSS bằng hàm if(). if() cung cấp giao diện nhà phát triển rõ ràng hơn cho các kiểu động như truy vấn kiểu và truy vấn nội dung nghe nhìn, với một số điểm khác biệt chính mà bạn có thể tìm hiểu trong bài đăng này.

Hàm if() CSS hoạt động bằng cách sử dụng một loạt cặp điều kiện-giá trị, được cấu trúc như sau:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

Bạn có thể cung cấp câu lệnh else. Câu lệnh này được dùng nếu không có điều kiện nào khác được thoả mãn:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

Hiện tại, if() hoạt động với 3 loại truy vấn khác nhau:

• style(): Truy vấn kiểu
• media(): Truy vấn nội dung đa phương tiện
• supports(): Hỗ trợ truy vấn

Hãy xem xét một số ví dụ sau đây:

Bản minh hoạ: Truy vấn nội dung đa phương tiện cùng dòng

Sử dụng if() là một cách hay để đưa các truy vấn nội dung đa phương tiện cùng dòng vào kiểu của bạn. Ví dụ: bạn có thể kiểm tra lựa chọn ưu tiên về giao diện của người dùng (sáng hoặc tối) hoặc thực hiện truy vấn nội dung đa phương tiện cùng dòng cho chiều rộng khung nhìn. Ví dụ sau đây cho thấy truy vấn nội dung đa phương tiện cho thiết bị con trỏ. Kích thước mặc định của nút sẽ là 30px trên thiết bị có con trỏ tinh tế, chẳng hạn như chuột, nhưng đối với thiết bị màn hình cảm ứng, chẳng hạn như thiết bị có con trỏ thô, kích thước của nút sẽ là 44px được đề xuất tối thiểu để có khoảng cách chạm phù hợp giúp truy cập dễ dàng hơn.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

Mã trước đó cho kết quả giống như truy vấn nội dung nghe nhìn sau:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

Việc sử dụng định dạng if() cho phép bạn có logic cùng dòng mà không cần logic tạo kiểu ở hai vị trí khác nhau.

Bản minh hoạ: Truy vấn hỗ trợ cùng dòng

Một cách khác để sử dụng if() là tạo truy vấn hỗ trợ cùng dòng. Ví dụ: để kiểm tra khả năng hỗ trợ màu sắc gam rộng, chẳng hạn như OKLCH, bạn có thể sử dụng:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

Với mã này, nếu trình duyệt hỗ trợ không gian màu oklch, người dùng sẽ thấy màu sắc sống động hơn và cũng sẽ nhận được thông báo: "Trình duyệt của bạn hỗ trợ OKLCH" trong nội dung giả lập ::after.

Để tìm hiểu thêm và xem sự khác biệt giữa rgb và các không gian màu nâng cao hơn, hãy xem bộ chọn màu và tài nguyên tại oklch.com.

Bản minh hoạ: Hình ảnh hoá trạng thái giao diện người dùng

Bạn cũng có thể sử dụng if() để tạo kiểu dựa trên trạng thái. Ví dụ: tạo kiểu cho thẻ tiến trình dựa trên trạng thái giao diện người dùng (đang chờ xử lý hoặc hoàn tất). Lưu trữ trạng thái trong một thuộc tính dữ liệu hoặc thuộc tính tuỳ chỉnh, sau đó áp dụng kiểu nội tuyến cho thuộc tính đó bằng if().

<div class="card" data-status="complete">
  ...
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

Với style() bên trong hàm if(), bạn có thể trực tiếp tạo kiểu cho phần tử mà bạn đang nhắm đến, không cần phần tử mẹ như các truy vấn kiểu CSS yêu cầu.

Bản minh hoạ này cho thấy một trường hợp cơ bản về cách bạn có thể sử dụng if() để hỗ trợ một phương pháp cấu trúc mới cho CSS. Một lợi ích của việc sử dụng thuộc tính tuỳ chỉnh CSS so với các lớp là bạn có thể dễ dàng cập nhật các thuộc tính đó trong CSS. Ví dụ: bạn có thể cập nhật các thuộc tính này bằng cách sử dụng truy vấn nội dung nghe nhìn hoặc trạng thái giả lập như :hover.

Bước tiếp theo

Việc bổ sung if() mang đến một cơ hội kiến trúc mới cho các nhà phát triển CSS. Khi các công nghệ như truy vấn kiểu phát triển, bạn có thể truy vấn phạm vi trong các hàm if(). Các hàm này cũng sẽ hữu ích khi kết hợp với đề xuất hàm tuỳ chỉnh sắp tới (CSS @function).

Để tìm hiểu thêm về các tính năng này, hãy xem:

• Video hướng dẫn 3 phút về Bản minh hoạ #3
• Bài viết của Lea Verou