containNieruchomość w CSS wskazuje przeglądarce, że element i jego potomkowie są uważane za niezależne od drzewa dokumentu jak najwięcej. Potencjalnie zapewnia to korzyści w zakresie wydajności przy obliczeniach dotyczących układu, stylu, malowania, rozmiaru lub dowolnej kombinacji dla ograniczonego obszaru DOM, a nie całej strony.
Właściwość ma pięć wartości standardowych i dwie wartości skrócone, które stanowią kombinację odmian wartości standardowych. Każda wartość ma pewne unikalne i wspólne korzyści w zależności od kontekstu elementu, który je stosuje.
Typowe użycie tej właściwości to element, który zawiera treść pewnego typu. Rozważmy widget, który renderuje przychodzące dane, które zmieniają układ i wizualizacje elementów podrzędnych elementu. Innym elementem, który należy wziąć pod uwagę, jest ten, który zawiera wyniki danych stron trzecich, takich jak baner reklamowy, w przypadku którego korzyści z powstrzymywania pozwalają nam albo odrzucić priorytet malowania określonych treści, jak dostosować rozmiar otrzymywanej treści lub określić, czy treść powinien być nawet widoczny. Z drugiej strony, w większości statyczna witryna odniesie niewielkie korzyści poza pierwszym układem i wyświetlaniem na ekranie podczas ładowania strony.
Składnia
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 */ )Wartości nieruchomości
Układ
Wartość layoutzamknięcia informuje przeglądarkę, że żaden z elementów podrzędnych elementu nie wpływa na inne elementy na stronie, ani te inne elementy nie mają żadnego wpływu na elementy podrzędne zawartego elementu. Pozwala to przeglądarce potencjalnie zmniejszyć liczbę obliczeń niezbędnych podczas tworzenia układu strony
Inną korzyścią jest to, że jeśli zawarty element znajduje się poza ekranem lub jest w jakiś sposób zasłonięty, przeglądarka może opóźnić lub przesunąć powiązane obliczenia na niższy priorytet. Przykładem tego jest element zawarty, który nie jest widoczny na końcu elementu blokowego, a początek tego elementu bloku jest widoczny.
Element z layoutzawartością staje się ramką zawierającą dla pozycjonowanych elementów potomnych - takich jak elementy z pozycjonowaniem bezwzględnym. Element otrzymuje nowy kontekst stosu w odniesieniu do strony i z-indemożna użyć właściwości x. Chociaż właściwości kierunkowe, takie jak toplub left, nie mają zastosowania.
Mimo że elementy potomne zawartego elementu mogą nie wpływać na inne elementy na stronie, nadal mogą wpływać na zawarte w nich elementy przodków. Na przykład potomek może spowodować zmianę rozmiaru zawartego elementu w reakcji na zmiany. W takim przypadku zawarty element może nadal potencjalnie wpływać na inne elementy na stronie, ale potomkowie nadal nie będą zaangażowani w te obliczenia.
Poniższe demo zawiera proste wyjaśnienie tego, co się dzieje po zastosowaniu layoutograniczenia. Kliknięcie każdego z górnych pól powoduje zastosowanie ograniczenia, a czerwone strzałki zmienią wygląd. Wygląd czerwonych strzałek sugeruje, czy potomkowie pola wpływają na inne pola na stronie podczas obliczania układu.
Farba
Wartość paintzamknięcia informuje przeglądarkę, że żaden potomek elementu nie zostanie namalowany poza ramką elementu. Jeśli element podrzędny jest ustawiony tak, aby część jego ramki ograniczającej była przycinana przez zawarty element, border-boxto ta część nie powinna być pomalowana. Jeśli element podrzędny jest umieszczony całkowicie poza zawartym elementem, border-boxto w ogóle nie jest malowany. Jest to podobne do zastosowania overflow: hidden;do elementu, ale bez korzyści wynikających z pomijania lub ograniczania potrzebnych obliczeń.
Kolejną korzyścią jest to, że jeśli zawarty element nie jest w jakiś sposób widoczny w rzutni, może on pominąć potomków elementu podczas wykonywania obliczeń malarskich. Przykładem tego jest element umieszczony poza stroną po lewej stronie widoku. Jeśli zawarty element nie jest widoczny, to gwarancja, że jego zawartość nie będzie widoczna. Dlatego nie są zobowiązani do udziału w obliczeniach dotyczących farby.
Element z zawartością paintstaje się również polem zawierającym dla pozycjonowanych elementów potomnych - takich jak elementy z pozycjonowaniem bezwzględnym. Element otrzymuje również nowy kontekst układania w odniesieniu do strony i z-indexwłaściwość może być używana. Chociaż właściwości kierunkowe, takie jak toplub left, nie mają zastosowania.
Element przewijany może uzyskać dodatkowe korzyści, umieszczając jego elementy potomne w nowej warstwie farby, która może pomóc w przewijaniu. Zwykle przewijane elementy mogą powodować ciągłe przemalowywanie, gdy potomkowie pojawiają się i znikają podczas przewijania. Przewijany element z zawartością farby może potencjalnie pominąć to ciągłe malowanie przewijających się potomków.
Poniższe demo zawiera proste wyjaśnienie tego, co się dzieje po zastosowaniu paintograniczenia. Kliknij w dowolnym miejscu, aby przełączyć ograniczenie na fioletowym polu. Po zastosowaniu zabezpieczenia niektóre zielone pola zmieniają wygląd. Wygląd zielonych pudełek pokazuje, jak są pomalowane lub nie.
Rozmiar
Wartość sizezamknięcia informuje przeglądarkę, że żaden z elementów podrzędnych nie musi być brany pod uwagę podczas wykonywania obliczeń układu strony. Zawarty element musi mieć zastosowane właściwości heighti width, w przeciwnym razie zwinie się do kwadratu o rozmiarze zero pikseli. Podczas obliczania układu strony należy wziąć pod uwagę tylko sam element, ponieważ elementy podrzędne nie mogą wpływać na rozmiar elementu. Potomkowie zawartego elementu są całkowicie pomijani w takich obliczeniach; jakby w ogóle nie miał potomków.
Aby uzyskać pełne korzyści z optymalizacji, sizeizolacja jest zwykle stosowana z innymi rodzajami izolacji.
Element z zawartością sizeotrzymuje nowy kontekst stosu w odniesieniu do strony i z-indexwłaściwość może zostać użyta. Chociaż właściwości kierunkowe, takie jak toplub left, nie mają zastosowania.
Poniższe demo zawiera proste wyjaśnienie tego, co się dzieje po sizezastosowaniu ograniczenia. Kliknij w dowolnym miejscu, aby przełączyć ograniczenie na fioletowym polu. Po zastosowaniu ograniczenia wielkość fioletowego pola zmienia się. Domyślnie wysokość fioletowego prostokąta jest definiowana przez jego dzieci, ale w przypadku zawierania wysokość musi być zdefiniowana. Po zastosowaniu ograniczenia potomkowie nie są już zaangażowani w obliczenia układu związane z rozmiarem.
Styl
Wartość stylezamknięcia informuje przeglądarkę, że niektóre właściwości CSS, takie jak liczniki i cudzysłowy, będą ograniczone do zawartego elementu.
Właściwości counter-incrementi counter-setmuszą być ograniczone do poddrzewa zawartego elementu. Jeśli zostanie rozciągnięty poza zawarty element, tworzony jest nowy licznik.
Wartości właściwości content Europejskiego open-quote, close-quote, no-open-quote, i no-close-quotemusi być zawężona do sub-tree zamkniętego elementu.
Uważa się, że ta wartość zamknięcia może zostać usunięta ze specyfikacji.
Zawartość
Wartość contentzamknięcia jest połączeniem zarówno układu, jak i wartości zamknięcia farby. Jest to odpowiednik zastosowania powstrzymywania w ten sposób:
div ( contain: layout paint; )Wszystkie potencjalne korzyści opisane powyżej dla każdej wartości byłyby wtedy dostępne dla zawartego elementu. To ograniczenie można by uznać za względnie bezpieczne w szerokim zastosowaniu do wielu elementów na stronie.
Ścisły
strictWartość powstrzymywanie to kombinacja layout, painti sizewartości ograniczających. Jest to odpowiednik zastosowania powstrzymywania w ten sposób:
div ( contain: layout paint size; )Wszystkie potencjalne korzyści opisane powyżej dla każdej wartości byłyby wtedy dostępne dla zawartego elementu.
Jako „najbardziej rygorystyczna” z wartości ograniczających, wartość ta powinna być używana z ostrożnością. Wynika to z wymagań dotyczących wymiarów, jakie nakłada na zawarty element. Przy tych wymaganiach ta wartość powstrzymywania oferuje największe potencjalne korzyści w zakresie wydajności.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 52 | 69 | Nie | 79 | Nie |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nie |