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

这篇文章发布于 2016年01月9日,星期六,22:15,归类于 CSS相关。 阅读 62865 次, 今日 3 次 9 条评论

 

一、关于isolation

isolation是一个CSS3属性,顾名思意是“隔离”,支持的值除了万年不变的inherit外还包括autoisolate.

继承没什么好说的。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之所以可以阻断混合模式的进行,本质上是因为isolation:isolate创建一个新的层叠上下文(stacking context)

没错,之所以起作用,就是单纯地因为创建了新的层叠上下文。本身并没有做什么特殊的事情。或者我可以这么大胆的说:“isolation:isolate除了创建层叠上下文,其他没有任何鸟用!”

可能有人会疑问,如果按照你的说法,岂不是任何可以创建层叠上下文的属性都可以阻断mix-blend-mode的生效?

没错,就是这样子的!

只要元素可以创建层叠上下文,就可以阻断mix-blend-mode!

于是,不仅仅是isolation:isolate,下面这些也是可以的:

  1. z-index值不为autoposition:relative/position:absolute定位元素。
  2. position:fixed,仅限Chrome浏览器,其他浏览器遵循上一条,需要z-index为数值。
  3. z-index值不为autoflex项(父元素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的学习还是相当任重道远的。

(本篇完)

分享到:


发表评论(目前9 条评论)

  1. 雨天有鱼说道:

    非常好的文章,深入浅出,可以一次性了解isolate的相关知识,帮了大忙,非常感谢。

  2. 比你老的菜鸟css开发说道:

    问个问题呀,
    那为什么mm2的图片用了relative定位,而不是absolute相对于inner定位?

  3. dr说道:

    学习了

  4. 水中月镜中花说道:

    大神,经常看你的博客,最近在写一个html5的项目,里面用到了flex弹性布局,对于大部分的手机适配都没有问题,但是有一些低版本的手机适配不了,比如荣耀3,天语,酷派什么的,请问你在做项目的时候有没有遇到类似的问题呢?如何解决?

  5. 小明说道:

    好东西,谢谢分享

  6. dvinci说道:

    前来学习

  7. 小微说道:

    好长时间没有更新了,现在终于又看到了。正好这几天我在学CSS3动画,非常及时。谢谢