Quy tắc @container trong CSS

Định nghĩa và cách sử dụng

CSS @container Quy tắc được sử dụng để định nghĩa phong cách cho các yếu tố khác dựa trên kích thước hoặc phong cách của hộp.

Các dòng xác định phong cách sẽ được lọc dựa trên điều kiện, nếu điều kiện là sự thật, thì áp dụng cho hộp. Khi kích thước hoặc giá trị phong cách của hộp thay đổi, điều kiện sẽ được đánh giá lại.

Lưu ý:Trong CSS, hộp là yếu tố bao bọc các yếu tố khác, được sử dụng để nhóm chúng lại để thiết lập phong cách.

Mô hình

Định nghĩa phong cách cho các yếu tố khác dựa trên kích thước hoặc phong cách của hộp:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Thêm phong cách nếu myContainer nhỏ hơn 500px rộng */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

Thử ngay

Ngữ pháp CSS

@container containername (containerquery) {
  ký tự xác định CSS
}

Giá trị thuộc tính

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hoàn toàn hỗ trợ quy tắc @ này.