Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

CSS свойство isolation определяет должен ли элемент создавать новый контекст наложения stacking context.Контекст наложения (stacking context)

Это свойство особенно полезно при использовании совместно с background-blend-mode.

Syntax

/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: unset;

The isolation property is specified as one of the keyword values listed below.

Values

auto
A new stacking context is created only if one of the properties applied to the element requires it.
isolate
A new stacking context must be created.

Formal syntax

auto | isolate

Examples

<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
.a {
  background-color: rgb(0,255,0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}

Specifications

Specification Status Comment
Compositing and Blending Level 1
Определение 'Isolation' в этой спецификации.
Кандидат в рекомендации Initial definition

Начальное значениеauto
Применяется кВсе элементы. В SVG это применяется к контейнерам, графическим элементам и элементам графической отсылки.
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка 41Edge Нет поддержки НетFirefox Полная поддержка 36IE Нет поддержки НетOpera Полная поддержка 30Safari Полная поддержка ДаWebView Android Полная поддержка 41Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 36Opera Android ? Safari iOS Полная поддержка 8Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

See also

Метки документа и участники

Внесли вклад в эту страницу: AliaksandrZahorski
Обновлялась последний раз: AliaksandrZahorski,