M

MLOG

Tiếng Việt

Khám phá quy tắc @when trong CSS, một tính năng mạnh mẽ cho phép áp dụng style có điều kiện dựa trên hỗ trợ của trình duyệt, kích thước viewport, v.v. Học qua các ví dụ thực tế.

Quy tắc @when trong CSS: Làm chủ việc áp dụng Style có điều kiện

Thế giới CSS không ngừng phát triển, mang đến cho các nhà phát triển những cách mạnh mẽ và linh hoạt hơn để tạo kiểu cho các trang web. Một trong những tính năng đang được chú ý là quy tắc @when, còn được gọi là CSS Conditional Rules Module Level 1. Quy tắc này cho phép bạn áp dụng các kiểu CSS một cách có điều kiện, dựa trên việc các điều kiện cụ thể được đáp ứng. Đây là một công cụ mạnh mẽ cho thiết kế đáp ứng, phát hiện tính năng và tạo ra các stylesheet mạnh mẽ và dễ thích ứng hơn.

Quy tắc @when trong CSS là gì?

Quy tắc @when là một at-rule có điều kiện trong CSS cho phép bạn định nghĩa các kiểu chỉ được áp dụng nếu một số điều kiện nhất định là đúng. Hãy coi nó như một câu lệnh if cho CSS của bạn. Không giống như các truy vấn media, chủ yếu tập trung vào các đặc điểm của viewport (kích thước màn hình, hướng, v.v.), @when cung cấp một cách tổng quát và mở rộng hơn để xử lý việc tạo kiểu có điều kiện. Nó mở rộng các at-rule có điều kiện hiện có như @supports và @media.

Những ưu điểm chính của việc sử dụng @when

Cú pháp của quy tắc @when

Cú pháp cơ bản của quy tắc @when như sau: 
@when <condition> {
  /* Các quy tắc CSS áp dụng khi điều kiện là đúng */
}

<condition> có thể là bất kỳ biểu thức boolean hợp lệ nào được đánh giá là đúng hoặc sai. Biểu thức này thường liên quan đến:

Các ví dụ thực tế về @when

Hãy cùng khám phá một số ví dụ thực tế để minh họa sức mạnh và tính linh hoạt của quy tắc @when.

1. Thiết kế đáp ứng với @when và Truy vấn Media

Trường hợp sử dụng phổ biến nhất cho @when là thiết kế đáp ứng, nơi bạn điều chỉnh các kiểu dựa trên kích thước màn hình. Mặc dù các truy vấn media có thể tự mình đạt được điều này, @when cung cấp một cách tiếp cận có cấu trúc và dễ đọc hơn, đặc biệt khi xử lý các điều kiện phức tạp.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

Trong ví dụ này, các kiểu trong khối @when chỉ được áp dụng khi chiều rộng màn hình nằm trong khoảng từ 768px đến 1023px (kích thước máy tính bảng thông thường). Điều này cung cấp một cách rõ ràng và ngắn gọn để định nghĩa các kiểu cho các phạm vi viewport cụ thể.

Lưu ý về quốc tế hóa: Thiết kế đáp ứng rất quan trọng đối với khán giả toàn cầu. Hãy xem xét các kích thước màn hình khác nhau ở các khu vực khác nhau. Ví dụ, việc sử dụng di động cao hơn ở một số quốc gia, làm cho thiết kế ưu tiên di động (mobile-first) càng trở nên quan trọng hơn.

2. Phát hiện tính năng với @when và @supports

@when có thể được kết hợp với @supports để áp dụng các kiểu chỉ khi một tính năng CSS cụ thể được trình duyệt hỗ trợ. Điều này cho phép bạn cải tiến lũy tiến trang web của mình, cung cấp trải nghiệm tốt hơn cho người dùng với các trình duyệt hiện đại trong khi vẫn duy trì khả năng tương thích với các trình duyệt cũ hơn.

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Các kiểu dự phòng cho các trình duyệt không hỗ trợ grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Điều chỉnh chiều rộng cho các trình duyệt cũ hơn */
  }
}

Ở đây, chúng ta sử dụng @supports để kiểm tra xem trình duyệt có hỗ trợ CSS Grid Layout hay không. Nếu có, chúng ta áp dụng các kiểu dựa trên grid cho .container. Nếu không, chúng ta cung cấp các kiểu dự phòng sử dụng flexbox để đảm bảo một bố cục tương tự được đạt được trong các trình duyệt cũ hơn.

Lưu ý về khả năng truy cập toàn cầu: Việc phát hiện tính năng rất quan trọng đối với khả năng truy cập. Các trình duyệt cũ hơn có thể thiếu hỗ trợ cho các thuộc tính ARIA mới hơn hoặc các phần tử HTML5 ngữ nghĩa. Hãy cung cấp các phương án dự phòng phù hợp để đảm bảo nội dung vẫn có thể truy cập được.

3. Kết hợp Truy vấn Media và Truy vấn Tính năng

Sức mạnh thực sự của @when đến từ khả năng kết hợp các truy vấn media và truy vấn tính năng để tạo ra các quy tắc tạo kiểu có điều kiện phức tạp và tinh tế hơn.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

