2.3 了解CSS全局关键字属性值_CSS新世界-QQ阅读男生科幻网

上QQ阅读APP看书，第一时间看更新

2.3　了解CSS全局关键字属性值

inherit、initial、unset和revert都是CSS全局关键字属性值，也就是说所有CSS属性都可以使用这几个关键字作为属性值。

我根据实用性和兼容性整理了一个全局关键字属性值评价表，如表2-4所示。

表2-4　CSS全局关键字属性值评价表

当然，浏览器的兼容性随着版本的演化会越来越好，本书也会迭代更新相关信息。

接下来就具体看看这几个全局关键字的作用都是什么。

2.3.1　用过都说好的继承关键字inherit

inherit这个关键字是继承的意思。IE浏览器从IE8（标准版）开始就已经支持该关键字了，而不是从IE9浏览器开始支持的。请记住，不是从IE9开始支持的，网络上的某些在线文档是错误的。

inherit是一个实用性和兼容性俱佳的CSS属性值，例如我比较喜欢使用inherit关键字重置输入框的内置字体：

input, textarea {
    font-family: inherit;
}

又如，子元素设置height:inherit实现高度继承，或者子元素设置background- image:inherit实现背景图像继承等，这些都是非常实用的场景。

大家一定要养成使用inherit关键字的好习惯，这可以有效地降低开发和维护成本，谁用谁说好。

2.3.2　可以一用的初始值关键字initial

initial是初始值关键字，可以把当前的CSS属性的计算值还原成CSS语法中规定的初始值。

下面我们就通过一个简单的案例快速了解一下这个CSS关键字。

例如，下面这段HTML表示的是一个热门话题列表：

<ul class="initial-ul">
    <li>#追梦人#    <small>1亿</small></li>
    <li>#票房#    <small>3亿</small></li>
    <li>#醉拳舞#    <small>1亿</small></li>
    <li>#余年MV#    <small>2亿</small></li>
    <li>#CSS新世界#    <small>666</small></li>
</ul>

然后，我们给最后一行列表设置font-size:initial，CSS代码如下：

.initial-ul {
    font-size: 13px;
}
.initial-ul li:last-child {
    font-size: initial;
}

结果如图2-2所示。

图2-2　initial使用效果示意

从图2-2中可以看到最后一行“#CSS新世界#”这几个文字的字号明显比上面几行文字的字号大了一些。这是因为最后一个<li>列表项设置了font-size: initial，这就意味着最后一个<li>列表项的字号大小使用的是CSS规范中定义的初始值，这个初始值就是medium关键字。如果用户没有修改过浏览器中的默认字号设置，则medium关键字的计算值是16px。

因此在本案例中，前几行的字号大小是13px，最后一项的字号大小是16px。

眼见为实，读者可以在浏览器中进入https://demo.cssworld.cn/new/2/3-1.php页面，或者扫描右侧的二维码查看效果。

initial关键字适合用在需要重置某些CSS样式，但又不记得初始值的场景。initial关键字还可以帮助我们了解CSS属性的初始值。例如，display属性的初始值是什么MDN文档就没有明说，那我们就可以设置display:initial看一下效果：

p {
    display: initial;
}

结果<p>元素垂直方向的margin和text-indent属性都失效了，这些失效现象是典型的内联元素特性，因此，display属性的初始值是inline。

可能的误区

很多人有这样一个误区：把initial关键字理解为浏览器设置的元素的初始值。实际上两者是不一样的。

举个例子，实际开发的时候，<ul>元素或<ol>元素默认的list-style-type样式会被CSS重置。但是可能会遇到这样的场景，即某些区域需要增加一些描述信息，因此需要重新使用list-style-type样式（小圆点或者数字），此时有些开发者就会使用initial关键字对该样式进行还原：

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

但是没有用！因为上面的CSS设置等同于下面的设置：

ol {
    padding: 0;
    list-style-type: disc;
}

而不是预想的：

ol {
    padding: 0 0 0 40px;
    list-style-type: decimal;
}

此时需要的全局关键字属性值其实是revert，而不是initial。

兼容性

initial关键字属性值的兼容性如表2-5所示。

表2-5　initial关键字属性值的兼容性（数据源自Caniuse网站）

除IE浏览器之外，其他浏览器都很早就支持了initial，因此，至少在移动端项目（包括微信小程序）中大家可以百分之百放心使用这个关键字属性值。

2.3.3　了解一下不固定值关键字unset

unset是不固定值关键字，其特性如下：如果当前使用的CSS属性是具有继承特性的，如color属性，则等同于使用inherit关键字；如果当前使用的CSS属性是没有继承特性的，如background-color，则等同于使用initial关键字。

unset这个关键字只有配合all属性使用才有意义，因为对于某个具体的CSS属性，想要继承某个属性，那就使用inherit关键字；想要使用初始值，那就使用initial关键字，没有任何理由使用unset关键字。

举个例子，Chrome浏览器支持HTML 5.1规范中的<dialog>元素，我们自然会想到借助这个<dialog>元素实现语义更好的弹框组件。然而有一个小问题，这个<dialog>元素内置了很多我们不需要的样式，内容如下（来自Chrome 79）：

dialog {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    width: -webkit-fit-content;
    height: -webkit-fit-content;
    color: black;
    margin: auto;
    border-width: initial;
    border-style: solid;
    border-color: initial;
    border-image: initial;
    padding: 1em;
    background: white;
}

可以看到<dialog>元素默认有黑色边框和padding内间距，还有纯白色的背景颜色和纯黑色的文字颜色，因此下面这段HTML就会有图2-3所示的效果：

<dialog open>CSS新世界</dialog>

图2-3　<dialog>元素默认效果示意

这个粗糙的效果显然不是我们想要的，但是我们又不想一个属性接一个属性地进行重置，怎么办呢？此时就可以先使用all:unset进行批量重置，再设置我们需要的CSS属性：

dialog {
    all: unset;
    /*  ... */
}

这样，无论当前浏览器是否支持<dialog>元素，最终渲染出来的样式效果都是一致的。因为不支持<dialog>元素的浏览器会把<dialog>元素按照<span>这个内联元素渲染，这就和设置了all:unset的效果一模一样。

兼容性

unset关键字属性值的兼容性要比initial差一些，主要是因为被浏览器支持的时间晚了一点，具体如表2-6所示。

表2-6　unset关键字属性值的兼容性（数据源自Caniuse网站）

虽然兼容性逊色了一点，但并不影响unset的使用，主要有以下两方面的原因。

（1）需要使用unset的场景非常有限，既然使用的机会很少，那么兼容性问题就不是问题。

（2）<dialog>元素的样式重置是很难得的unset使用场景，由于支持<dialog>元素的浏览器一定支持unset，因此也不用担心兼容性的问题。

2.3.4　我个人很喜欢的恢复关键字revert

revert关键字可以让当前元素的样式还原成浏览器内置的样式。例如：

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

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

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

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

我们来看一下实际效果，如图2-4所示（截自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关键字的浏览器，如Chrome 79，则看不到前面的数字序号，如图2-5所示。