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

Una Kravets

Ngày xuất bản: 1 tháng 7 năm 2025

Kể từ Chrome 137, bạn có thể dùng thử các điều kiện nội tuyến CSS bằng hàm if(). if() cho phé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 một câu lệnh else. Câu lệnh này sẽ đượ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:

  • style(): Truy vấn về kiểu
  • media(): Truy vấn nội dung nghe nhìn
  • supports(): Hỗ trợ các truy vấn

Hãy xem xét một số ví dụ để hiểu rõ hơn:

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

Sử dụng if() là một cách hay để thêm các truy vấn nội dung nghe nhìn nội tuyến 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 (sáng hoặc tối) của người dùng hoặc thực hiện các truy vấn nội dung nghe nhìn cùng dòng cho chiều rộng khung hiển thị. Ví dụ sau đây cho thấy truy vấn nội dung nghe nhìn cho thiết bị trỏ. Kích thước mặc định của nút sẽ là 30 px trên thiết bị có con trỏ chính xác (như chuột), nhưng đối với các thiết bị có 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à 44 px (kích thước tối thiểu được đề xuất) để có khoảng cách chạm phù hợp giúp dễ dàng truy cập hơn.

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

Đoạn mã trên cho ra kết quả tương tự như truy vấn nội dung nghe nhìn sau đây:

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 nội tuyến mà không cần logic tạo kiểu ở hai nơi khác nhau.

Bản minh hoạ nơi việc sử dụng if() sẽ làm tăng cỡ chữ của nút trên các thiết bị có con trỏ thô.

Bản minh hoạ: Câu hỏi hỗ trợ cùng dòng

Một cách khác để sử dụng if() là tạo các truy vấn hỗ trợ nội tuyến. Ví dụ: để kiểm tra khả năng hỗ trợ màu có gam màu 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ả ::after.

Một truy vấn hỗ trợ sử dụng hàm if().

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

Minh hoạ: Trực quan hoá trạng thái giao diện người dùng

Bạn cũng có thể 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 một thuộc tính tuỳ chỉnh trực tiếp, sau đó áp dụng các kiểu nội tuyến cho thuộc tính đó bằng cách sử dụ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);
}
Tạo kiểu cho nhãn có trạng thái nội tuyến cho thuộc tính bằng hàm if().

Với style() bên trong hàm if(), bạn có thể tạo kiểu trực tiếp 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.

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 kiến trúc mới cho CSS. Một lợi ích của việc sử dụng các 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 trạng thái này bằng cách sử dụng các truy vấn nội dung nghe nhìn hoặc trạng thái giả 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 nhà phát triển CSS. Khi các công nghệ như truy vấn kiểu phát triển, có thể bạn sẽ truy vấn được phạm vi trong các hàm if() và 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: