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

2016/01/10 · CSS ·
isolate

原文出处:
张鑫旭   

深入理解CSS中的层叠上下文和层叠顺序

2016/01/10 · CSS ·
层叠上下文

原文出处:
张鑫旭   

零、世间的道理都是想通的

在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈。比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上。再比如说话语权,老婆的话永远是对的,领导的话永远是对的。

在CSS届,也是如此。只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等。但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了。例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的。那对于CSS世界中的元素而言,所谓的“冲突”指什么呢,其中,很重要的一个层面就是“层叠显示冲突”。

默认情况下,网页内容是没有偏移角的垂直视觉呈现,当内容发生层叠的时候,一定会有一个前后的层叠顺序产生,有点类似于真实世界中论资排辈的感觉。

而要理解网页中元素是如何“论资排辈”的,就需要深入理解CSS中的层叠上下文和层叠顺序。

我们大家可能都熟悉CSS中的z-index属性,需要跟大家讲的是,z-index实际上只是CSS层叠上下文和层叠顺序中的一叶小舟。

mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离,mixblendmode

css3 mix-blend-mode 混合模式
  该属性不仅可以作用于HTML,还可以作用于SVG
  兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari
7~9.1
  支持的值很多:
  mix-blend-mode:normal;    //正常
  mix-blend-mode:multiply;   //正片叠加
  mix-blend-mode:screen;   //滤色
  mix-blend-mode:overlay;   //叠加
  mix-blend-mode:darken;   //变暗
  mix-blend-mode:lighten;   //变亮
  mix-blend-mode:color-dodge;   //颜色减淡
  mix-blend-mode:color-burn;   //颜色加深
  mix-blend-mode:hard-light;   //强光
  mix-blend-mode:soft-light;   //柔光
  mix-blend-mode:difference;   //差值
  mix-blend-mode:exclusion;   //排除
  mix-blend-mode:hue;     //色相
  mix-blend-mode:color;     //颜色
  mix-blend-mode:luminosity; //亮度
  mix-blend-mode:initial;   //初始
  mix-blend-mode:inherit;   //继承
  mix-blend-mode:unset;   //复原

css3 background-blend-mode 背景混合模式
  可以是背景图片见的混合模式,也可以是背景图片和背景色的混合。
  兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari
7~9.1
  CSS3
backgrounds多背景IE9+浏览器就开始支持了,因此,你想混合多图,就是要逗号,一个一个写在background属性中就可以了,
  .box {
    background: url(mm1.jpg) no-repeat center, url(mm2.jpg)
no-repeat center;
  }

css3 isolation:isolate 隔离
  值除了万年不变的inherit外还包括auto和isolate
  isolation:isolate 的原理:本质上是因为 isolation:isolate
创建一个新的层叠上下文。
  只要有元素可以创建层叠上下文,就可以阻断mix-blend-mode
    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。

混合模式 background-blend-mode
背景混合模式 isolation:isolate 隔离,mixblendmode css3 mix-blend-mode
混合模式 该属性不仅可以作用于HTML,还…

一、关于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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.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>

1
2
3
4
5
<div class="box">
    ><div class="inner">
        ><img src="mm2.jpg" class="mode">
    ></div>
></div>

此时,mm2这个竖妹子不仅和mm1横妹子发生了混合,还和蓝色的背景色发生了混合。

图片 1

然后,我们想要实现的效果是,仅仅两张图片发生混合,这时候应该怎么办?

此时就可以使用isolation:isolate进行阻断,形成一个混合组。组以外的其他元素不会发生层叠。

所以,例如,点击demo页面的按钮,给.inner这层div元素增加isolation:isolate
大家会发现,mm2这个竖妹子没有和蓝色背景色发生混合,如下截图:
图片 2

一、什么是层叠上下文

层叠上下文,英文称作”stacking context”.
是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在z轴上就“高人一等”。

这里出现了一个名词-z轴,指的是什么呢?

表示的是用户与屏幕的这条看不见的垂直线(参见下图示意-红线):
图片 3

层叠上下文是一个概念,跟「块状格式化上下文(BFC)」类似。然而,概念这个东西是比较虚比较抽象的,要想轻松理解,我们需要将其具象化。

怎么个具象化法呢?

你可以把「层叠上下文」理解为当官:网页中有很多很多的元素,我们可以看成是真实世界的芸芸众生。真实世界里,我们大多数人是普通老百姓们,还有一部分人是做官的官员。OK,这里的“官员”就可以理解为网页中的层叠上下文元素。

换句话说,页面中的元素有了层叠上下文,就好比我们普通老百姓当了官,一旦当了官,相比普通老百姓而言,离皇帝更近了,对不对,就等同于网页中元素级别更高,离我们用户更近了。

图片 4

二、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的阻隔,例如:
图片 5

二、什么是层叠水平

再来说说层叠水平。“层叠水平”英文称作”stacking
level”,决定了同一个层叠上下文中元素在z轴上的显示顺序。level这个词很容易让我们联想到我们真正世界中的三六九等、论资排辈。真实世界中,每个人都是独立的个体,包括同卵双胞胎,有差异就有区分。例如,双胞胎虽然长得像Ctrl+C/Ctrl+V得到的,但实际上,出生时间还是有先后顺序的,先出生的那个就大,大哥或大姐。网页中的元素也是如此,页面中的每个元素都是独立的个体,他们一定是会有一个类似的排名排序的情况存在。而这个排名排序、论资排辈就是我们这里所说的“层叠水平”。层叠上下文元素的层叠水平可以理解为官员的职级,1品2品,县长省长之类;对于普通元素,这个嘛……你自己随意理解。

于是,显而易见,所有的元素都有层叠水平,包括层叠上下文元素,层叠上下文元素的层叠水平可以理解为官员的职级,1品2品,县长省长之类。然后,对于普通元素的层叠水平,我们的探讨仅仅局限在当前层叠上下文元素中。为什么呢?因为否则没有意义。

这么理解吧~
上面提过元素具有层叠上下文好比当官,大家都知道的,这当官的家里都有丫鬟啊保镖啊管家啊什么的。所谓打狗看主人,A官员家里的管家和B官员家里的管家做PK实际上是没有意义的,因为他们牛不牛逼完全由他们的主子决定的。一人得道鸡犬升天,你说这和珅家里的管家和七侠镇娄知县县令家里的管家有可比性吗?李总理的秘书是不是分分钟灭了你村支部书记的秘书(如果有)。

翻译成术语就是:普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。

图片 6

需要注意的是,诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错,某些情况下z-index确实可以影响层叠水平,但是,只限于定位元素以及flex盒子的孩子元素;而层叠水平所有的元素都存在。

发表评论

电子邮件地址不会被公开。 必填项已用*标注