Chứa - Thủ thuật CSS

Các containbất động sản trong CSS chỉ cho trình duyệt mà các yếu tố và hậu duệ của nó được coi là độc lập của cây tài liệu càng nhiều càng tốt. Điều này có khả năng mang lại lợi ích về hiệu suất với các tính toán về bố cục, kiểu dáng, màu sơn, kích thước hoặc bất kỳ sự kết hợp nào cho một vùng giới hạn của DOM chứ không phải toàn bộ trang.

Thuộc tính có năm giá trị tiêu chuẩn và hai giá trị viết tắt kết hợp các biến thể của các giá trị tiêu chuẩn. Mỗi giá trị có một số lợi ích riêng và được chia sẻ tùy thuộc vào ngữ cảnh của yếu tố áp dụng chúng.

Việc sử dụng điển hình của thuộc tính này là một phần tử có chứa nội dung của một số loại. Hãy xem xét một tiện ích con hiển thị dữ liệu đến làm thay đổi bố cục và hình ảnh của phần tử con. Một yếu tố khác cần xem xét là một yếu tố có chứa kết quả của dữ liệu bên thứ ba, chẳng hạn như quảng cáo biểu ngữ, trong đó lợi ích của việc ngăn chặn cho phép chúng tôi loại bỏ ưu tiên vẽ nội dung nhất định, cách xử lý kích thước nội dung đã nhận hoặc xác định xem nội dung thậm chí sẽ được nhìn thấy. Mặt khác, một trang web chủ yếu là tĩnh sẽ nhận được ít lợi ích ngoài bố cục đầu tiên và vẽ lên màn hình khi tải trang.

Cú pháp

div ( contain: none | strict | content | ( size || layout || style || paint ); )

div ( contain: none; /* no containment on element */ contain: layout; /* influences how element relates to other elements in the document */ contain: paint; /* influences how element is painted to screen */ contain: size; /* influences how element affects size calculations for the page */ contain: style; /* is considered at-risk for removal from spec */ 
 contain: content; /* combines layout and paint */ contain: strict; /* combines layout, paint, and size */ )

Giá trị tài sản

Bố trí

Các layoutgiá trị ngăn chặn thông báo cho trình duyệt mà không ai trong số con cháu của phần tử ảnh hưởng đến các yếu tố khác trên trang, cũng không làm những yếu tố khác có ảnh hưởng trên con cháu của các yếu tố kiềm chế. Điều này cho phép trình duyệt có khả năng giảm số lượng phép tính cần thiết khi tạo bố cục trang

Một lợi ích khác là nếu phần tử được chứa nằm ngoài màn hình hoặc bị che khuất theo một cách nào đó, thì trình duyệt có thể trì hoãn hoặc chuyển các phép tính liên quan sang mức ưu tiên thấp hơn. Ví dụ về điều này là một phần tử được chứa không có trong chế độ xem ở cuối phần tử khối và phần đầu của phần tử khối đó được hiển thị.

Một phần tử có vùng layoutchứa sẽ trở thành một hộp chứa cho các phần tử được định vị - chẳng hạn như các phần tử có vị trí tuyệt đối. Phần tử nhận được một ngữ cảnh xếp chồng mới liên quan đến trang và thuộc tính z-index có thể được sử dụng. Mặc dù, các thuộc tính hướng, chẳng hạn như tophoặc left, không áp dụng.

Mặc dù phần tử con của phần tử được chứa có thể không ảnh hưởng đến các phần tử khác trên trang, chúng vẫn có thể ảnh hưởng đến phần tử tổ tiên được chứa của chúng. Ví dụ: một phần tử con có thể khiến phần tử được chứa thay đổi kích thước để phản ứng với các thay đổi. Trong trường hợp đó, phần tử được chứa vẫn có khả năng ảnh hưởng đến các phần tử khác trên trang nhưng phần tử con vẫn sẽ không tham gia vào các phép tính đó.

Bản trình diễn sau đây cung cấp một lời giải thích đơn giản cho những gì sẽ xảy ra khi layoutáp dụng biện pháp ngăn chặn. Khi nhấp vào từng hộp trên cùng, ngăn chặn được áp dụng và các mũi tên màu đỏ sẽ thay đổi hình thức. Sự xuất hiện của các mũi tên màu đỏ gợi ý liệu con cháu của hộp có ảnh hưởng đến các hộp khác trên trang trong quá trình tính toán bố cục hay không.

Sơn

Các paintgiá trị ngăn chặn thông báo cho trình duyệt mà không ai trong số các hậu duệ của nguyên tố này sẽ được sơn bên ngoài biên giới-box của nguyên tố này. Nếu một phần tử con được định vị để có một phần của hộp giới hạn của nó bị cắt bớt bởi phần tử chứa border-boxthì phần đó sẽ không được sơn. Nếu một phần tử con được đặt hoàn toàn bên ngoài phần tử được chứa border-boxthì nó sẽ không được sơn. Điều này tương tự như áp dụng overflow: hidden;cho phần tử, nhưng không có lợi ích của việc bỏ qua hoặc giảm các phép tính cần thiết.

Một lợi ích khác là nếu phần tử được chứa không hiển thị theo một cách nào đó trong khung nhìn, thì nó có thể bỏ qua phần tử con của phần tử khi thực hiện các phép tính tô vẽ. Ví dụ về điều này là một phần tử được đặt ngoài trang ở bên trái của khung nhìn. Nếu phần tử được chứa không hiển thị, thì nó đảm bảo rằng nội dung của nó sẽ không hiển thị. Do đó, họ không bắt buộc phải tham gia vào tính toán sơn.

