Новая функция CSS содержит, управляет перерисовкой и перекомпоновкой страницы.

Представляем новые свойства CSScontainРаньше читателям сначала нужно было понять, что такое перерисовка страницы и перекомпоновка.

Это было описано много раз ранее, если вы мало что знаете об этом, вы можете сначала посмотреть этоПравильная осанка для улучшения производительности CSS-анимации.

Хорошо, давайте перейдем к теме этой статьи,

`contain`Почему?

containАтрибуты позволяют нам указать конкретный элемент DOM и его дочерние элементы, что позволяет им быть независимыми от всей древовидной структуры DOM. Цель состоит в том, чтобы дать браузеру возможность перерисовывать и перекомпоновывать только некоторые элементы без необходимости каждый раз ориентироваться на всю страницу.

The contain property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page.

`contain`грамматика

Взгляните на его синтаксис:

{
  /* No layout containment. */
  contain: none;
  /* Turn on size containment for an element. */
  contain: size;
  /* Turn on layout containment for an element. */
  contain: layout;
  /* Turn on style containment for an element. */
  contain: style;
  /* Turn on paint containment for an element. */
  contain: paint;

  /* Turn on containment for layout, paint, and size. */
  contain: strict;
  /* Turn on containment for layout, and paint. */
  contain: content;
}

Удалитьnone, есть еще 6 значений, рассмотрим их по порядку.

contain: size

содержать: размер: наборcontain: sizeНа визуализацию элемента не влияет содержимое его дочерних элементов.

The value turns on size containment for the element. This ensures that the containing box can be laid out without needing to examine its descendants.

Я тоже начал видеть это определение в недоумении, и было трудно понять, что оно означает, просто взглянув на определение. Еще нужно потренироваться:

Предположим, у нас есть следующая простая структура:

<div class="container">
   
</div>

.container {
    width: 300px;
    padding: 10px;
    border: 1px solid red;
}

p {
    border: 1px solid #333;
    margin: 5px;
    font-size: 14px;
}

А с помощью jQuery каждый щелчок по контейнеру добавляет<p>Coco</p>структура:

$('.container').on('click', e => {
    $('.container').append('<p>Coco</p>')
})

Тогда вы получите следующий результат:

containsize

Как видите, контейнер.containerВысота элемента будет увеличиваться по мере увеличения элемента, что является нормальным.

В этот момент мы отдаем контейнер.containerдобавить одинcontain: size, также появится указанное выше:задаватьcontain: sizeНа рендеринг элемента не влияет содержимое его дочерних элементов..

.container {
    width: 300px;
    padding: 10px;
    border: 1px solid red;
+   contain: size
}

И посмотрите, что произойдет:

containsize2

Обычно высота родительского элемента будет увеличиваться из-за увеличения дочерних элементов, но теперь изменение дочернего элемента больше не влияет на макет стиля родительского элемента, которыйcontain: sizeэффект.

contain: style

Давай поговорим об этом дальшеcontain: style,contain: layout,contain: paint. Сначала взгляните на contains: style.

На момент написания этой статьи,contain: styleВременно удален.

CSS Containment Module Level 1: Исключите из этой спецификации рискованную функцию «стиль сдерживания», переместите ее на уровень 2.

Что ж, официальная риторика временно убрана из-за некоторых рисков и может быть переопределена во второй редакции спецификации, так что этот атрибут пока отложим в сторону.

contain: paint

содержать: краска: наборcontain: paintЭлемент, который устанавливает ограничения макета, то есть информирует User Agent о том, что дочерние элементы этого элемента не будут отображаться за пределами этого элемента, поэтому, если элемент находится за пределами экрана или иным образом установлен как невидимый, вы также можете убедитесь, что его потомки невидимы и не отображаются.

Это значение включает сдерживание рисования для элемента.Это гарантирует, что потомки содержащего блока не будут отображаться за его пределами, поэтому, если элемент находится за пределами экрана или не виден по какой-либо иной причине, его потомки также гарантированно не будут видны.

