M

MLOG

Tiếng Việt

Làm chủ CSS container queries để có thiết kế web thực sự đáp ứng. Học cách điều chỉnh bố cục dựa trên kích thước vùng chứa, không chỉ viewport, để có trải nghiệm người dùng liền mạch trên mọi thiết bị.

Khai phá Thiết kế Đáp ứng: Hướng dẫn Toàn diện về CSS Container Queries

Trong nhiều năm, thiết kế web đáp ứng chủ yếu dựa vào media queries, cho phép các trang web điều chỉnh bố cục và kiểu dáng dựa trên chiều rộng và chiều cao của viewport. Mặc dù hiệu quả, cách tiếp cận này đôi khi có thể gây cảm giác hạn chế, đặc biệt khi xử lý các thành phần phức tạp cần phải thích ứng độc lập với kích thước màn hình tổng thể. Hãy đến với CSS Container Queries – một công cụ mới mạnh mẽ cho phép các phần tử phản hồi theo kích thước của phần tử chứa chúng, thay vì chính viewport. Điều này mở ra một cấp độ linh hoạt và chính xác mới trong thiết kế đáp ứng.

CSS Container Queries là gì?

CSS Container Queries là một tính năng CSS cho phép bạn áp dụng các kiểu cho một phần tử dựa trên kích thước hoặc các đặc điểm khác của vùng chứa cha của nó. Không giống như media queries, vốn nhắm mục tiêu vào viewport, container queries nhắm mục tiêu vào một phần tử cụ thể. Điều này giúp tạo ra các thành phần có thể điều chỉnh kiểu dáng dựa trên không gian có sẵn trong vùng chứa của chúng, bất kể kích thước màn hình.

Hãy tưởng tượng một thành phần thẻ hiển thị khác nhau tùy thuộc vào việc nó được đặt trong một thanh bên hẹp hay một khu vực nội dung chính rộng. Với media queries, bạn có thể phải điều chỉnh kiểu dáng của thẻ dựa trên kích thước màn hình, điều này có thể dẫn đến sự không nhất quán. Với container queries, bạn có thể định nghĩa các kiểu áp dụng cụ thể khi vùng chứa của thẻ đạt đến một chiều rộng nhất định, đảm bảo trải nghiệm nhất quán và đáp ứng trên các bố cục khác nhau.

Tại sao nên sử dụng Container Queries?

Container queries mang lại một số lợi thế so với media queries truyền thống:

Cách triển khai CSS Container Queries

Việc triển khai CSS container queries bao gồm hai bước chính: định nghĩa vùng chứa và viết các query.

1. Định nghĩa Vùng chứa

Đầu tiên, bạn cần chỉ định một phần tử làm *vùng chứa*. Điều này được thực hiện bằng thuộc tính container-type. Có hai giá trị chính cho container-type:

Bạn cũng có thể sử dụng container-name để đặt tên cho vùng chứa của mình, điều này có thể hữu ích để nhắm mục tiêu các vùng chứa cụ thể trong các query của bạn. Ví dụ:

.card-container {
  container-type: inline-size;
  container-name: cardContainer;
}

Mã này khai báo phần tử có lớp .card-container là một vùng chứa. Chúng tôi đang chỉ định inline-size để cho phép các query dựa trên chiều rộng của vùng chứa. Chúng tôi cũng đã đặt tên cho nó là cardContainer.

2. Viết các Container Queries

Khi bạn đã định nghĩa vùng chứa, bạn có thể viết các container query bằng quy tắc @container. Cú pháp tương tự như media queries:

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Query này chỉ áp dụng các kiểu bên trong dấu ngoặc nhọn khi vùng chứa có tên cardContainer có chiều rộng tối thiểu là 400px. Nó đang nhắm mục tiêu đến phần tử .card (có lẽ là con của .card-container) và điều chỉnh bố cục của nó. Nếu vùng chứa hẹp hơn 400px, các kiểu này sẽ không được áp dụng.

Viết tắt: Bạn cũng có thể sử dụng phiên bản viết tắt của quy tắc `@container` khi bạn không cần chỉ định tên vùng chứa:

@container (min-width: 400px) {
  /* Các kiểu sẽ áp dụng khi vùng chứa rộng ít nhất 400px */
}

Ví dụ Thực tế về Container Queries

Hãy xem một số ví dụ thực tế về cách bạn có thể sử dụng container queries để tạo ra các bố cục đáp ứng và dễ thích ứng hơn.

Ví dụ 1: Thành phần Thẻ

Ví dụ này cho thấy cách điều chỉnh một thành phần thẻ dựa trên chiều rộng của vùng chứa của nó. Thẻ sẽ hiển thị nội dung của nó trong một cột duy nhất khi vùng chứa hẹp và trong hai cột khi vùng chứa rộng hơn.

HTML:

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Card Image" class="card-image">
    <div class="card-content">
      <h3>Tiêu đề Thẻ</h3>
      <p>Đây là một số nội dung mẫu cho thẻ.</p>
      <a href="#">Tìm hiểu thêm</a>
    </div>
  </div>
</div>

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Trong ví dụ này, .card-container được khai báo là vùng chứa. Khi chiều rộng của vùng chứa nhỏ hơn 500px, .card sẽ sử dụng bố cục cột, xếp chồng hình ảnh và nội dung theo chiều dọc. Khi chiều rộng của vùng chứa là 500px trở lên, .card sẽ chuyển sang bố cục hàng, hiển thị hình ảnh và nội dung cạnh nhau.

Ví dụ 2: Menu Điều hướng

