这篇文章发布于 2020年01月2日,星期四,23:22,归类于 CSS相关。 阅读 22482 次, 今日 2 次 5 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=5474
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。
所有CSS都支持几个全局属性值,分别是:inherit
, initial
和unset
。
其中inherit
是继承的意思,IE8(标准版)开始支持,不是从IE9开始支持的,网上一些文档是错误的。inherit
是非常好用的一个CSS属性。
例如:
input, textarea { font-family: inherit; }
或者子元素height:inherit
或者背景background
继承等,都是非常实用的场景。
那initial
和unset
这两个关键字值是什么意思呢?很多前端开发人员就不知道了。
一、初始值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暂时不支持:
如果用在all
属性中,则目前只有Safari浏览器支持,因此,实际项目中还用不起来:
四、结束语
initial君,unset桑,本来想专门写篇文章好好夸夸你们,但是你们实在是不争气啊,给你们机会,你们也不中用啊。
兼容性又不好,比方说unset桑:
unset兼容性
initial君还好一点,移动端可以放心使用,很早就支持了,虽然IE还是场梦。
initial兼容性
同时也不实用,唉,没办法,我决定了,你们在《CSS新世界》这本书中活不过一页纸了。
本文为原创文章,欢迎分享,勿全文转载,如果实在喜欢,可收藏,永不过期,且会及时更新知识点及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=5474
(本篇完)
- 简单了解CSS3的all属性 (0.741)
- CSS又出了个revert-layer全局关键字? (0.704)
- 了解CSS revert全局关键字 (0.642)
- 使用CSS revert全局关键字还原display显示元素 (0.338)
- 分享下input time输入框的细节知识 (0.148)
- CSS中height:100%和height:inherit的异同 (0.129)
- CSS必学基础:理解CSS中的级联规则 (0.129)
- CSS渐变图片背景下高度亦自适应按钮 (0.111)
- letter-spacing+first-letter实现按钮文字隐藏 (0.106)
- HTML5按钮元素新属性formaction,formenctype等简介 (0.106)
- HTML中无标签文本的CSS变色技巧 (RANDOM - 0.005)
文末提到的css新世界, 将会在什么时候出呢
2021年年中。
提个小问题,评论这里“提交评论”的按钮没有 focus 效果,我写完评论习惯用 tab 键转到提交按钮,没有特效还以为 tab 不到
学习一个,赞
关于 initial,提供一个场景。编写一个通用组件,提供给任意页面使用,可以利用类名的方式来防止外部页面样式入侵:
#my-component {
* {
all: unset;
}
}