Hàm if() trong CSS đánh dấu một bước tiến lớn – từ việc chỉ viết style đơn thuần, đến việc gắn logic điều kiện vào stylesheet.
Khi bạn có những component chịu nhiều biến đổi (theme, trạng thái, responsive), sử dụng if() giúp giảm duplication, giữ logic gọn gàng, và dễ hiểu hơn.
Giới thiệu nhanh về if() trong CSS
Hàm if() cho phép bạn chọn giá trị dựa trên điều kiện.
Cú pháp tổng quát:
property: if(
condition-1: value-1;
condition-2: value-2;
...
else: fallback-value
);Nguyên tắc hoạt động:
- Trình duyệt đọc từ trên xuống dưới. Khi gặp điều kiện đúng đầu tiên, nó áp dụng giá trị tương ứng và bỏ qua phần còn lại.
- Nếu không có điều kiện nào đúng, nó dùng giá trị trong
else. - Bạn có thể dùng style(), media() và supports() để kiểm tra điều kiện.
Một vài điểm cần lưu ý:
- Mọi điều kiện và giá trị được phân tách bằng dấu chấm phẩy (;) chứ không phải dấu phẩy.
- Hàm sẽ kiểm tra từ trên xuống: khi gặp điều kiện đúng thì áp dụng giá trị tương ứng và bỏ qua phần còn lại.
else:là phần tùy chọn để xử lý khi không có điều kiện nào đúng.- Có ba loại “truy vấn” (query) mà if() hỗ trợ hiện tại:
style()– kiểm tra custom property (biến CSS) trên phần tử.media()– tương đương media query nhưng nằm ngay trong khai báo property.supports()– kiểm tra hỗ trợ tính năng CSS trong trình duyệt.
Ví dụ đơn giản:
button {
width: if(
media(any-pointer: fine): 30px;
else: 44px
);
}Các loại điều kiện if() trong CSS
style()
Giúp kiểm tra giá trị của custom property.
Ví dụ: đổi màu theo trạng thái của phần tử.
:root {
--mode: light;
}
body {
background-color: if(
style(--mode: dark): #111;
style(--mode: light): #fff;
else: #f2f2f2
);
color: if(
style(--mode: dark): #eee;
style(--mode: light): #111
);
}Dễ dàng thay đổi --mode ở cấp :root hoặc component để chuyển theme mà không cần JavaScript.
media()
media() tương tự media query, nhưng nằm trong cùng khai báo. Giúp bạn viết logic responsive mà không cần tách riêng media query ở chỗ khác.
button {
padding: if(
media(any-pointer: coarse): 12px 16px;
else: 8px 10px
);
font-size: if(
media(width < 600px): 14px;
else: 16px
);
}supports()
supports() giúp kiểm tra tính năng CSS. Hữu ích khi bạn dùng các tính năng hiện đại như color-mix(), scroll-timeline, hoặc container-type mà vẫn muốn an toàn với trình duyệt cũ.
.box {
backdrop-filter: if(
supports(backdrop-filter: blur(10px)): blur(10px);
else: none
);
}Kết hợp nhiều điều kiện if() trong CSS
Bạn có thể dùng nhiều style() hoặc media() cùng lúc. if() hỗ trợ các toán tử logic cơ bản như and, or, not rất tiện khi bạn cần điều kiện phức tạp.
.card {
border-color: if(
style(--theme: dark) and media(prefers-color-scheme: dark): #333;
style(--theme: light): #ccc;
else: #999
);
}Fallback Strategy (Chiến lược dự phòng)
Vì chưa phải trình duyệt nào cũng hỗ trợ if(), bạn nên có các lớp fallback an toàn:
Cách 1: Viết giá trị mặc định trước
CSS đọc từ trên xuống, nên hãy viết giá trị cơ bản trước, sau đó override bằng if().
button {
padding: 10px; /* fallback */
padding: if(media(any-pointer: coarse): 14px; else: 10px);
}Cách 2: Dùng @supports để kiểm tra hỗ trợ
button {
padding: 10px;
}
@supports (padding: if(media(width > 0): 1px; else: 1px)) {
button {
padding: if(media(any-pointer: coarse): 14px; else: 10px);
}
}Cách 3: Kết hợp với custom property
Khai báo giá trị mặc định ở biến, rồi thay đổi qua if() khi có hỗ trợ.
:root {
--btn-padding: 10px;
}
@supports (padding: if(media(width > 0): 1px; else: 1px)) {
:root {
--btn-padding: if(media(any-pointer: coarse): 14px; else: 10px);
}
}
button {
padding: var(--btn-padding);
}Tổng kết
if() là bước tiến giúp CSS trở nên “có tư duy” hơn – viết style theo điều kiện mà không cần rời khỏi file CSS.
Hãy bắt đầu thử nghiệm dần, ưu tiên dùng trong phần UI linh hoạt như button, card, theme switch, và responsive components.
