#css_in_action
Навіть невеличка зміна стилів одного елементу в DOM може потягнути за собою цілий каскад перерахунків, які можуть зачепити увесь документ. Так-так, навіть звичайний :hover на вашій картці товару може змусити бравзер запустити reflow та repaint для цілої сторінки. І чим складніший ваш застосунок, чим більше у ньому елементів, тим важчий та складніший такий перерахунок, тим більше ресурсів на нього йде.

Але чи існує якийсь спосіб вказати бравзеру, що усе так і задумано, і не варто випускати кракена там, де достатньо звичайної піратської дуелі на шаблях? І моя відповідь — так, існує!

Мова йде про властивість CSS contain, за допомогою якої можна вказати, що цей конкретний елемент — річ в собі, і тут своя атмосфера. Тобто зміни всередині цього елемента не мають впливати на оточуючий лейаут, і є ізольованими від зовнішнього контексту.

Існує 4 типи такої ізоляції: розміру, лейауту, "стилю" та відмальовки і усі вони відповідають за різні аспекти стилізації та впливають або на сам елемент, або на його нащадків. Обʼєднує їх одне: будь-які зміни відповідні всередині ізольованого контексту не мають впливу на оточуючі елементи.

Що важливо памʼятати. При використанні contain створюються новий containing block, stacking context та block formatting context. Тобто елемент ізолюється настільки, що навіть fixed елементи всередині нього тепер будуть позиціонуватися відносно нього, а не відносно viewport.

Чудова нагода саме зараз поставити вподобайку, чи не так?

Ви можете комбінувати різні значення властивості contain між собою (а самих значень є вісім), проте не всі між собою сумісні. Ну і є strict, яке поєднує в собі усі інші.

Тож яка користь з того? Повернімося до прикладу з початку допису — припустимо, у вас є на екрані 100 карток. Ви наводите курсор на одну з них, аби подивитися деталі, і бравзер починає запускати повністю весь процес рефлоу та репейнту, бо хто зна, яких ви там стилів на ховер навішали, може ви весь DOM перемішали? І це вийде досить дорого з точки зору швидкодії.

Однак, вказавши contain, ви поясните бравзеру, що ви так і планували, а кожна картка — ізольована і не повинна впливати на сусідів та загальний лейаут. В такому разі бравзер обмежить свої розрахунки суто цим елементом, заощаджуючи ресурси та час.

Так, звичайно, сучасні бравзери давно навчилися оптимізувати багато речей, включно з рендерингом, передбачаючи різні сценарії, однак усі вони ґрунтуються на припущеннях. Але contain дає вам змогу точно вказати, як саме та де саме ви полегшуєте бравзеру його й без того невдячну працю.

Використовувати contain ви можете просто вже, адже він є частиною Baseline.

🌐 MDN

А чи були у вас випадки, коли :hover перетворював швидкодію вашої сторінки на гарбуз? Розкажіть в коментарях!

@babichdev