containСвойство в CSS указывает браузеру , что элемент и его потомки считаются независимыми от дерева документа в максимально возможной степени . Это потенциально обеспечивает повышение производительности при расчетах макета, стиля, окраски, размера или любой комбинации для ограниченной области модели DOM, а не для всей страницы.
Свойство имеет пять стандартных значений и два сокращенных значения, которые объединяют варианты стандартных значений. Каждое значение имеет некоторые уникальные общие преимущества в зависимости от контекста элемента, который их применяет.
Обычно это свойство используется для элемента, содержащего контент определенного типа. Рассмотрим виджет, который отображает входящие данные, которые изменяют макет и визуальные эффекты потомков элемента. Еще один элемент, который следует учитывать, - это элемент, содержащий результаты сторонних данных, таких как баннерная реклама, где преимущества сдерживания позволяют нам либо снизить приоритетность рисования определенного контента, либо как обрабатывать размер полученного контента, либо определить, будет ли контент должно быть даже видно. С другой стороны, в основном статический сайт не получит особых преимуществ, кроме первого макета и рисования на экране при загрузке страницы.
Синтаксис
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 */ )Стоимость недвижимости
Макет
layoutВеличина удерживания сообщает браузеру , что ни один из потомков элемента не влияет на другие элементы на странице, и не те , и другие элементы имеют никакого влияния на потомков содержащегося элемента. Это позволяет браузеру потенциально сократить количество вычислений, необходимых при создании макета страницы.
Еще одно преимущество заключается в том, что если содержащийся элемент находится за пределами экрана или каким-то образом скрыт, браузер может задержать или сместить связанные вычисления с более низким приоритетом. Примером этого является скрытый элемент, который не находится в поле зрения в конце элемента блока, и начало этого элемента блока является видимым.
Элемент с layoutвключением становится содержащим блоком для позиционированных потомков, таких как элементы с абсолютным позиционированием. Элемент получает новый контекст наложения относительно страницы, и z-indeможно использовать свойство x. Однако свойства направления, такие как topили left, не применяются.
Даже если потомки содержащегося элемента не могут влиять на другие элементы на странице, они все равно могут влиять на содержащийся в нем элемент-предок. Например, потомок может вызвать изменение размера содержащегося элемента в ответ на изменения. В этом случае содержащийся элемент все еще может потенциально влиять на другие элементы на странице, но потомки по-прежнему не будут участвовать в этих вычислениях.
Следующая демонстрация дает простое объяснение того, что происходит, когда применяется layoutлокализация. При щелчке по каждому из верхних квадратов применяется сдерживание, и красные стрелки изменяют внешний вид. Появление красных стрелок указывает на то, влияют ли потомки блока на другие блоки на странице во время расчетов макета.
Краска
paintВеличина удерживания сообщает браузеру , что ни один из потомков элемента будут окрашены снаружи границы коробки элемента. Если дочерний элемент расположен так, чтобы часть его ограничивающего прямоугольника была обрезана содержащимся элементом, border-boxто эта часть не должна быть окрашена. Если дочерний элемент расположен полностью вне содержащегося элемента, border-boxон вообще не окрашивается. Это похоже на применение overflow: hidden;к элементу, но без преимуществ пропуска или сокращения необходимых вычислений.
Еще одно преимущество заключается в том, что если содержащийся элемент каким-либо образом не виден в области просмотра, тогда он может пропустить потомков элемента при выполнении расчетов рисования. Примером этого является элемент, размещенный за пределами страницы слева от области просмотра. Если содержащийся элемент не виден, то это гарантия того, что его содержимое не будет видно. Поэтому их участие в расчетах краски не требуется.
Элемент с включением paintтакже становится содержащим блоком для позиционированных потомков, например элементов с абсолютным позиционированием. Элемент также получает новый контекст наложения по отношению к странице, и z-indexсвойство можно использовать. Однако свойства направления, такие как topили left, не применяются.
Элемент прокрутки может получить дополнительные преимущества, если его потомки будут помещены в новый слой рисования, который может помочь с производительностью прокрутки. Обычно элементы прокрутки могут вызывать постоянные перерисовки, поскольку потомки появляются и исчезают во время прокрутки. Элемент прокрутки с включением краски потенциально может пропустить эту постоянную перерисовку потомков прокрутки.
Следующая демонстрация дает простое объяснение того, что происходит, когда применяется paintлокализация. Щелкните в любом месте, чтобы включить сдерживание фиолетового ящика. Когда применяется сдерживание, вид некоторых зеленых ящиков меняется. По внешнему виду зеленых прямоугольников видно, как они окрашены или нет.
Размер
sizeВеличина удерживания сообщает браузер , что ни один из потомков не нужно учитывать при выполнении вычислений макета для страницы. К содержащемуся элементу должны быть применены свойства heightи width, иначе он свернется до квадрата с нулевым пикселем. При расчете макета страницы необходимо учитывать только сам элемент, поскольку потомки не могут влиять на размер элемента. Потомки содержащегося элемента полностью пропускаются в таких вычислениях; как будто у него вообще не было потомков.
Для получения всех преимуществ оптимизации sizeзащитная оболочка обычно применяется с другими типами защитной оболочки.
Элемент с включением sizeполучает новый контекст наложения по отношению к странице, и z-indexсвойство можно использовать. Однако свойства направления, такие как topили left, не применяются.
Следующая демонстрация дает простое объяснение того, что происходит, когда sizeприменяется локализация. Щелкните в любом месте, чтобы включить сдерживание фиолетового ящика. Когда применяется сдерживание, пурпурный ящик изменяется в размере. По умолчанию высота фиолетового блока определяется его дочерними элементами, но при включении высота должна быть определена. После применения локализации потомки больше не участвуют в расчетах компоновки, связанной с размером.
Стиль
styleЗначение локализации сообщает браузер , что некоторые свойства CSS, такие как счетчики и котировки будут контекстными к содержащемуся элементу.
counter-incrementИ counter-setсвойство должны быть ограниченно к югу от дерева Содержащегося элемента. Если расширяется за пределы содержащегося элемента, создается новый счетчик.
Ценности объекта контента-о open-quote, close-quote, no-open-quoteи no-close-quoteдолжны быть ограничены к югу от дерева Содержащегося элемента.
Считается, что это значение сдерживания может быть удалено из спецификации.
Содержание
Величина contentсдерживания - это комбинация значений компоновки и содержания краски. Это эквивалент применения сдерживания таким образом:
div ( contain: layout paint; )Все потенциальные выгоды, описанные выше для каждого значения, будут доступны содержащемуся элементу. Это ограничение будет считаться относительно безопасным для широкого применения к нескольким элементам на странице.
Строгий
strictЗначение представляет собой комбинацию из layout, paintи sizeзначений сдерживания. Это эквивалент применения сдерживания таким образом:
div ( contain: layout paint size; )Все потенциальные выгоды, описанные выше для каждого значения, будут доступны содержащемуся элементу.
Это значение, являющееся самым строгим из значений защиты, следует использовать с осторожностью. Это связано с требованиями к размерам, которые он предъявляет к содержащемуся элементу. При этих требованиях это значение защитной оболочки действительно предлагает наиболее потенциальные преимущества защитной оболочки.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 52 | 69 | Нет | 79 | Нет |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | Нет |