CSS Containment

Від перекладача: склад у Статі Льюїса вельми своєрідний, тому переклад вихідної статті місцями може виглядати дивно. Зауваження вітаються.

Containment (стримування) – нове CSS властивість, що дозволяє розробникам обмежити область застосування стилів, компоновок і отрисовок для браузера.

Властивість підтримує кілька значень, і його синтаксис виглядає наступним чином:

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

Властивість вже є в браузерах Chrome 52+ і Opera40+, а так само воно публічно підтримується firefox'ом, тому дайте йому шанс і розкажіть про те, як це вийшло.

Властивість contain
При створенні веб-додатки або складного сайту ключове завдання досягнення високої продуктивності – це зниження витрат на застосування стилів (styles), зменшення кількості компонувань (layout) і отрисовок (paint). Найчастіше DOM-дерево цілком виявляється в області перерахунку (scope), що може статися при хитрою спроби створення автономного об'єкта (блоку) у веб-додаток: в цьому випадку зміни в одній частині DOM-дерева можуть вплинути на інші елементи, і у розробника не буде можливості вказати браузеру, що повинно бути в межах області перерахунку і за її межами.

Розглянемо приклад, припустимо частина вашого DOM-дерево виглядає приблизно так:

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

І потім ви додаєте новий елемент до одного з блоків, за чим піде зміна стилів, компонування і побудова:

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

Однак у цьому випадку DOM-дерево цілком опиниться в області, яку необхідно змінити, перекомпонувати і заново промалювати, тобто навіть ті елементи незалежно від того, чи були вони задіяні, будуть враховані. І чим більше DOM-дерево, тим більше обчислень доведеться виконати, чому з часом ваш веб-додаток може перестане відповідати користувачеві.

Насправді все не так вже й погано, є і хороші новини: сучасні браузери стають розумнішими і намагаються обмежити область застосування стилів, компонування і відтворення автоматично, і вам не доводиться нічого робити, щоб прискорити ці процеси. Але є новина і краще: з'явилося нове CSS властивість, яка вручає в руки розробників повний контроль над областю – Containment.

CSS Containment – нове властивість, що приймають своїм значенням одне з 4-х ключових слів:

  • layout
  • paint
  • size
  • style
Кожне з них дозволить вам вибрати, як саме обмежити роботу браузера під час рендеринга. Давайте поглянемо ближче на ці значення.

Layout (contain: layout)
Це значення включає режим стримування компонування елемента. У такому разі компонування документа гарантовано не взаємодіє з містить блоком: нічого за межами блоку не може вплинути на його внутрішню компонування і навпаки.
Стримування компонування, можливо, можна вважати найбільш вигідним поряд з
contain: paint.


Як правило, компонування впливає на весь документ, тобто вона пропорційна розміру вашого DOM-дерева, тому якщо вам захочеться змінити властивість
left
одного з елементів, то зміни можуть торкнутися кожного елемента DOM. Тому потенційно при включенні стримування ми можемо збільшити продуктивність, дозволивши браузеру не виконувати непотрібну роботу, перекомпоновывая невелике число елементів замість всього документа.

Paint (contain: paint)
Це властивість включає режим стримування відтворення елемента. Воно гарантує, що нащадки елемента не будуть відображені за його межами, тому якщо елемент знаходиться за межами видимості, то і його вміст так само обов'язково буде невидимим.

Побудова окремої області — інше надзвичайно корисне перевага стримування. Управління відображенням фактично обрізає елемент (тобто вміст невидимо за межами), що тягне за собою декілька побічних ефектів:

  • Для абсолютно і фіксовано позиціонованих елементів даний блок діє як стримуючий блок. Це значаєт, що будь-які діти блоку позиціонуються на основі елемента з властивістю contain: paint, але не основі яких-небудь інших елементів або всього документа.

  • елемент створюється контекст накладення. Властивість
    z-index
    буде впливати на елемент, а всі нащадки елемента будуть накладені відповідно до нового контексту.

  • Також з'являється новий контекст форматування. Приміром, якщо у вас є блочний елемент, у якого встановлено властивість
    contain: paint
    , то він буде розглядатися як нове і незалежне оточення компонування. Це означає, що компонування ззовні не вплине на вміст стримуючого елемента.
Size (contain: size)
Це значення включає режим керування розміром елемента, що забезпечить даного елемента накладення, не беручи до уваги його нащадків.

contain: size
забороняє дітям елемента впливати на його задані розміри. Отже, якщо ви встановили властивість
containt
значення
size
деякого елементу, не вказавши при цьому його розміри (безпосередньо або з допомогою flex-властивостей), то цей елемент буде відображений з розмірами
0px
на
0px
.

У самому справі, управління розміром (стримування розміру) – надійний спосіб забезпечити незалежність розмірів елемента від його нащадків, але сам по собі він не дає особливих переваг.

Style (contain: style)
Це значення включає режим керування стилем (стримування стилів) елемента. При цьому режимі ті властивості, які можуть вплинути відразу на кілька елементів і їх нащадків, не будуть використані за межами стримуючого елемента.

Складно заздалегідь передбачити, які ефекти від зміни стилів підуть вгору по DOM-дерева. Одним з прикладів такої поведінки — щось на зразок зразок CSS лічильників, де зміна лічильника у дитини може вплинути на значення лічильників з однойменною назвою, використовуваних в іншому місці у документі. З заданим
contain: style
стилі заданого елемента не будуть поширені далі вгору по DOM-дерева.

Говорячи гранично ясно, чого
contain: style
не надає вам на відміну від Shadow DOM, так це scoped styling (стилі з обмеженою областю видимості). Стримування у такому разі передбачає тільки обмеження елементів дерева, які розглядатимуться при зміні стилів, але не тоді, коли вони були оголошені.

Висловлюючись гранично ясно,
contain: style
не надає стилі з обмеженою областю видимості (як це працює в Shadow DOM). Стримування — це про обмеження кол-ва частин дерева, які будуть враховуватися, коли стилі будуть змінюватися, а не коли вони тільки оголошені.

Суворе (strict) і змістовне (content) стримування
При необхідності ви можете комбінувати значення властивості, наприклад, при
contain: layout paint
, ви зможете домогтися для елемента тільки таких типів поведінки.

Але розглянуте у статті властивість так само підтримує 2 додаткових значення:

  • contain: strict
    те ж саме, що і
    contain: layout style paint size
  • contain: content
    те ж саме, що і
    contain: layout style paint
Використання суворого стримування може здорово стати в нагоді, якщо ви заздалегідь знаєте розміри елемента (або заздалегідь хочете зберегти їх), але майте на увазі, що якщо ви виберіть суворе стримування без зазначення розмірів через передбачуваного розміру вмісту, елемент може бути відображений з розмірами
0px
на
0px
.

Стримування вмісту, з іншого боку, пропонує значні поліпшення області перерахунку, але не вимагає від вас знання конкретних розмірів елементів заздалегідь. До речі кажучи,
contain: content
можна використовувати за промовчанням.

До більш суворим обмеженням вдавайтеся до люку аварійного виходу, лише тоді, коли ефектів від використання
contain: content
недостатньо конкретно вашому випадку.

Стримування – відмінний спосіб вказівки браузеру, що ви маєте намір ізолювати в межах вашої сторінки. Спробуйте використовувати цю властивість в Chrome 52+ і розкажіть нам, що ви про це думаєте.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.