CSS @when: Làm chủ Tạo kiểu có Điều kiện cho Thiết kế Web Hiện đại

Trong bối cảnh phát triển web không ngừng thay đổi, khả năng tạo ra các giao diện người dùng linh hoạt và đáp ứng là tối quan trọng. CSS, nền tảng của trình bày trực quan, tiếp tục giới thiệu các tính năng mạnh mẽ giúp các nhà phát triển xây dựng các trang web thông minh và dễ thích ứng hơn. Một trong những tính năng đột phá đó là quy tắc @when, cho phép tạo kiểu có điều kiện, giúp chúng ta áp dụng các quy tắc CSS chỉ khi các điều kiện cụ thể được đáp ứng. Điều này mở ra một thế giới các khả năng để tạo ra các thiết kế thực sự đáp ứng và nhận biết ngữ cảnh.

CSS @when là gì?

Quy tắc @when là một sự bổ sung mạnh mẽ cho đặc tả CSS, hoạt động cùng với các quy tắc @media hoặc @supports. Nó hoạt động như một khối điều kiện, có nghĩa là các khai báo CSS trong phạm vi của nó sẽ chỉ được áp dụng nếu điều kiện được chỉ định đánh giá là đúng. Về cơ bản, nó cung cấp một cách chi tiết và biểu cảm hơn để kiểm soát khi nào các kiểu nhất định được kích hoạt, vượt ra ngoài việc định điều kiện ở cấp độ khối truyền thống của riêng các truy vấn @media.

Hãy coi nó như một câu lệnh `if` được tinh chỉnh cao cấp cho CSS của bạn. Thay vì áp dụng toàn bộ một bộ kiểu dựa trên một điều kiện rộng, @when cho phép bạn nhắm mục tiêu các khai báo cụ thể trong một quy tắc, làm cho các stylesheet của bạn hiệu quả và dễ bảo trì hơn.

Sức mạnh tổng hợp: @when với @media và @supports

Sức mạnh thực sự của @when được thể hiện khi nó được sử dụng kết hợp với các quy tắc điều kiện hiện có:

1. @when với Truy vấn @media

Đây có thể coi là trường hợp sử dụng phổ biến và có tác động lớn nhất đối với @when. Theo truyền thống, bạn có thể bao bọc toàn bộ các quy tắc CSS trong một truy vấn @media. Với @when, giờ đây bạn có thể áp dụng có điều kiện các khai báo cụ thể trong một quy tắc dựa trên các điều kiện của truy vấn media.

Ví dụ: Kiểu chữ đáp ứng (Responsive Typography)

Giả sử bạn muốn điều chỉnh kích thước phông chữ của một đoạn văn, nhưng chỉ khi khung nhìn rộng hơn 768 pixel. Nếu không có @when, bạn có thể làm như sau:

            .my-paragraph {
  font-size: 16px;
}

