M

MLOG

Tiếng Việt

Khám phá Truy vấn Kiểu Container CSS, một phương pháp mạnh mẽ cho thiết kế responsive cho phép các thành phần thích ứng dựa trên kiểu của container, không chỉ dựa vào kích thước viewport. Tìm hiểu các ứng dụng thực tế cho các trang web toàn cầu đa dạng.

Truy vấn Kiểu Container CSS: Thiết kế Responsive Dựa trên Kiểu cho Các Ứng dụng Toàn cầu

Thiết kế responsive truyền thống phụ thuộc nhiều vào media queries, điều chỉnh bố cục và kiểu dáng của một trang web dựa trên kích thước của viewport. Mặc dù hiệu quả, cách tiếp cận này có thể dẫn đến sự không nhất quán và khó khăn khi xử lý các thành phần phức tạp cần thích ứng với các ngữ cảnh khác nhau trong cùng một viewport. Truy vấn Kiểu Container CSS (CSS Container Style Queries) cung cấp một giải pháp chi tiết và trực quan hơn, cho phép các phần tử phản hồi lại kiểu dáng được áp dụng cho phần tử chứa nó, mang lại hành vi responsive thực sự dựa trên thành phần.

Truy vấn Kiểu Container CSS là gì?

Truy vấn Kiểu Container mở rộng sức mạnh của truy vấn container vượt ra ngoài các điều kiện đơn giản dựa trên kích thước. Thay vì kiểm tra chiều rộng hoặc chiều cao của một container, chúng cho phép bạn kiểm tra sự hiện diện của các thuộc tính và giá trị CSS cụ thể được áp dụng cho container đó. Điều này cho phép các thành phần điều chỉnh kiểu dáng của chúng dựa trên ngữ cảnh của container, thay vì chỉ dựa vào kích thước của nó.

Hãy nghĩ theo cách này: thay vì hỏi "Viewport có rộng hơn 768px không?", bạn có thể hỏi "Container này có được đặt thuộc tính tùy chỉnh --theme: dark; không?". Điều này mở ra một thế giới hoàn toàn mới về các khả năng tạo ra các thành phần linh hoạt và có thể tái sử dụng, có thể thích ứng liền mạch với các chủ đề, bố cục hoặc các biến thể thương hiệu khác nhau trên trang web hoặc ứng dụng của bạn.

Lợi ích của Truy vấn Kiểu Container

Cách sử dụng Truy vấn Kiểu Container CSS

Dưới đây là hướng dẫn chi tiết về cách triển khai truy vấn kiểu container:

1. Thiết lập Container

Đầu tiên, bạn cần chỉ định một phần tử làm container. Bạn có thể làm điều này bằng cách sử dụng thuộc tính container-type:

.container {
  container-type: inline-size;
}

Giá trị inline-size là phổ biến và hữu ích nhất, vì nó cho phép container truy vấn kích thước nội tuyến (chiều ngang) của nó. Bạn cũng có thể sử dụng size để truy vấn cả kích thước nội tuyến và khối. Việc chỉ sử dụng size có thể ảnh hưởng đến hiệu suất nếu bạn không cẩn thận.

Ngoài ra, hãy sử dụng container-type: style để sử dụng container chỉ cho truy vấn kiểu, không phải truy vấn kích thước, hoặc container-type: size style để sử dụng cả hai. Để kiểm soát tên container, hãy sử dụng container-name: my-container và sau đó nhắm mục tiêu nó bằng @container my-container (...).

2. Định nghĩa Truy vấn Kiểu

Bây giờ, bạn có thể sử dụng at-rule @container style() để định nghĩa các kiểu sẽ được áp dụng khi một điều kiện cụ thể được thỏa mãn:

@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

Trong ví dụ này, các kiểu trong quy tắc @container sẽ chỉ được áp dụng cho phần tử .component nếu phần tử chứa nó có thuộc tính tùy chỉnh --theme được đặt thành dark.

3. Áp dụng Kiểu cho Container

Cuối cùng, bạn cần áp dụng các thuộc tính CSS mà truy vấn kiểu của bạn đang kiểm tra cho phần tử container:

<div class="container" style="--theme: dark;">
  <div class="component">Đây là một thành phần.</div>
</div>

Trong ví dụ này, .component sẽ có nền tối và chữ trắng vì container của nó có kiểu --theme: dark; được áp dụng trực tiếp trong HTML (để đơn giản). Cách tốt nhất là áp dụng kiểu thông qua các class CSS. Bạn cũng có thể sử dụng JavaScript để thay đổi động các kiểu trên container, kích hoạt các cập nhật của truy vấn kiểu.

Ví dụ Thực tế cho các Ứng dụng Toàn cầu

1. Các thành phần theo chủ đề

Hãy tưởng tượng một trang web hỗ trợ nhiều chủ đề. Bạn có thể sử dụng truy vấn kiểu container để tự động điều chỉnh kiểu dáng của các thành phần dựa trên chủ đề đang hoạt động.

/* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>Tiêu đề Thẻ</h2>
    <p>Nội dung thẻ.</p>
  </div>
</div>

Trong ví dụ này, thành phần .card sẽ tự động chuyển đổi giữa chủ đề tối và sáng dựa trên thuộc tính --theme của container chứa nó. Điều này rất có lợi cho các trang web nơi người dùng có thể chọn các chủ đề khác nhau dựa trên sở thích của họ.

2. Các biến thể bố cục

Bạn có thể sử dụng truy vấn kiểu container để tạo ra các biến thể bố cục khác nhau cho các thành phần dựa trên không gian có sẵn hoặc bố cục tổng thể của trang. Hãy xem xét một thành phần chọn ngôn ngữ. Trong thanh điều hướng chính, nó có thể là một menu thả xuống nhỏ gọn. Trong phần chân trang, nó có thể là một danh sách đầy đủ các ngôn ngữ có sẵn.

/* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* Kiểu cho menu thả xuống nhỏ gọn */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* Kiểu cho danh sách đầy đủ các ngôn ngữ */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

Cách tiếp cận này rất có giá trị đối với các trang web phục vụ nhiều giao diện người dùng đa dạng trên các thiết bị và nền tảng khác nhau. Hãy xem xét rằng cấu trúc trang web trên di động và máy tính để bàn thường khác nhau rất nhiều, và điều này có thể giúp các thành phần thích ứng.

3. Thích ứng với Loại Nội dung

Hãy xem xét một trang web tin tức với các bản tóm tắt bài viết. Bạn có thể sử dụng truy vấn kiểu container để điều chỉnh cách trình bày của các bản tóm tắt dựa trên việc chúng có chứa hình ảnh hay không.

/* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (có hình ảnh) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (không có hình ảnh) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

Điều này cho phép trình bày các bản tóm tắt bài viết một cách hấp dẫn và nhiều thông tin hơn, cải thiện trải nghiệm người dùng. Lưu ý rằng việc đặt thuộc tính --has-image trực tiếp trong HTML không phải là lý tưởng. Một cách tiếp cận tốt hơn là sử dụng JavaScript để phát hiện sự hiện diện của hình ảnh và tự động thêm hoặc xóa một class (ví dụ: .has-image) vào phần tử .article-summary, sau đó đặt thuộc tính tùy chỉnh --has-image trong quy tắc CSS cho class .has-image.

4. Kiểu dáng theo địa phương

Đối với các trang web quốc tế, truy vấn kiểu container có thể được sử dụng để điều chỉnh kiểu dáng dựa trên ngôn ngữ hoặc khu vực. Ví dụ, bạn có thể muốn sử dụng kích thước phông chữ hoặc khoảng cách khác nhau cho các ngôn ngữ có văn bản dài hơn.

/* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

Điều này cho phép tạo ra những trải nghiệm phù hợp và thân thiện hơn với người dùng cho các đối tượng ngôn ngữ khác nhau. Hãy xem xét rằng một số ngôn ngữ như tiếng Ả Rập và tiếng Do Thái được viết từ phải sang trái, và cần phải áp dụng các kiểu cụ thể. Đối với tiếng Nhật và các ngôn ngữ Đông Á khác, có thể cần khoảng cách và kích thước phông chữ khác nhau để hiển thị các ký tự một cách chính xác.

5. Cân nhắc về Khả năng Truy cập

Truy vấn kiểu container cũng có thể tăng cường khả năng truy cập bằng cách điều chỉnh kiểu của thành phần dựa trên sở thích của người dùng hoặc khả năng của thiết bị. Ví dụ, bạn có thể tăng độ tương phản của một thành phần nếu người dùng đã bật chế độ tương phản cao trong hệ điều hành của họ.

/* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

Điều này đảm bảo rằng trang web của bạn có thể sử dụng và truy cập được cho mọi người, bất kể khả năng của họ. Lưu ý việc sử dụng media query @media (prefers-contrast: more) để phát hiện chế độ tương phản cao ở cấp độ hệ điều hành, và sau đó đặt thuộc tính tùy chỉnh --high-contrast. Điều này cho phép bạn kích hoạt các thay đổi kiểu bằng cách sử dụng một truy vấn kiểu dựa trên cài đặt hệ thống của người dùng.

Các phương pháp tốt nhất

Hỗ trợ của Trình duyệt

Truy vấn kiểu container có sự hỗ trợ tuyệt vời 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ợ đầy đủ tính năng này. Hãy chắc chắn sử dụng truy vấn tính năng để cung cấp các kiểu dự phòng cho các trình duyệt này hoặc sử dụng một polyfill.

Kết luận

Truy vấn Kiểu Container CSS cung cấp một cách tiếp cận mạnh mẽ và linh hoạt cho thiết kế responsive, cho phép bạn tạo ra các trang web và ứng dụng thực sự dựa trên thành phần và có khả năng thích ứng. Bằng cách tận dụng kiểu dáng của các phần tử container, bạn có thể mở ra một cấp độ kiểm soát và chi tiết mới trong thiết kế của mình, dẫn đến những trải nghiệm dễ bảo trì hơn, có khả năng mở rộng hơn và thân thiện với người dùng hơn cho khán giả toàn cầu.

Hãy nắm bắt truy vấn kiểu container để xây dựng các thành phần responsive có thể thích ứng liền mạch với các chủ đề, bố cục, ngôn ngữ và yêu cầu về khả năng truy cập khác nhau, tạo ra một trải nghiệm web thực sự toàn cầu.

Tài nguyên