Это немного проще понять, давайте сначала посмотрим на первую функцию:

задавать`contain: paint`Дочерние элементы элемента не будут отображаться за пределами этого элемента

задаватьcontain: paintДочерние элементы элемента не будут отображаться за пределами этого элемента

Эта функция чем-то похожа наoverflow: hidden, то есть явно сообщать пользовательскому агенту, что содержимое дочернего элемента не будет выходить за границы элемента, поэтому лишнюю часть рендерить не нужно.

Простой пример, предполагающий, что структура элемента выглядит следующим образом:

<div class="container">
    <p>Coco</p>
</div>

.container {
    contain: paint;
    border: 1px solid red;
}

p{
    left: -100px;
}

Смотрим, ставимcontain: paintЧто происходит, когда он не установлен:

containsize3

CodePen Demo -- contain: paint Demo

задавать`contain: paint`не будет отображаться, когда элемент находится за пределами экрана

используяcontain: paint, если элемент находится за пределами экрана, пользовательский агент будет игнорировать рендеринг этих элементов, позволяя быстрее отображать другой контент.

contain: layout

содержать: макет: наборcontain: layoutЭлемент, который устанавливает ограничения макета, то есть сообщает агенту пользователя, что изменение стиля внутри этого элемента не приведет к изменению стиля вне элемента, и наоборот.

This value turns on layout containment for the element. This ensures that the containing box is totally opaque for layout purposes; nothing outside can affect its internal layout, and vice versa.

включитьcontain: layoutВместо повторного рендеринга всего документа количество элементов, которые необходимо отображать в каждом кадре, потенциально может быть уменьшено до небольшого числа, избавляя браузер от большого количества ненужной работы и значительно повышая производительность.

использоватьcontain：layout, разработчик может указать, что любые изменения любых потомков этого элемента не повлияют на макет каких-либо внешних элементов, и наоборот.

Таким образом, браузер вычисляет только положение внутреннего элемента (если он изменен), оставляя остальную часть DOM без изменений. Таким образом, это означает, что процесс компоновки в конвейере рендеринга кадров будет выполняться быстрее.

существующие проблемы

Описание красивое, но во время фактического демо-теста (по состоянию на 27.04.2021, Chrome 90.0.4430.85) он используется только один.contain：layoutПолучение упомянутых выше хороших результатов не подтверждено.

задаватьcontain: layoutуказанного элемента, любые изменения любых потомков элемента по-прежнему будут влиять на макет любых внешних элементов, нажмите на красное поле, чтобы добавить<p>Coco<p>элемент, вставленный вcontainerсередина:

Простой код выглядит следующим образом:

<div class="container">
    <p>Coco</p>
    ...
</div>
<div class="g-test"></div>

html,
body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.container {
    width: 150px;
    padding: 10px;
    contain: layout;
    border: 1px solid red;
}

.g-test {
    width: 150px;
    height: 150px;
    border: 1px solid green;
}

CodePen Demo -- contain: layout Demo

слишком далеко,contain: layoutФактический эффект не так очевиден, подробнее о нем вы можете прочитать в этой статье:CSS-tricks - contain

contain: strict | contain: content

Эти два атрибута немного особенные, и эффект представляет собой эффект агрегации вышеупомянутых атрибутов:

contain: strict: одновременное включение функций компоновки, стиля, рисования и размера, что эквивалентноcontain: size layout paint
contain: content: одновременное включение функций компоновки, стиля и рисования, что эквивалентноcontain: layout paint

Поэтому здесь также упоминается, что атрибут содержимого может быть определен несколько раз одновременно.

Can i Use -- CSS Contain

По состоянию на 27 апреля 2021 г. совместимость с CSS Contain на Can i Use готова к использованию:

наконец

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

containПочему?

containграмматика