Ví dụ này minh họa cách điều chỉnh một menu điều hướng dựa trên không gian có sẵn. Khi vùng chứa hẹp, các mục menu sẽ được hiển thị trong một danh sách thả xuống. Khi vùng chứa rộng hơn, các mục menu sẽ được hiển thị theo chiều ngang.

HTML:

<nav class="nav-container">
  <ul>
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Giới thiệu</a></li>
    <li><a href="#">Dịch vụ</a></li>
    <li><a href="#">Liên hệ</a></li>
  </ul>
</nav>

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

Trong ví dụ này, .nav-container được khai báo là vùng chứa. Khi chiều rộng của vùng chứa nhỏ hơn 600px, các mục menu sẽ được hiển thị dưới dạng danh sách dọc. Khi chiều rộng của vùng chứa là 600px trở lên, các mục menu sẽ được hiển thị theo chiều ngang bằng cách sử dụng flexbox.

Ví dụ 3: Danh sách Sản phẩm

Một danh sách sản phẩm thương mại điện tử có thể điều chỉnh bố cục của nó dựa trên chiều rộng của vùng chứa. Trong các vùng chứa nhỏ hơn, một danh sách đơn giản với hình ảnh, tiêu đề và giá sản phẩm có thể hoạt động tốt. Khi vùng chứa lớn hơn, thông tin bổ sung như mô tả ngắn hoặc đánh giá của khách hàng có thể được thêm vào để nâng cao phần trình bày. Điều này cũng cho phép kiểm soát chi tiết hơn so với việc chỉ nhắm mục tiêu vào viewport.

HTML:

<div class="product-listing-container">
  <div class="product-item">
    <img src="product1.jpg" alt="Product 1">
    <h3>Tên Sản phẩm 1</h3>
    <p class="price">$19.99</p>
  </div>
  <div class="product-item">
    <img src="product2.jpg" alt="Product 2">
    <h3>Tên Sản phẩm 2</h3>
    <p class="price">$24.99</p>
  </div>
</div>

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

Mã CSS này trước tiên thiết lập `product-listing-container` làm một vùng chứa. Đối với các vùng chứa hẹp (nhỏ hơn 400px), mỗi mục sản phẩm chiếm 100% chiều rộng. Khi vùng chứa lớn hơn 400px, các mục sản phẩm được sắp xếp thành hai cột. Vượt quá 768px, các mục sản phẩm được hiển thị thành ba cột.

Hỗ trợ Trình duyệt và Polyfills

Container queries có hỗ trợ tốt trên các trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari và Edge. Tuy nhiên, các trình duyệt cũ hơn có thể không hỗ trợ chúng một cách tự nhiên.

Để hỗ trợ các trình duyệt cũ hơn, bạn có thể sử dụng một polyfill. Một lựa chọn phổ biến là container-query-polyfill, có thể được tìm thấy trên npm và GitHub. Polyfills lấp đầy khoảng trống cho các tính năng không được hỗ trợ, cho phép bạn sử dụng container queries ngay cả trong các trình duyệt cũ hơn.

Các Thực hành Tốt nhất khi sử dụng Container Queries

Dưới đây là một số thực hành tốt nhất cần ghi nhớ khi sử dụng container queries:

Những Cạm bẫy Thường gặp và Cách tránh

Container Queries và Media Queries: Chọn Công cụ Phù hợp

Mặc dù container queries mang lại những lợi thế đáng kể, media queries vẫn có vị trí của chúng trong thiết kế đáp ứng. Dưới đây là so sánh để giúp bạn quyết định công cụ nào là tốt nhất cho các tình huống khác nhau:

Tính năng Container Queries Media Queries
Mục tiêu Kích thước vùng chứa Kích thước viewport
Khả năng đáp ứng Dựa trên thành phần Dựa trên trang
Độ linh hoạt Cao Trung bình
Trùng lặp mã Thấp hơn Cao hơn
Trường hợp sử dụng Các thành phần tái sử dụng, bố cục phức tạp Điều chỉnh bố cục toàn cục, khả năng đáp ứng cơ bản

Nói chung, hãy sử dụng container queries khi bạn cần điều chỉnh kiểu dáng của một thành phần dựa trên kích thước của vùng chứa của nó, và sử dụng media queries khi bạn cần thực hiện các điều chỉnh bố cục toàn cục dựa trên kích thước của viewport. Thông thường, sự kết hợp của cả hai kỹ thuật là cách tiếp cận tốt nhất.

Tương lai của Thiết kế Đáp ứng với Container Queries

Container queries đại diện cho một bước tiến quan trọng trong thiết kế đáp ứng, mang lại sự linh hoạt và kiểm soát lớn hơn về cách các phần tử thích ứng với các ngữ cảnh khác nhau. Khi hỗ trợ trình duyệt tiếp tục được cải thiện, container queries có khả năng trở thành một công cụ ngày càng quan trọng đối với các nhà phát triển web. Chúng trao quyền cho các nhà thiết kế và nhà phát triển để tạo ra các trang web thực sự thích ứng và thân thiện với người dùng, cung cấp trải nghiệm liền mạch trên tất cả các thiết bị và kích thước màn hình.

Kết luận

CSS Container Queries là một sự bổ sung mạnh mẽ cho bộ công cụ thiết kế đáp ứng. Bằng cách cho phép các phần tử phản hồi theo kích thước của phần tử chứa chúng, chúng cho phép khả năng đáp ứng thực sự dựa trên thành phần và mở ra các cấp độ linh hoạt và chính xác mới trong thiết kế web. Bằng cách hiểu cách triển khai và sử dụng container queries một cách hiệu quả, bạn có thể tạo ra các trang web dễ thích ứng, dễ bảo trì và thân thiện với người dùng hơn, mang lại trải nghiệm tốt hơn cho mọi người.

Tài nguyên