Trong ví dụ này, phần tử .modal sẽ chỉ có nền mờ khi chiều rộng màn hình ít nhất là 768px và trình duyệt hỗ trợ thuộc tính backdrop-filter. Điều này cho phép bạn tạo ra các hiệu ứng hấp dẫn về mặt hình ảnh trên các trình duyệt hiện đại trong khi tránh các vấn đề về hiệu suất hoặc lỗi hiển thị tiềm ẩn trên các trình duyệt cũ hơn.

4. Tạo kiểu dựa trên Thuộc tính tùy chỉnh (Biến CSS)

@when cũng có thể được sử dụng cùng với Thuộc tính tùy chỉnh CSS (còn được gọi là biến CSS) để tạo kiểu động và theo trạng thái. Bạn có thể sử dụng JavaScript để cập nhật giá trị của một thuộc tính tùy chỉnh, và sau đó sử dụng @when để áp dụng các kiểu khác nhau dựa trên giá trị đó.

Đầu tiên, định nghĩa một thuộc tính tùy chỉnh:

:root {
  --theme-color: #007bff; /* Màu chủ đề mặc định */
  --is-dark-mode: false;
}

Sau đó, sử dụng @when để áp dụng các kiểu dựa trên giá trị của thuộc tính tùy chỉnh:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

Cuối cùng, sử dụng JavaScript để bật/tắt giá trị của thuộc tính tùy chỉnh --is-dark-mode:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

Điều này cho phép người dùng chuyển đổi giữa các chủ đề sáng và tối, với CSS tự động cập nhật dựa trên giá trị thuộc tính tùy chỉnh. Lưu ý rằng việc so sánh trực tiếp các biến CSS trong @when có thể không được hỗ trợ phổ biến trên tất cả các trình duyệt. Thay vào đó, bạn có thể cần sử dụng một giải pháp thay thế với một truy vấn media kiểm tra giá trị khác không: 

@when ( --is-dark-mode > 0 ) { ... }

Tuy nhiên, hãy đảm bảo thuộc tính tùy chỉnh có giá trị số để điều này hoạt động chính xác.

Lưu ý về khả năng truy cập: Việc cung cấp các chủ đề thay thế (ví dụ: chế độ tối) là rất quan trọng cho khả năng truy cập. Người dùng khiếm thị có thể hưởng lợi từ các chủ đề có độ tương phản cao. Hãy đảm bảo rằng công tắc chuyển đổi chủ đề của bạn có thể truy cập được bằng bàn phím và trình đọc màn hình.

5. Tạo kiểu dựa trên Thuộc tính Dữ liệu (Data Attributes)

Bạn cũng có thể sử dụng @when với các thuộc tính dữ liệu để tạo kiểu cho các phần tử dựa trên giá trị dữ liệu của chúng. Điều này có thể hữu ích để tạo các giao diện động nơi các phần tử thay đổi diện mạo dựa trên tương tác của người dùng hoặc cập nhật dữ liệu.

Ví dụ, giả sử bạn có một danh sách các công việc, và mỗi công việc có một thuộc tính data-status cho biết trạng thái của nó (ví dụ: "todo", "in-progress", "completed"). Bạn có thể sử dụng @when để tạo kiểu cho mỗi công việc một cách khác nhau dựa trên trạng thái của nó.

[data-status="todo"] {
  /* Kiểu mặc định cho các công việc cần làm */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

Lưu ý: hỗ trợ cho điều kiện kiểm tra attribute() có thể bị hạn chế hoặc chưa được triển khai đầy đủ trên tất cả các trình duyệt hiện tại. Luôn kiểm tra kỹ lưỡng.

Khả năng tương thích của trình duyệt và Polyfills

Tính đến cuối năm 2024, sự hỗ trợ của trình duyệt cho quy tắc @when vẫn đang phát triển. Mặc dù nhiều trình duyệt hiện đại hỗ trợ chức năng cốt lõi, một số trình duyệt cũ hơn có thể không. Do đó, điều quan trọng là phải kiểm tra các bảng tương thích và sử dụng các phương án dự phòng hoặc polyfill phù hợp khi cần thiết.

Luôn tham khảo các nguồn như Can I use... để kiểm tra trạng thái hỗ trợ trình duyệt hiện tại của @when và các tính năng liên quan.

Các thực hành tốt nhất khi sử dụng @when

Kết luận

Quy tắc @when là một bổ sung mạnh mẽ cho bộ công cụ CSS, mang đến cho các nhà phát triển một cách linh hoạt và biểu cảm hơn để áp dụng các kiểu có điều kiện. Bằng cách kết hợp nó với các truy vấn media, truy vấn tính năng và Thuộc tính tùy chỉnh CSS, bạn có thể tạo ra các stylesheet mạnh mẽ, dễ thích ứng và dễ bảo trì hơn. Mặc dù sự hỗ trợ của trình duyệt vẫn đang phát triển, @when là một tính năng đáng để khám phá và kết hợp vào quy trình phát triển web hiện đại của bạn.

Khi web tiếp tục phát triển, việc nắm vững các tính năng như @when sẽ rất cần thiết để tạo ra những trải nghiệm hấp dẫn, dễ tiếp cận và hiệu suất cao cho người dùng trên toàn thế giới. Hãy tận dụng sức mạnh của việc tạo kiểu có điều kiện và mở ra những khả năng mới trong quá trình phát triển CSS của bạn.