CSS isolation — ізоляція від режимів змішування

CSS властивість isolation зі значенням isolate створює новий контекст накладання: режими змішування нащадків перестають бачити те, що поза контейнером.

правити

Загальний опис

Без ізоляції mix-blend-mode змішується з усім, що лежить під елементом — включно з тлом сторінки. Звідси класичний баг: ефект, задуманий для фото всередині картки, «просвічує» крізь картку й реагує на колір сторінки.

isolation: isolate на контейнері ставить стіну: змішування працює лише з шарами всередині нього.

Властивість створена саме для цього випадку, але новий контекст накладання дає й побічну користь: z-index нащадків більше не конкурує із зовнішніми елементами.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	41	36	8	28	79	—

Підтримка: мобільні переглядачі

Переглядач
	41	41	36	8

Приклади

+ запропонувати свій приклад у пісочниці

<div class="card">
    <div class="shape"></div>
</div>

body { background: gold; }

.card {
    background: #fff;
    padding: 2rem;
    /* без цього shape змішувався б і з golden-тлом сторінки */
    isolation: isolate;
}

.shape {
    width: 80px;
    height: 80px;
    background: #0172ad;
    mix-blend-mode: difference;
}