CSS inherit是继承,那initial和unset呢?

这篇文章发布于 2020年01月2日,星期四,23:22,归类于 CSS相关。 阅读 5323 次, 今日 9 次 5 条评论

 

所有CSS都支持几个全局属性值,分别是:inherit, initialunset

其中inherit是继承的意思,IE8(标准版)开始支持,不是从IE9开始支持的,网上一些文档是错误的。inherit是非常好用的一个CSS属性。

例如:

input, textarea {
    font-family: inherit;
}

或者子元素height:inherit或者背景background继承等,都是非常实用的场景。

initialunset这两个关键字值是什么意思呢?很多前端开发人员就不知道了。

一、初始值initial

initial表示初始值的意思。

举几个例子看看其细节表现。

案例1:font-size与initial

测试代码如下:

<ul style="font-size:12px;border:1px solid deepskyblue;">
    <li>#朱一龙追梦人#   <small class="ml20">1亿</small></li>
    <li>#宠爱票房#   <small class="ml20">3亿</small></li>
    <li>#张艺兴醉拳舞# <small class="ml20">1亿</small></li>
    <li>#肖战余年MV# <small class="ml20">2亿</small></li>
    <li style="font-size:initial">#张鑫旭中大鱼# <small class="ml20">233</small></li>
</ul>

实时效果如下(Edge 12+,Chrome,Firefox等浏览器有效果):

  • #朱一龙追梦人# 1亿
  • #宠爱票房# 3亿
  • #张艺兴醉拳舞# 1亿
  • #肖战余年MV# 2亿
  • #张鑫旭中大鱼# 233

截屏效果如下,可以看到“张鑫旭中大鱼”这个热搜文字明显大了一圈,因为使用了font-size的初始值,就是…………《CSS世界》中有专门强调过,看看是不是你心里面想的那个值,那就是medium,如果已经完全没有印象了,《CSS世界》还需要再好好看一遍哦。

初始值效果示意

案例2:漂亮的button一秒变丑

有个美美的按钮,写了很多CSS:

.ui-button {
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
    text-align: center;
    color: #4c5161;
    border-radius: 4px;
    padding: 10px 15px;
    min-width: 80px;
    border: none;
    background-color: #2a80eb;
    color: #fff;
    box-sizing: border-box;
    font-family: inherit;
    cursor: pointer;
    overflow: visible;
}
<button class="ui-button">美美的按钮</button>

然后这个按钮的实时效果如下:

你以为你大功告成,突然产品经理来了个需求,希望我们的页面增加一个叫原始皮肤的皮肤,在这个皮肤下面,所有的表单控件都是用原生的样子。

如果只要一个按钮还好,JS去掉类名ui-button,但是现在是整个页面换肤,有那么多的按钮,而且还有按钮说不定是在JS里面创建的,所以去除类名这种方式显得很麻烦。

有没有什么简单的办法呢?啊,很简单,一行CSS就可以了,如下示意:

<button class="ui-button" style="all: initial">美美的按钮</button>

实时效果如下:

截图效果如下:

美美的按钮变成文字

大家看到了没?这就是一个非常典型,非常具有代表性的,脑袋瓜想当然,然后翻车的现场!大家一定要引以为戒!

all:initial并不能把按钮还原成浏览器原始按钮UI。因为浏览器默认按钮CSS也是额外设置的,因此,all:initial会把浏览器内置按钮的CSS也全部变成初始值了,什么border边框啊,什么background背景全部都没了,结果最后就是一个纯文本一样的按钮。

所以,漂亮的按钮一秒变丑,1秒是不可能的了,不过也不是没有办法,可以借助:not()伪类。

body:not('.initial') .ui-button {
    /* 美美的按钮相关CSS */
}

二、不固定值unset

unset表示不固定值,特性如下,当前元素浏览器或用户设置的CSS忽略,然后如果是具有继承特性的CSS,如color, 则使用继承值;如果是没有继承特性的CSS属性,如background-color, 则使用初始值。

还是按钮的例子,如果我们这样改造呢?

<button class="ui-button" style="all: unset">美美的按钮</button>

实时效果如下(Edge 13+,Chrome,Firefox等浏览器有效果):

截图对比效果如下:

按钮对比效果截图

虽然看似一样,实际上还是有不同之处的,例如color文字颜色,前者纯黑,后者淡一些;又例如按钮的高度,由于line-height具有继承性,所以后面的按钮继承了当前文章所在的行高,而不是normal初始值。

本想再举几个酷酷的例子,但是我想破脑袋都想不出有什么非常屌的应用场景,算了算了,就这样吧,等我哪天遇到哪个特殊的场景用到它再补充吧。

三、简单提一提revert

revert也是一个全局值,表示恢复,可以重置CSS属性为浏览器默认的样式,正好可以完美解决上面按钮1秒变丑的需求。

兼容性如下,Firefox和Safari浏览器支持,Edge和Chrome暂时不支持:

CSS revert兼容性

如果用在all属性中,则目前只有Safari浏览器支持,因此,实际项目中还用不起来:

all:revert兼容性

四、结束语

给机会不中用

initial君,unset桑,本来想专门写篇文章好好夸夸你们,但是你们实在是不争气啊,给你们机会,你们也不中用啊。

兼容性又不好,比方说unset桑:

unset兼容性

unset兼容性

initial君还好一点,移动端可以放心使用,很早就支持了,虽然IE还是场梦。

initial兼容性

initial兼容性截图

同时也不实用,唉,没办法,我决定了,你们在《CSS新世界》这本书中活不过一页纸了。

(本篇完)

分享到:


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

  1. 十万个为什么说道:

    文末提到的css新世界, 将会在什么时候出呢

  2. saber酱说道:

    提个小问题,评论这里“提交评论”的按钮没有 focus 效果,我写完评论习惯用 tab 键转到提交按钮,没有特效还以为 tab 不到

  3. saber酱说道:

    学习一个,赞

  4. leto说道:

    关于 initial,提供一个场景。编写一个通用组件,提供给任意页面使用,可以利用类名的方式来防止外部页面样式入侵:
    #my-component {
    * {
    all: unset;
    }
    }