Ograniczenie CSS w Chrome 52

Paul Lewis

TL;DR

Nowa właściwość Zawieś CSS pozwala programistom ograniczać zakres stylów, układu i malowania przeglądarki.

Ma kilka wartości, więc jego składnia wygląda tak:

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

Ta wersja jest dostępna w Chrome w wersji 52 lub nowszej oraz w Operze 40 lub nowszej (i ma publiczną pomoc w Firefoksie). Wypróbuj ją i daj nam znać, jak Ci poszło.

Właściwość Zawiera

Kluczowym wyzwaniem podczas tworzenia aplikacji internetowej, a nawet skomplikowanej witryny, jest ograniczenie efektów stylów, układu i kolorów. Często cała część DOM jest uznawana za „w zasięgu” na potrzeby obliczeń, co może oznaczać, że próba samodzielnego utworzenia „widoku” w aplikacji internetowej może okazać się trudna: zmiany w jednej części DOM mogą wpływać na inne części i nie da się wskazać przeglądarce, co powinna znajdować się w zakresie, a co poza nim.

Załóżmy, że część DOM wygląda tak:

    <section class="view">
      Home
    </section>

    <section class="view">
      About
    </section>

    <section class="view">
      Contact
    </section>

Do jednego widoku dołączasz nowy element, który uruchamia style, układ i renderowanie:

    <section class="view">
      Home
    </section>

    <section class="view">
      About
      <div class="newly-added-element">Check me out!</div>
    </section>

    <section class="view">
      Contact
    </section>

W tym przypadku jednak uwzględnia się cały model DOM, co oznacza, że obliczenia stylu, układu i fazy wyrenderowania muszą uwzględniać wszystkie elementy, niezależnie od tego, czy zostały zmienione. Im większy DOM, tym więcej zadań obliczeniowych, co oznacza, że aplikacja może nie reagować na działania użytkowników.

Dobra wiadomość jest taka, że nowoczesne przeglądarki potrafią sprytnie ograniczać zakres stylów, układu i malowania, dzięki czemu działają one szybciej i nie musisz nic robić.

Jeszcze lepszą wiadomością jest to, że dostępna jest nowa usługa CSS, która przekazuje kontrolę deweloperom: Containment.

Kontener CSS to nowa właściwość ze słowem kluczowym zawierającym, które obsługuje 4 wartości:

• layout
• paint
• size
• style

Każda z tych wartości pozwala ograniczyć ilość pracy renderowania, jaką musi wykonać przeglądarka. Przyjrzyjmy się bliżej każdej z tych funkcji.

Układ (zawiera: układ)

Uwaga: ta wartość włącza przechowywanie elementu w układzie. Dzięki temu element znajdujący się poza nim jest całkowicie nieprzezroczysty z punktu widzenia układu graficznego – i na odwrót. Specyfikacja o zamykaniu

Przechowywanie układu (jednocześnie contain: paint) jest prawdopodobnie najważniejszą zaletą izolacji.

Układ jest zwykle ograniczony do dokumentu, dlatego skaluje się proporcjonalnie do rozmiaru Twojego DOM. Jeśli więc zmienisz właściwość left elementu, konieczne może być sprawdzenie każdego elementu w DOM.

Włączenie tej funkcji może ograniczyć liczbę elementów do kilku, a nie całego dokumentu, dzięki czemu przeglądarka może zaoszczędzić mnóstwo zbędnej pracy i znacznie poprawić wydajność.

Barwiony (zawiera: farba)

Uwaga: ta wartość włącza zabezpieczanie elementu farbą. Dzięki temu elementy potomne elementu nadrzędnego nie zostaną wyświetlone poza jego granicami. Jeśli więc element znajduje się poza ekranem lub z innego powodu jest niewidoczny, jego elementy podrzędne też będą niewidoczne. Specyfikacja o zamykaniu

Kolejną niezwykle przydatną zaletą izolacji jest użycie farby do malowania zakresu. Zasadniczo osłonięcie farby powoduje usunięcie odpowiedniego elementu, ale ma też kilka innych efektów ubocznych:

