Ngăn chặn CSS trong Chrome 52

Paul Lewis

TL;DR

Thuộc tính Vùng chứa CSS mới cho phép nhà phát triển giới hạn phạm vi kiểu, bố cục và thao tác vẽ của trình duyệt.

Lớp này có một vài giá trị tạo nên cú pháp như sau:

    contain: none | strict | content | [ size || layout || style || paint ]

Trình duyệt này có phiên bản Chrome 52+ và Opera 40+ (đồng thời có dịch vụ 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 thức hoạt động của bạn!

Thuộc tính chứa

Khi tạo một ứng dụng web hay thậm chí là một trang web phức tạp, một thách thức quan trọng về hiệu suất là hạn chế hiệu ứng của kiểu, bố cục và tô màu. Thông thường, toàn bộ DOM được coi là "nằm trong phạm vi" đối với công việc tính toán. Điều này có nghĩa là việc cố gắng "chế độ xem" độc lập trong một ứng dụng web có thể gây 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ội dung nào nên nằm trong hay nằm ngoài phạm vi.

Ví dụ: giả sử một phần của DOM 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ị, thao tá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 có hiệu quả trong phạm vi, nghĩa là việc tính toán 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 mất nhiều công việc tính toán. Điều đó có 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 giới hạn phạm vi kiểu, bố cục và tô màu tự động, nghĩa là mọi thứ sẽ nhanh hơn mà bạn không phải làm gì cả.

Tuy nhiên, tin tốt hơn nữa là có một tài sản CSS mới trao quyền kiểm soát phạm vi cho nhà phát triển, đó là: Vùng chứa.

Vùng chứa CSS là một thuộc tính mới, với từ khóa chứa, hỗ trợ bốn giá trị:

• layout
• paint
• size
• style

Mỗi giá trị 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 xem xét mỗi chi tiết hơn một chút.

Bố cục (chứa: bố cục)

Lưu ý: Giá trị này bật tính năng vùng chứa bố cục cho phần tử này. Điều này đảm bảo phần tử vùng chứa hoàn toàn không rõ ràng cho mục đích bố cục; không có gì bên ngoài có thể ảnh hưởng đến bố cục bên trong và ngược lại. Thông số kỹ thuật của vùng chứa

Vùng chứa bố cục có thể 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 theo phạm vi tài liệu, điều này làm cho 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 bạn thay đổi thuộc tính left của một phần tử, thì mọi phần tử trong DOM có thể cần được kiểm tra.

Việc bật tính năng ngăn chặn tại đây có thể làm giảm số lượng phần tử xuống chỉ còn một vài thay vì toàn bộ tài liệu, giúp trình duyệt tiết kiệm được 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)

Lưu ý: Giá trị này bật tính năng ngăn chứa sơn cho phần tử này. Điều này đảm bảo rằng các thành phần con cháu của phần tử chứa không hiển thị bên ngoài ranh giới của nó. Vì vậy, nếu một phần tử nằm ngoài màn hình hoặc không hiển thị, thì các thành phần con cháu của nó cũng được đảm bảo sẽ không hiển thị. Thông số kỹ thuật của vùng chứa

Một lợi ích vô cùng hữu ích khác của việc bảo vệ lớp phủ là một phạm vi cho sơn. Việc ngăn chứa sơn về cơ bản sẽ cắt bớt phần tử được đề cập, 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 cho các phần tử vị trí cố định và có vị trí tuyệt đối. Điều này có nghĩa là mọi phần tử con đều được định vị dựa trên phần tử có contain: paint chứ không phải bất kỳ phần tử mẹ nào khác, chẳng hạn như tài liệu.
• Nó trở thành một ngữ cảnh xếp chồng. Điều này có nghĩa là những nội dung như z-index sẽ ảnh hưởng đến phần tử này và các thành phần con sẽ được xếp chồng theo ngữ cảnh mới.
• Nó trở thành ngữ cảnh định dạng mới. Điều này có nghĩa là nếu một phần tử cấp khối có vùng chứa sơn, chẳng hạn như nếu bạn có một phần tử cấp khối có vùng chứa sơn, thì nó sẽ được coi là một môi trường bố cục mới, độc lập. Điều này có nghĩa là bố cục bên ngoài phần tử thường sẽ không ảnh hưởng đến các phần tử con của phần tử chứa.

Kích thước (chứa: kích thước)

Lưu ý: Giá trị này bật tính năng chứa kích thước cho phần tử. Điều này đảm bảo rằng phần tử chứa có thể được bố trí mà không cần kiểm tra các phần tử con của nó. Thông số kỹ thuật của vùng chứa

contain: size có nghĩa là các phần tử con của phần tử không ảnh hưởng đến kích thước của phần tử mẹ và kích thước được suy luận hoặc khai báo của phần tử đó sẽ là các 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), thành phần này sẽ hiển thị ở kích thước 0px x 0px!

Việc xác định kích thước thực sự là một biện pháp giúp đảm bảo bạn không dựa vào các phần tử con để xác định kích thước, nhưng bản thân nó không mang lại nhiều lợi ích về mặt hiệu suất.

Phong cách (chứa: phong cách)

Lưu ý: Giá trị này bật tính năng vùng chứa kiểu cho phần tử. Điều này đảm bảo rằng đối với các thuộc tính có thể ảnh hưởng đến nhiều phần tử và các thành phần con cháu, thì các hiệu ứng đó không được thoát khỏi phần tử chứa. Thông số kỹ thuật của vùng chứa

Có thể khó dự đoán xem những tác động nào trên cây DOM về việc thay đổi kiểu của một phần tử sẽ trở lại cây. Một ví dụ của trường hợp này là bộ đếm CSS, trong đó việc thay đổi bộ đếm trong thành phần con có thể ảnh hưởng đến các giá trị bộ đếm cùng tên được dùng ở nơi khác trong tài liệu. Khi đặt contain: style, các thay đổi về kiểu sẽ không được sao lưu qua phần tử chứa.

Để cho rõ ràng hơn, những gì contain: style không cung cấp là tạo kiểu theo phạm vi như bạn nhận được từ Shadow DOM; vùng chứa ở đây chỉ giới hạn các phần của cây đang được xem xét khi kiểu bị thay đổi, chứ 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ử. Nhưng hàm chứa cũng hỗ trợ hai giá trị bổ sung:

• contain: strict có nghĩa là giống với contain: size layout paint
• contain: content có nghĩa là giống với contain: layout paint

Sử dụng vùng chứa nghiêm ngặt là cách hiệu quả 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 phần tử đó), nhưng hãy lưu ý rằng nếu bạn khai báo vùng chứa nghiêm ngặt không có kích thước, do vùng chứa kích thước ngầm định, phần tử có thể được hiển thị dưới dạng hộp 0 px x 0 px.

Mặt khác, tính năng chứa nội dung giúp cải thiện đáng kể phạm vi, nhưng không yêu cầu bạn phải biết hoặc chỉ định trước các phương diện của phần tử.

Trong 2 nền tảng này, contain: content là thành phần mà bạn nên sử dụng theo mặc định. Bạn nên xem quy trình ngăn chặn nghiêm ngặt như một giải pháp thoát hiểm 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 bạn đã truy cập bằng cách nào

Vùng chứa là một cách hiệu quả để bắt đầu cho trình duyệt biết những gì bạn dự định giữ tách biệt trong trang của mình. Hãy dùng thử tính năng này trong Chrome 52 trở lên và cho chúng tôi biết cách bạn sử dụng!

Đường liên kết hữu ích

• Quy cách vùng chứa CSS
• Trạng thái vùng chứa trên Chrome