Những ngày đầu của các truy vấn kiểu vùng chứa

Chúng tôi vẫn đang ở trong những ngày đầu tiên với các truy vấn vùng chứa. Quá sớm để hỗ trợ trình duyệt rộng rãi, nhưng Chromium đã hỗ trợ nó, Safari bắt đầu hỗ trợ nó trong phiên bản 16và Firefox có lẽ là không xa phía sau.

Hầu hết các cuộc trò chuyện ngày đầu xoay quanh truy vấn vùng chứa thường so sánh cú pháp với truy vấn phương tiện.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

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

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

Cả hai điều này đang thực hiện các truy vấn cho min-width: 600. Sự khác biệt là truy vấn phương tiện đang xem xét chiều rộng của khung nhìn để kích hoạt các thay đổi kiểu đó trong khi truy vấn vùng chứa đang xem xét chiều rộng được tính toán của .posts yếu tố. Ngọt!

Nhưng sau khi nghe CSS Podcast Tập 59, Una và Adam đã hỏi về tương lai của các truy vấn vùng chứa: truy vấn phong cách! Bản thảo làm việc hiện tại của thông số kỹ thuật Mô-đun ngăn chặn CSS cấp 3 xác định các truy vấn kiểu vùng chứa:

A truy vấn kiểu vùng chứa cho phép truy vấn giá trị tính toán của vùng chứa truy vấn. Nó là sự kết hợp boolean của từng cá nhân đặc điểm phong cách () mà mỗi truy vấn một thuộc tính cụ thể của vùng chứa truy vấn.

Nhưng chưa có ví dụ nào về cú pháp - chỉ có một mô tả ngắn gọn:

Cú pháp của một  cũng giống như đối với một kê khaivà truy vấn của nó là true nếu giá trị được tính toán của thuộc tính đã cho trên vùng chứa truy vấn khớp với giá trị đã cho (giá trị này cũng được tính theo vùng chứa truy vấn), không xác định liệu thuộc tính hoặc giá trị của nó có không hợp lệ hoặc không được hỗ trợ hay không và nếu không thì sai . Cú pháp boolean và kết hợp logic đặc điểm phong cách thành một truy vấn phong cách cũng giống như đối với Truy vấn tính năng CSS. (Xem @supports.)

Vì vậy, có, thời gian nhất định chúng ta nên mong đợi để thực hiện một cái gì đó như thế này:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

Đó là một ví dụ khá ngu ngốc. Một điều cần lưu ý là container-type không còn dựa trên thùng chứa inline-size nhưng bởi style. Chúng tôi có thể bỏ qua điều đó như vậy:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…nhưng tất cả các truy vấn vùng chứa là style truy vấn theo mặc định. Tốt. ít nhất là như ngày nay. Miriam Suzanne có một tốt đẹp phác thảo các vấn đề có thể xảy ra có thể bật lên với.

Việc truy vấn kiểu của vùng chứa có thể hữu ích ở đâu? Tôi chưa biết! Nhưng tâm trí tôi hướng đến một vài nơi:

• Giá trị thuộc tính tùy chỉnh: Chúng tôi đã thấy các thuộc tính tùy chỉnh được sử dụng như chỉ báo trạng thái, chẳng hạn như Phương pháp chuyển mạch KHÔ Ana đã xuất hiện một thời gian trước. Giá trị thay đổi và phong cách cũng vậy.
• Phương pháp tiếp cận chế độ tối thay thế: Thay vì dựa trên tất cả sự thay đổi của lớp body sẽ gán lại các giá trị thuộc tính tùy chỉnh, có thể chúng ta có thể thay đổi toàn bộ bảng màu nếu nền body thay đổi màu.
• Các điều kiện truy vấn phức tạp hơn: Giống như, giả sử, chúng tôi muốn áp dụng các kiểu khi size và style các điều kiện cho một thùng chứa được đáp ứng.

Una cũng đã đề cập trong CSS Podcast rằng các truy vấn kiểu vùng chứa có thể giúp ngăn ngừa một số tình huống tạo kiểu khó xử, chẳng hạn như nếu chúng ta có văn bản in nghiêng trong một văn bản đã được in nghiêng blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}