理解CSS3 isolation: isolate的表現和作用

一、關于isolation

isolation 是一個CSS3屬性，顧名思意是“隔離”，支持的值除了萬年不變的 inherit 外還包括 auto 和 isolate .

繼承沒什么好說的。 auto 實際上就是不干事的意思，是元素的默認值。所以，我們只需要關心 isolation: isolate 這個聲明就好了。

isolation: isolate 正如其語義，就是隔離的意思，那隔離什么呢？本義是用來隔離 mix-blend-mode 元素的混合。

關于 mix-blend-mode 混合模式可以參考我之前的文章：“ CSS3混合模式mix-blend-mode簡介 ”。

當元素應用了混合模式的時候，默認情況下，其會混合z軸上所有層疊順序比其低的層疊元素。

但是，有時候，我們希望混合模式只到某一個元素，或者只是某一組元素怎么辦呢？ isolation: isolate 就是為了解決這個問題產生的。

您可以狠狠地點擊這里： isolation: isolate作用演示demo

如下CSS和HTML結構：

.box {
    background-color: #0074D9;
}
.inner {
    width: 256px;
    height: 256px;
    background: url(mm1.jpg) no-repeat;    
}
.mode {
    position: relative;
    right: -100px;
    mix-blend-mode: darken; 
}

<div class="box">
    ><div class="inner">
        ><img src="mm2.jpg" class="mode">
    ></div>
></div>

此時，mm2這個豎妹子不僅和mm1橫妹子發生了混合，還和藍色的背景色發生了混合。

然后，我們想要實現的效果是，僅僅兩張圖片發生混合，這時候應該怎么辦？

此時就可以使用 isolation:isolate 進行阻斷，形成一個混合組。組以外的其他元素不會發生層疊。

所以，例如，點擊demo頁面的按鈕，給 .inner 這層 div 元素增加 isolation:isolate ， 大家會發現，mm2這個豎妹子沒有和藍色背景色發生混合，如下截圖：

二、isolation:isolate作用的原理

isolation:isolate 之所以可以阻斷混合模式的進行，本質上是因為 isolation:isolate 創建一個新的 層疊上下文(stacking context) 。

沒錯，之所以起作用，就是單純地因為創建了新的層疊上下文。本身并沒有做什么特殊的事情。或者我可以這么大膽的說：“ isolation:isolate 除了創建層疊上下文，其他沒有任何鳥用！”

可能有人會疑問，如果按照你的說法，豈不是任何可以創建層疊上下文的屬性都可以阻斷 mix-blend-mode 的生效？

沒錯，就是這樣子的！

只要元素可以創建層疊上下文，就可以阻斷mix-blend-mode！

于是，不僅僅是 isolation:isolate ，下面這些也是可以的：

1. z-index 值不為 auto 的 position:relative /position: absolute 定位元素。
2. position:fixed ，僅限Chrome瀏覽器，其他瀏覽器遵循上一條，需要 z-index 為數值。
3. z-index 值不為 auto 的 flex 項(父元素 display:flex|inline-flex ).
4. 元素的 opacity 值不是 1 .
5. 元素的 transform 值不是 none .
6. 元素 mix-blend-mode 值不是 normal .
7. 元素的 filter 值不是 none .
8. will-change 指定的屬性值為上面任意一個。
9. 元素的 -webkit-overflow-scrolling 設為 touch .

眼見為實，您可以狠狠地點擊這里： 層疊上下文與混合模式阻隔測試demo

選擇任意一款層疊上下文，大家都可以感受到對 mix-blend-mode 的阻隔，例如：

三、關于background-blend-mode

混合模式領域還有一個重要的家伙就是 background-blend-mode , 背景混合模式。那這個CSS屬性需要 isolation:isolate 進行阻隔嗎？答案是不需要。 background-blend-mode 天生是一個封閉的混合領域，不會影響其他元素。

以上~

四、結束語

由此看來，CSS3不僅僅是增加了一些表現層的東西，類似層疊上下文這樣的概念變得更加厚重了，其背后的很多交織在一起的關系也比想象的復雜，但是又是互相驗證的體系。

CSS的學習還是相當任重道遠的。

（本篇完）