@media (min-width: 768px) {
  .my-paragraph {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

Giờ đây, sử dụng @when, bạn có thể đạt được kết quả tương tự một cách ngắn gọn hơn và với khả năng kiểm soát tốt hơn:

            .my-paragraph {
  font-size: 16px;
  @when (min-width: 768px) {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

Trong ví dụ này:

• font-size cơ bản là 16px luôn được áp dụng.
• font-size là 18px được áp dụng chỉ khi chiều rộng khung nhìn là 768 pixel hoặc hơn.

Cách tiếp cận này cực kỳ hữu ích để thực hiện các điều chỉnh chi tiết cho các thuộc tính cụ thể dựa trên kích thước màn hình, hướng hoặc các tính năng media khác mà không cần lặp lại toàn bộ các bộ quy tắc.

Ví dụ Toàn cầu: Thích ứng các yếu tố UI cho các thiết bị khác nhau

Hãy xem xét một nền tảng thương mại điện tử toàn cầu. Một thẻ sản phẩm có thể hiển thị dạng xem nhỏ gọn trên thiết bị di động nhưng lại có dạng xem chi tiết hơn trên màn hình lớn hơn. Sử dụng @when với @media, bạn có thể xử lý các chuyển đổi này một cách tinh tế:

            .product-card {
  padding: 10px;
  text-align: center;
  @when (min-width: 600px) {
    padding: 20px;
    text-align: left;
  }
  @when (min-width: 1024px) {
    padding: 30px;
    display: flex;
    align-items: center;
  }
}

.product-image {
  width: 100%;
  height: 150px;
  @when (min-width: 600px) {
    width: 200px;
    height: 200px;
  }
  @when (min-width: 1024px) {
    width: 250px;
    height: 250px;
    margin-right: 20px;
  }
}

            

              
                Copy
              
            
          

Điều này cho phép .product-card và các yếu tố bên trong nó như .product-image điều chỉnh dần các kiểu của chúng khi kích thước khung nhìn tăng lên, mang lại trải nghiệm phù hợp trên nhiều loại thiết bị trên toàn cầu.

2. @when với Truy vấn @supports

Quy tắc @supports cho phép bạn kiểm tra xem một trình duyệt có hỗ trợ một cặp thuộc tính-giá trị CSS cụ thể hay không. Bằng cách kết hợp nó với @when, bạn có thể áp dụng có điều kiện các kiểu chỉ khi một tính năng trình duyệt cụ thể có sẵn.

Ví dụ: Sử dụng một Tính năng CSS Mới

Hãy tưởng tượng bạn muốn sử dụng thuộc tính thử nghiệm backdrop-filter. Không phải tất cả các trình duyệt hoặc các phiên bản cũ hơn đều hỗ trợ thuộc tính này. Bạn có thể sử dụng @when với @supports để áp dụng nó một cách mượt mà:

            .modal-background {
  background-color: rgba(0, 0, 0, 0.5);
  @when supports (backdrop-filter: blur(10px)) {
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

Trong trường hợp này:

• background-color luôn được áp dụng như một giải pháp dự phòng.
• backdrop-filter được áp dụng chỉ khi trình duyệt hỗ trợ khai báo backdrop-filter: blur(10px).

Điều này rất quan trọng cho việc cải tiến lũy tiến (progressive enhancement), đảm bảo rằng thiết kế của bạn vẫn hoạt động và hấp dẫn về mặt hình ảnh ngay cả trong các môi trường không hỗ trợ các tính năng CSS mới nhất.

Ví dụ Toàn cầu: Cải tiến Lũy tiến cho Hiệu ứng Động

Hãy xem xét một trang web có các hiệu ứng động tinh tế. Một số hiệu ứng động nâng cao có thể dựa vào các thuộc tính CSS mới hơn như animation-composition hoặc các hàm easing cụ thể. Bạn có thể sử dụng @when và @supports để cung cấp một giải pháp dự phòng hoặc một hiệu ứng động đơn giản hơn cho các trình duyệt không hỗ trợ các thuộc tính nâng cao này.

            .animated-element {
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;

  @when supports (animation-composition: replace) {
    /* More advanced animation properties or sequences */
    animation: slideIn 1s forwards;
    animation-composition: replace;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

            

              
                Copy
              
            
          

Ở đây, các trình duyệt hỗ trợ animation-composition: replace sẽ nhận được một chuỗi hiệu ứng động phức tạp hơn, trong khi các trình duyệt khác sẽ quay lại sử dụng thuộc tính transition đơn giản hơn, đảm bảo một trải nghiệm nhất quán, mặc dù có sự khác biệt, cho người dùng trên toàn thế giới.

3. Kết hợp @when với Nhiều Điều kiện

Bạn cũng có thể xâu chuỗi nhiều điều kiện trong một quy tắc @when duy nhất, tạo ra logic tạo kiểu thậm chí còn cụ thể hơn. Điều này được thực hiện bằng cách sử dụng các toán tử logic như and, or, và not.

Ví dụ: Logic Đáp ứng Phức tạp

Hãy tưởng tượng một kịch bản trong đó thanh bên chỉ nên được ẩn trên các màn hình nhỏ hơn, nhưng chỉ khi một cài đặt ưu tiên của người dùng cụ thể (giả sử được chỉ định bằng một lớp trên body) không hoạt động.

            .sidebar {
  display: block;
  width: 250px;

  /* Hide sidebar on small screens AND not in preference mode */
  @when (max-width: 767px) and not (.no-sidebar-on-mobile) {
    display: none;
  }

  /* Show sidebar on larger screens OR if preference mode is active on small screens */
  @when (min-width: 768px) or (.sidebar-on-mobile) {
    display: block;
  }
}

            

              
                Copy
              
            
          

Mức độ tạo kiểu có điều kiện này cho phép các hành vi UI rất phức tạp được tùy chỉnh cho các ngữ cảnh và tương tác người dùng cụ thể.

Cú pháp và các Thực tiễn Tốt nhất

Cú pháp cơ bản cho @when rất đơn giản:

            selector {
  property: value;
  @when (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

Khi kết hợp nhiều điều kiện, cú pháp sẽ trở thành:

            selector {
  property: value;
  @when (condition1) and (condition2) {
    property: value;
  }
  @when (condition1) or (condition2) {
    property: value;
  }
  @when not (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

Các Thực tiễn Tốt nhất Chính:

• Ưu tiên Tính dễ đọc: Mặc dù @when có thể làm cho các kiểu ngắn gọn hơn, hãy tránh các điều kiện lồng nhau quá phức tạp có thể trở nên khó giải mã. Hãy chia nhỏ logic phức tạp thành các quy tắc riêng biệt nếu cần.
• Cải tiến Lũy tiến: Luôn cung cấp một giải pháp dự phòng mượt mà cho các trình duyệt hoặc môi trường không hỗ trợ các tính năng được nhắm mục tiêu bởi các quy tắc @when của bạn, đặc biệt khi được sử dụng với @supports.
• Hiệu suất: Mặc dù bản thân @when thường hiệu quả, hãy lưu ý đến logic điều kiện quá phức tạp có thể ảnh hưởng đến hiệu suất phân tích cú pháp, mặc dù đây hiếm khi là vấn đề với việc sử dụng thông thường.
• Hỗ trợ Trình duyệt: Hãy theo dõi hỗ trợ của trình duyệt cho @when và các quy tắc đi kèm của nó. Kể từ khi được giới thiệu, việc áp dụng đang tăng lên, nhưng điều cần thiết là phải kiểm tra trên các trình duyệt mục tiêu của bạn. Sử dụng các công cụ như Can I Use để kiểm tra thông tin tương thích mới nhất.
• Phạm vi Toàn cầu: Khi thiết kế cho đối tượng toàn cầu, hãy tận dụng @when với @media để phục vụ cho vô số kích thước và độ phân giải thiết bị phổ biến trên toàn thế giới. Cũng nên xem xét các điều kiện mạng khác nhau; bạn có thể sử dụng các truy vấn media prefers-reduced-motion trong @when để tắt các hiệu ứng động cho những người dùng đã chọn không sử dụng chúng.
• Khả năng Bảo trì: Sử dụng @when để giữ các kiểu liên quan lại với nhau. Nếu giá trị của một thuộc tính thay đổi dựa trên một điều kiện, việc có cả giá trị mặc định và giá trị có điều kiện trong cùng một khối quy tắc thường dễ bảo trì hơn là phân tán chúng trên các truy vấn @media khác nhau.

Hỗ trợ Trình duyệt và Triển vọng Tương lai

Quy tắc @when là một sự bổ sung tương đối mới trong thế giới CSS. Kể từ khi được áp dụng rộng rãi ban đầu, nó được hỗ trợ trong các trình duyệt hiện đại như Chrome, Firefox, Safari và Edge. Tuy nhiên, điều quan trọng là phải luôn kiểm tra dữ liệu tương thích trình duyệt mới nhất cho các phiên bản và tính năng cụ thể.

Nhóm làm việc CSS của W3C tiếp tục tinh chỉnh và mở rộng các khả năng của CSS. Các tính năng như @when, cùng với các quy tắc điều kiện và lồng nhau khác, báo hiệu một sự chuyển dịch hướng tới các khả năng tạo kiểu có tính lập trình và biểu cảm hơn trong CSS. Xu hướng này rất quan trọng để xây dựng các trải nghiệm web phức tạp, thích ứng và thân thiện với người dùng, phục vụ cho một cơ sở người dùng toàn cầu đa dạng.

Khi thiết kế web tiếp tục đón nhận sự thích ứng và cá nhân hóa, @when sẽ trở thành một công cụ không thể thiếu trong kho vũ khí của nhà phát triển. Khả năng tinh chỉnh các kiểu dựa trên một loạt các điều kiện, từ đặc điểm thiết bị đến khả năng của trình duyệt, trao quyền cho chúng ta để tạo ra các giao diện phức tạp và nhận biết ngữ cảnh hơn.

Kết luận

CSS @when là một tính năng mạnh mẽ và tinh tế giúp tăng cường đáng kể khả năng viết các kiểu có điều kiện của chúng ta. Bằng cách tận dụng sức mạnh tổng hợp của nó với @media và @supports, các nhà phát triển có thể tạo ra các thiết kế web đáp ứng, thích ứng và mạnh mẽ hơn. Cho dù bạn đang điều chỉnh kiểu chữ cho các kích thước màn hình khác nhau, áp dụng có điều kiện các tính năng CSS nâng cao, hay xây dựng các giao diện người dùng tương tác phức tạp, @when cung cấp sự chính xác và linh hoạt cần thiết để đáp ứng các yêu cầu của phát triển web hiện đại. Việc áp dụng tính năng này chắc chắn sẽ dẫn đến những trải nghiệm kỹ thuật số tinh vi hơn và lấy người dùng làm trung tâm cho khán giả toàn cầu.

Hãy bắt đầu thử nghiệm với @when trong các dự án của bạn ngay hôm nay để xây dựng các trang web thông minh hơn, dễ thích ứng hơn và sẵn sàng cho tương lai.