CSS свойство isolation
Узнайте, как CSS isolation: isolate создаёт новый контекст наложения для ограничения mix-blend-mode и эффектов filter, с примерами и поддержкой браузеров.
CSS свойство isolation управляет тем, должен ли элемент создавать новый контекст наложения. Оно принимает два значения: auto (по умолчанию — браузер решает самостоятельно) и isolate (всегда создаёт контекст наложения, безусловно).
Контекст наложения — это самодостаточный слой, который браузер отрисовывает как единое целое. Элементы внутри него упорядочены относительно друг друга с помощью z-index, но никогда не перемежаются с элементами в другом контексте наложения. Каждый документ начинается с корневого контекста наложения; новые создаются при применении определённых CSS свойств.
isolation наиболее полезно совместно со свойством mix-blend-mode. По умолчанию mix-blend-mode смешивает элемент со всем, что находится ниже в стеке — включая фон страницы и несвязанные секции далеко вверх по DOM. Установка isolation: isolate на родительском элементе создаёт границу: смешивание происходит только внутри поддерева этого родителя, а не со всей остальной частью страницы.
При использовании background-blend-mode свойство isolation не нужно — фоновые слои смешиваются только с другими фоновыми слоями того же элемента.
Когда применять
- Ограничение группы смешивания. Если у вас есть перекрывающиеся изображения или текст с
mix-blend-modeи вы хотите, чтобы они смешивались между собой, но не с остальной частью страницы — оберните их в контейнер сisolation: isolate. - Защита переиспользуемого компонента. Карточка или виджет должны выглядеть одинаково независимо от фона, на котором они расположены. Изоляция корневого элемента предотвращает проникновение внешних цветов через режимы смешивания внутри него.
- Создание контекста наложения без побочных эффектов. Некоторые свойства неявно создают контексты наложения —
opacityниже1, transform, filter, will-change, а также ненулевойz-indexна позиционированном элементе — но все они меняют макет или внешний вид.isolation: isolateсоздаёт контекст наложения и ничего больше.
isolation не меняет внешний вид элемента и не влияет на распределение пространства. Его единственный эффект — создание нового контекста наложения. Это делает его самым чистым способом установить границу, когда она нужна без других визуальных последствий.
Справочник свойства
| Начальное значение | auto |
| Применяется к | Всем элементам |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS3 |
| DOM синтаксис | element.style.isolation = "isolate" |
Синтаксис
isolation: auto | isolate | initial | inherit;Значения
| Значение | Описание |
|---|---|
auto | Новый контекст наложения не создаётся, если только другое свойство (например, mix-blend-mode или filter) не требует его. Это значение по умолчанию. |
isolate | Всегда создаёт новый контекст наложения на элементе, ограничивая операции смешивания и композитинга этим контекстом. |
initial | Сбрасывает свойство до значения по умолчанию (auto). |
inherit | Наследует значение от родительского элемента. |
Примеры
Ограничение mix-blend-mode с помощью isolation
Два блока ниже используют идентичную внутреннюю разметку — <div> с mix-blend-mode: difference. Единственное отличие — обёртка: первый использует isolation: auto, второй — isolation: isolate.
При значении auto режим смешивания difference проникает сквозь обёртку и смешивается с серым фоном страницы (#ccc из внешнего контейнера). При значении isolate на уровне обёртки создаётся новый контекст наложения, поэтому смешивание видит только собственный фон обёртки — а не окружающую страницу.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
background-color: #ccc;
}
#isolation-example {
width: 300px;
height: 300px;
}
.c {
width: 100px;
height: 100px;
border: 1px solid #000;
padding: 10px;
mix-blend-mode: difference;
}
#isolation-example1 {
isolation: auto;
}
#isolation-example2 {
isolation: isolate;
}
</style>
</head>
<body>
<h2>Isolation property example</h2>
<div id="isolation-example" class="a">
<div id="isolation-example1">
<div class="a c">isolation: auto;</div>
</div>
<div id="isolation-example2">
<div class="a c">isolation: isolate;</div>
</div>
</div>
</body>
</html>Результат
Изоляция смешанного заголовка над изображением
Здесь заголовок использует mix-blend-mode: overlay для смешивания с фотографией. Без isolation: isolate на заголовке режим overlay также смешивается с фоном body (#eee) там, где заголовок выходит за пределы изображения. Добавление isolation: isolate ограничивает смешивание собственным контекстом наложения заголовка, сохраняя эффект однородным по всей ширине.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #eee;
color: #555;
font-size: 1.1em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.isolation-example {
margin: 1em auto;
width: 100%;
max-width: 814px;
position: relative;
}
img {
width: 100%;
}
.isolation-example h1 {
position: absolute;
top: 5em;
color: white;
text-align: center;
font-size: 40px;
width: 100%;
text-transform: uppercase;
background-color: #000;
padding: .5em .25em;
mix-blend-mode: overlay;
isolation: isolate;
}
</style>
</head>
<body>
<h2>Isolation property example</h2>
<div class="isolation-example">
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Yellow tree." />
<div class="element">
<h1>House</h1>
</div>
</div>
</body>
</html>Как создаются контексты наложения
isolation: isolate — один из многих способов создать новый контекст наложения. В таблице ниже перечислены наиболее распространённые триггеры и наличие у них визуальных или структурных побочных эффектов:
| Триггер | Побочный эффект |
|---|---|
isolation: isolate | Нет — только контекст наложения |
opacity меньше 1 | Изменяет прозрачность элемента |
transform (любое значение кроме none) | Перемещает или изменяет форму элемента |
filter (любое значение кроме none) | Применяет визуальный эффект |
will-change с transform или opacity | Может перенести элемент на отдельный слой композитора |
Ненулевой z-index на позиционированном элементе | Изменяет порядок наложения |
Когда нужна только граница — без прозрачности, без визуальных изменений, без переупорядочивания — используйте isolation: isolate.
Важно помнить
isolationне наследуется. Установка его на родителе не создаёт собственные контексты наложения у дочерних элементов.- Свойство действует только на элементы, участвующие в контексте наложения (на практике — все блочные и строчные элементы, SVG элементы, а также дочерние элементы flex- и grid-контейнеров).
- Исследуйте границы контекстов наложения с помощью DevTools браузера: Firefox показывает значок контекста наложения рядом с элементами на панели Layers; Chrome отображает информацию о контексте наложения на вкладке Computed.
- Поддержка браузерами отличная — все современные браузеры поддерживают
isolationс 2015 года. Префиксы не нужны.
Связанные свойства
- mix-blend-mode — смешивает элемент с содержимым под ним;
isolationуправляет тем, где это смешивание прекращается. - background-blend-mode — смешивает собственные фоновые слои элемента между собой.
- filter — применяет графические эффекты, такие как размытие и оттенки серого; также неявно создаёт контекст наложения.
- opacity — ещё один триггер контекста наложения; значения ниже
1делают элемент полупрозрачным. - transform — перемещает, вращает или масштабирует элемент; также создаёт контекст наложения.
- z-index — управляет порядком наложения внутри контекста наложения.