TL;DR
Thuộc tính Lưu trữ CSS mới cho phép nhà phát triển giới hạn phạm vi công việc về kiểu, bố cục và lớp vẽ của trình duyệt.
Hàm này có một vài giá trị, cú pháp của hàm như sau:
contain: none | strict | content | [ size || layout || style || paint ]
Trình duyệt này đã có trong Chrome 52+ và Opera 40+ (và được hỗ trợ công khai từ Firefox), vì vậy hãy dùng thử và cho chúng tôi biết cách bạn thực hiện!
Thuộc tính chứa
Khi tạo một ứng dụng web hoặc thậm chí là một trang web phức tạp, một thách thức chính về hiệu suất là hạn chế tác động của kiểu, bố cục và lớp vẽ. Thông thường, toàn bộ của DOM được xem là "trong phạm vi" của công việc tính toán, có nghĩa là việc thử một "chế độ xem" độc lập trong một ứng dụng web có thể là một việc khó khăn: những thay đổi trong một phần của DOM có thể ảnh hưởng đến các phần khác và không có cách nào để cho trình duyệt biết nên nằm trong hay nằm ngoài phạm vi của nó.
Ví dụ: giả sử một phần của DOM của bạn trông giống như sau:
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
Và bạn thêm một phần tử mới vào một khung hiển thị, việc này sẽ kích hoạt kiểu, bố cục và tô màu:
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>
Tuy nhiên, trong trường hợp này, toàn bộ DOM nằm trong phạm vi một cách hiệu quả, nghĩa là các phép tính về kiểu, bố cục và màu vẽ sẽ phải xem xét tất cả các phần tử bất kể chúng có được thay đổi hay không. DOM càng lớn thì càng cần nhiều thao tác tính toán, nghĩa là bạn có thể làm cho ứng dụng của mình không phản hồi hoạt động đầu vào của người dùng.
Tin vui là các trình duyệt hiện đại đang trở nên thực sự thông minh trong việc tự động giới hạn phạm vi của các kiểu, bố cục và tô màu, tức là mọi thứ sẽ trở nên nhanh hơn mà bạn không cần phải làm gì cả.
Tuy nhiên, tin thậm chí còn tốt hơn là có một thuộc tính CSS mới trao quyền kiểm soát phạm vi cho nhà phát triển: Vùng chứa.
Vùng chứa CSS là một thuộc tính mới (chứa từ khóa chứa) hỗ trợ 4 giá trị:
layoutpaintsizestyle
Mỗi giá trị trong số này cho phép bạn giới hạn mức độ công việc kết xuất mà trình duyệt cần thực hiện. Hãy cùng xem xét từng chỉ chi tiết hơn một chút.
Bố cục (chứa: bố cục)
Vùng chứa bố cục có lẽ là lợi ích lớn nhất của vùng chứa, cùng với contain: paint.
Bố cục thường ở trong phạm vi tài liệu, nên bố cục điều chỉnh theo tỷ lệ tương ứng với kích thước của DOM. Vì vậy, nếu thay đổi thuộc tính left của một phần tử, bạn có thể cần kiểm tra mọi phần tử riêng lẻ trong DOM.
Việc bật tính năng ngăn chặn ở đây có thể làm giảm số lượng phần tử xuống chỉ còn một số ít phần tử, thay vì toàn bộ tài liệu, giúp trình duyệt tiết kiệm rất nhiều công việc không cần thiết và cải thiện đáng kể hiệu suất.
Sơn (chứa: sơn)
Sơn phạm vi là một lợi ích vô cùng hữu ích khác của khả năng ngăn chặn. Về cơ bản, chất chứa sơn sẽ cắt bớt yếu tố hữu quan, nhưng nó cũng có một số tác dụng phụ khác:
- Đóng vai trò như một khối chứa các phần tử vị trí cố định và có vị trí tuyệt đối. Tức là mọi phần tử con đều được định vị dựa trên phần tử có
contain: paintchứ không phải bất kỳ phần tử mẹ nào khác, chẳng hạn như phần tử mẹ (tài liệu). - Nó trở thành ngữ cảnh xếp chồng. Tức là những nội dung như
z-indexsẽ ảnh hưởng đến phần tử và phần tử con sẽ được xếp chồng theo ngữ cảnh mới. - Ngôn ngữ này sẽ trở thành một bối cảnh định dạng mới. Điều này có nghĩa là nếu bạn có một phần tử cấp khối có vùng chứa sơn chẳng hạn, thì phần tử đó sẽ được coi là một môi trường bố cục mới, độc lập. Tức là bố cục bên ngoài phần tử thường sẽ không ảnh hưởng đến phần tử con của phần tử chứa.
Kích thước (chứa: kích thước)
contain: size có nghĩa là phần tử con không ảnh hưởng đến kích thước của phần tử mẹ và phương diện được dự đoán hoặc khai báo của phần tử đó sẽ là kích thước được sử dụng. Do đó, nếu bạn đặt contain: size nhưng không chỉ định kích thước cho phần tử (trực tiếp hoặc thông qua các thuộc tính linh hoạt), phần tử sẽ được kết xuất ở kích thước 0px x 0px!
Việc giới hạn kích thước thực ra là một biện pháp đo đai và nẹp nhằm đảm bảo bạn không dựa vào các yếu tố con để xác định kích thước, nhưng tự nó không mang lại nhiều lợi ích về hiệu suất.
Kiểu (chứa: kiểu)
Có thể khó dự đoán được những ảnh hưởng gì trên cây DOM khi thay đổi kiểu của phần tử sẽ sao lưu cây. Một ví dụ cho vấn đề này là trong các trường hợp như bộ đếm CSS, trong đó việc thay đổi bộ đếm trong thành phần con có thể ảnh hưởng đến giá trị bộ đếm của cùng một tên được dùng ở nơi khác trong tài liệu. Khi bạn đặt contain: style, các thay đổi về kiểu sẽ không được truyền sao lưu qua phần tử chứa.
Rõ ràng là contain: style không cung cấp tính năng định kiểu theo phạm vi như bạn nhận được từ Shadow DOM; Vùng chứa ở đây chỉ đơn thuần là giới hạn các phần của cây cần được xem xét khi kiểu bị thay đổi, không phải khi chúng được khai báo.
Nghiêm ngặt và chứa nội dung
Bạn cũng có thể kết hợp các từ khoá, chẳng hạn như contain: layout paint để chỉ áp dụng các hành vi đó cho một phần tử. Tuy nhiên, hàm chứa cũng hỗ trợ hai giá trị bổ sung:
contain: strictcó nghĩa giống vớicontain: size layout paintcontain: contentcó nghĩa giống vớicontain: layout paint
Việc sử dụng giới hạn nghiêm ngặt là rất hữu ích khi bạn biết trước kích thước của phần tử (hoặc muốn đặt trước kích thước của nó), nhưng lưu ý rằng nếu bạn khai báo giới hạn nghiêm ngặt không có kích thước, do vùng chứa kích thước ngụ ý, phần tử có thể được hiển thị dưới dạng hộp 0px x 0px.
Mặt khác, tính năng ngăn chặn nội dung cung cấp những cải thiện đáng kể về phạm vi mà bạn không cần phải biết hoặc chỉ định trước các phương diện của phần tử.
Trong đó, contain: content là phương thức bạn nên sử dụng theo mặc định. Bạn nên coi việc ngăn chặn nghiêm ngặt là lối thoát khi contain: content không đủ mạnh để đáp ứng nhu cầu của bạn.
Hãy cho chúng tôi biết ý kiến phản hồi của bạn
Vùng chứa là một cách tuyệt vời để bắt đầu cho trình duyệt biết bạn muốn tách biệt những gì trong trang của mình. Hãy dùng thử phiên bản này trong Chrome 52 trở lên và cho chúng tôi biết cách của bạn!