contain-intrinsic-width
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2023.
Thuộc tính CSS contain-intrinsic-width đặt chiều rộng của một phần tử mà trình duyệt sẽ dùng cho bố cục khi phần tử đó bị ràng buộc bởi size containment.
Cú pháp
/* Giá trị từ khóa */
contain-intrinsic-width: none;
/* Giá trị <length> */
contain-intrinsic-width: 1000px;
contain-intrinsic-width: 10rem;
/* auto <length> */
contain-intrinsic-width: auto 300px;
/* Giá trị toàn cục */
contain-intrinsic-width: inherit;
contain-intrinsic-width: initial;
contain-intrinsic-width: revert;
contain-intrinsic-width: revert-layer;
contain-intrinsic-width: unset;
Giá trị
Các giá trị sau có thể được chỉ định cho một phần tử.
none-
Phần tử không có chiều rộng nội tại.
<length>-
Phần tử có chiều rộng được chỉ định (
<length>). auto <length>-
Giá trị được ghi nhớ của chiều rộng phần tử được "hiển thị bình thường" nếu tồn tại và phần tử đang bỏ qua nội dung của nó (ví dụ, khi nó nằm ngoài màn hình); ngược lại là
<length>được chỉ định.
Mô tả
Thuộc tính này thường được áp dụng cùng với các phần tử có thể kích hoạt size containment, chẳng hạn như contain: size và content-visibility, và cũng có thể được đặt bằng thuộc tính viết tắt contain-intrinsic-size shorthand property.
Size containment cho phép user agent bố cục một phần tử như thể nó có kích thước cố định, ngăn các reflow không cần thiết bằng cách tránh re-render các phần tử con để xác định kích thước thực tế (từ đó cải thiện trải nghiệm người dùng).
Theo mặc định, size containment xử lý các phần tử như thể chúng không có nội dung, và có thể thu gọn bố cục giống như khi nội dung không có chiều rộng hay chiều cao.
Thuộc tính contain-intrinsic-width cho phép tác giả chỉ định một giá trị phù hợp để dùng làm chiều rộng cho bố cục.
Giá trị auto <length> cho phép chiều rộng của phần tử được lưu trữ nếu phần tử đó từng được "hiển thị bình thường" (với các phần tử con của nó), sau đó được dùng thay vì chiều rộng được chỉ định khi phần tử đang bỏ qua nội dung.
Điều này cho phép các phần tử ngoài màn hình với content-visibility: auto hưởng lợi từ size containment mà không cần nhà phát triển ước tính chính xác kích thước phần tử.
Giá trị được ghi nhớ không được sử dụng nếu các phần tử con đang được hiển thị (nếu size containment được bật, <length> sẽ được sử dụng).
Định nghĩa hình thức
| Initial value | none |
|---|---|
| Applies to | elements for which size containment can apply |
| Inherited | no |
| Computed value | as specified, with <length>s values computed |
| Animation type | by computed value type |
Cú pháp hình thức
contain-intrinsic-width =
auto? [ none | <length [0,∞]> ]
Ví dụ
Ngoài ví dụ bên dưới, trang contain-intrinsic-size chứa ví dụ trực tiếp minh họa hiệu ứng của việc thay đổi chiều rộng và chiều cao nội tại.
Đặt chiều rộng nội tại
HTML bên dưới định nghĩa một phần tử "contained_element" sẽ bị ràng buộc kích thước và chứa một phần tử con.
<div id="contained_element">
<div class="child_element"></div>
</div>
CSS bên dưới đặt content-visibility của contained_element thành auto, vì vậy nếu phần tử bị ẩn nó sẽ bị ràng buộc kích thước.
Chiều rộng và chiều cao được dùng khi bị ràng buộc kích thước được đặt đồng thời bằng contain-intrinsic-width và contain-intrinsic-height, tương ứng.
#contained_element {
border: 2px solid green;
width: 151px;
content-visibility: auto;
contain-intrinsic-width: 152px;
contain-intrinsic-height: 52px;
}
.child_element {
border: 1px solid red;
background: blue;
height: 50px;
width: 150px;
}
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-width |