了解CSS revert全局关键字

这篇文章发布于 2021年02月14日,星期日,15:42,归类于 CSS相关。 阅读 991 次, 今日 12 次 2 条评论

 

CSS全局关键字占位图

一、CSS全局关键字

inheritinitialunsetrevert都是CSS全局关键字。

所谓“全局关键字”,指的是所有的CSS属性都可以使用这几个关键字作为属性值。

其中前3个关键字之前我已经介绍过了, 详见“CSS inherit是继承,那initial和unset呢?”这篇文章。

revert关键字当时兼容性不佳,只是一带而过。

现在是时候拿出来介绍了。

二、revert作用-还原

revert关键字可以让当前元素的样式还原成浏览器内置的样式,注意,是还原到浏览器内置的默认样式,而不是CSS属性原本的初始值。

例如:

ol {
    padding: revert;
    list-style-type: revert;
}

那么<ol>中的每一个<li>项都会有数字效果呈现,当然,前提是你没有对子元素<li>list-style-type属性做过样式重置。

好吧,我觉得还是有必要插一嘴,请记住:没有任何理由对<li>元素进行任何样式重置,因为所有浏览器的<li>元素默认都没有margin外间距,也没有padding内间距,list-style-type也是继承自外面的<ul><ol>元素。所以对<li>元素进行任何样式重置既浪费CSS代码,也不利于列表序号的样式设置。此刻,您就可以看看您手中的项目中的CSS reset代码,有没有对<li>元素做过样式重置,如果有,赶快删掉。

/* 请删除 */
li {
    padding: 0; margin: 0;
    list-style-type: none;
}

我们来看一下实际的效果,如下图所示,截自Firefox浏览器。

完整的测试代码如下:

<ol class="revert-ol">
    <li>inherit关键字实用</li>
    <li>initial关键字可用</li>
    <li>unset关键字配合all使用</li>
    <li>revert关键字有用</li>
</ol>
.revert-ol {
    list-style: none;
}
@supports (padding: revert) {
    .revert-ol {
        padding: revert;
        list-style-type: revert;
    }
}

对于不支持revert关键字的浏览器,则看不到前面的数字序号,如下图所示。

眼见为实,你可以狠狠地点击这里:CSS revert关键字与有序列表恢复demo

目前兼容性

revert关键字的兼容性现在已经挺好的了,Chrome、Firefox和Safari等现代浏览器均已支持,如下截图所示:

revert关键字兼容性

四、revert相对更实用一些

revert关键字要比initial等关键字更实用,常常配合all属性一起使用。

例如希望一个按钮完全使用浏览器默认的UI,则可以这么设置:

button {
    all: revert;
}

类似revert这样的CSS特性,平常不怎么用到,一旦用到,立竿见影的效果非常的爽歪歪。

大家可以多加关注下。

好,以上就是本文内容,欢迎转发欢迎分享。

感谢您的阅读,情人节快乐!

(本篇完)

分享到:


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

  1. 雪地里的蜗牛儿说道:

    学到了!!

  2. 仿生狮子说道:

    nice