• Działa jak blok blokujący dla elementów bezwzględnych umieszczonych w ustalonym położeniu i ustalonych pozycji. Oznacza to, że wszystkie elementy podrzędne są ustalane na podstawie elementu z atrybutem contain: paint, a nie innych elementów nadrzędnych, np. dokumentu.
• Staje się on kontekstem skumulowanym. Oznacza to, że na element wpłyną właściwości takie jak z-index, a elementy podrzędne będą układane w stos zgodnie z nowym kontekstem.
• Jest to nowy kontekst formatowania. Oznacza to, że jeśli masz na przykład element na poziomie bloku z blokadą renderowania, będzie on traktowany jako nowe, niezależne środowisko układu. Oznacza to, że układ poza elementem zwykle nie ma wpływu na elementy podrzędne tego elementu.

Rozmiar (zawiera: rozmiar)

Uwaga: ta wartość włącza ograniczenie rozmiaru elementu. Dzięki temu można rozmieścić element zawierający bez sprawdzania jego elementów podrzędnych. Specyfikacja o zamykaniu

Znaczenie contain: size oznacza, że elementy podrzędne elementu nie mają wpływu na rozmiar elementu nadrzędnego i są używane wymiary ustalone lub zadeklarowane. Dlatego, jeśli ustawisz contain: size na 0 pikseli, ale nie określisz wymiarów elementu (bezpośrednio lub za pomocą właściwości Flex), obraz zostanie wyrenderowany w rozmiarze 0 x 0 pikseli.

Ograniczenie rozmiaru to jedyny sposób, który pozwala zapobiec używaniu elementów podrzędnych.

Styl (zawiera: styl)

Uwaga: ta wartość włącza ograniczenie stylu dla elementu. Dzięki temu w przypadku właściwości, które mogą mieć wpływ nie tylko na element i jego elementy potomne, nie uciekną one z elementu, który zawiera. Specyfikacja o zamykaniu

Trudno przewidzieć, jaki wpływ na drzewo DOM będzie zmiana stylów elementu. Przykładem może być coś w rodzaju liczników CSS, gdzie zmiana licznika w elemencie podrzędnym może wpłynąć na wartości licznika o tej samej nazwie, które są używane w innym miejscu w dokumencie. Gdy jest ustawiony parametr contain: style, zmiany stylu nie są przekazywane z powrotem poza element zawierający go.

Aby podkreślić, contain: style nie zapewnia stylu ograniczonego dostępu, jak w przypadku modelu Shadow DOM. Ochrona polega jedynie na ograniczeniu części drzewa, które są uwzględniane podczas mutacji stylów, a nie podczas ich zadeklarowania.

Rygorystyczne i pomijanie treści

Możesz też łączyć słowa kluczowe, np. contain: layout paint, co spowoduje zastosowanie tylko tych zachowań w danym elemencie. Zawiera jednak także dwie dodatkowe wartości:

• contain: strict oznacza to samo co contain: size layout paint
• contain: content oznacza to samo co contain: layout paint

Stosowanie ścisłej izolacji jest bardzo przydatne, gdy znasz rozmiar elementu z wyprzedzeniem (lub chcesz zarezerwować jego wymiary), ale pamiętaj, że jeśli zadeklarujesz ścisłą izolację bez wymiarów, z powodu domniemanego ograniczenia rozmiaru element może zostać wyrenderowany jako pole o wymiarach 0 na 0 pikseli.

Znacząco poprawia się zakres treści, ale nie wymaga wcześniejszego poznania i określania wymiarów elementu.

Z dwóch opcji domyślnie warto korzystać z opcji contain: content. Gdy zastosowanie contain: content nie jest wystarczające, aby zaspokoić Twoje potrzeby, należy traktować ścisłą izolację jako metodę ratunkową.

Daj nam znać, jak Ci idzie

Zasada „ powstrzymanie” to świetny sposób na poinformowanie przeglądarki, co ma być izolowane na stronie. Wypróbuj ją w Chrome w wersji 52 lub nowszej i daj nam znać, jak sobie poradzisz.

Przydatne linki

• Specyfikacja kontenera usługi porównywania cen
• Stan powłoki w Chrome