Một phần tử có vùng paintchứa cũng trở thành một hộp chứa cho các phần tử con được định vị - chẳng hạn như các phần tử có vị trí tuyệt đối. Phần tử cũng nhận được một ngữ cảnh xếp chồng mới liên quan đến trang và thuộc z-indextính có thể được sử dụng. Mặc dù, các thuộc tính hướng, chẳng hạn như tophoặc left, không áp dụng.

Phần tử cuộn có thể nhận được các lợi ích bổ sung bằng cách đặt con cháu của nó trong một lớp sơn mới có thể hỗ trợ hiệu suất cuộn. Thông thường, các phần tử cuộn có thể gây ra sửa chữa liên tục khi các phần tử con xuất hiện và biến mất trong quá trình cuộn. Phần tử cuộn có ngăn chứa sơn có thể bỏ qua việc sơn lại liên tục này đối với các phần tử cuộn.

Bản trình diễn sau đây cung cấp một lời giải thích đơn giản cho những gì sẽ xảy ra khi paintáp dụng biện pháp ngăn chặn. Nhấp vào bất kỳ đâu để chuyển đổi ngăn chứa trên hộp màu tím. Khi áp dụng biện pháp ngăn chặn, một số ô màu xanh lá cây sẽ thay đổi hình thức bên ngoài. Sự xuất hiện của các hộp màu xanh lá cây cho thấy chúng được sơn hoặc không được sơn như thế nào.

Kích thước

Các sizegiá trị ngăn chặn thông báo cho trình duyệt mà không ai trong số các con cháu cần phải được xem xét khi thực hiện các tính toán bố trí cho trang. Phần tử được chứa phải có heightvà widthcác thuộc tính được áp dụng, nếu không nó sẽ thu gọn thành hình vuông không pixel. Chỉ bản thân phần tử cần được xem xét để tính toán bố cục trang vì phần tử con không thể ảnh hưởng đến kích thước của phần tử. Các con cháu của phần tử được chứa hoàn toàn bị bỏ qua trong các tính toán như vậy; như thể nó không có hậu duệ gì cả.

Để có đầy đủ lợi ích của việc tối ưu hóa, biện pháp sizengăn chặn thường được áp dụng với các loại ngăn chặn khác.

Một phần tử có vùng sizechứa sẽ nhận được một ngữ cảnh xếp chồng mới liên quan đến trang và thuộc z-indextính có thể được sử dụng. Mặc dù, các thuộc tính hướng, chẳng hạn như tophoặc left, không áp dụng.

Bản trình diễn sau đây cung cấp một lời giải thích đơn giản cho những gì sẽ xảy ra khi sizeáp dụng biện pháp ngăn chặn. Nhấp vào bất kỳ đâu để chuyển đổi ngăn chứa trên hộp màu tím. Khi áp dụng biện pháp ngăn chặn, hộp màu tím sẽ thay đổi về kích thước. Theo mặc định, chiều cao của hộp màu tím được xác định bởi con của nó, nhưng với ngăn chứa, chiều cao phải được xác định. Sau khi áp dụng biện pháp ngăn chặn, con cháu không còn tham gia vào các tính toán bố cục liên quan đến kích thước.

Phong cách

Các stylegiá trị ngăn chặn thông báo cho trình duyệt một số thuộc tính CSS, như quầy và dấu ngoặc kép, sẽ được scoped để các yếu tố kiềm chế.

Các thuộc tính counter-incrementvà counter-setthuộc tính phải nằm trong phạm vi cây con của phần tử chứa. Nếu mở rộng ra bên ngoài phần tử được chứa thì một bộ đếm mới sẽ được tạo.

Giá trị tài sản nội dung của open-quote, close-quote, no-open-quote, và no-close-quotephải được scoped để cây con các yếu tố chứa của.

Giá trị ngăn chặn này được coi là có nguy cơ bị loại bỏ khỏi đặc điểm kỹ thuật.

Nội dung

Các contentgiá trị ngăn chặn là sự kết hợp của cả hai giá trị ngăn chặn bố trí và sơn. Điều này tương đương với việc áp dụng biện pháp ngăn chặn theo cách này:

div ( contain: layout paint; )

Tất cả các lợi ích tiềm năng được mô tả ở trên cho mỗi giá trị sau đó sẽ có sẵn cho phần tử được chứa. Việc ngăn chặn này sẽ được coi là tương đối an toàn để áp dụng rộng rãi cho nhiều phần tử trên trang.

Nghiêm khắc

Các strictgiá trị ngăn chặn là sự kết hợp của layout, paintvà sizegiá trị ngăn chặn. Điều này tương đương với việc áp dụng biện pháp ngăn chặn theo cách này:

div ( contain: layout paint size; )

Tất cả các lợi ích tiềm năng được mô tả ở trên cho mỗi giá trị sau đó sẽ có sẵn cho phần tử được chứa.

Là giá trị "nghiêm ngặt" nhất trong các giá trị ngăn chặn, nên sử dụng giá trị này một cách thận trọng. Điều này là do các yêu cầu về kích thước mà nó đặt ra đối với phần tử được chứa. Với những yêu cầu này, giá trị ngăn chặn này thực sự mang lại những lợi ích hiệu suất tiềm năng nhất của việc ngăn chặn.

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome	Firefox	I E	Cạnh	Safari
52	69	Không	79	Không

Di động / Máy tính bảng

Chrome dành cho Android	Android Firefox	Android	iOS Safari
88	85	81	Không