使用CSS revert全局关键字还原display显示元素,展开更多内容

一、需求与问题描述

需求：列表默认最多显示3项，点击更多按钮显示剩余列表项。

于是有CSS如下：

li:nth-child(n+4) {
    display: none;
}

HTML如下：

<ul id="ul">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
  <li>选项4</li>
  <li>选项5</li>
</ul>
<p><button id="b1">更多</button></p>

点击更多按钮，让隐藏的<li>元素显示。

不少前端开发会想到使用下面的CSS代码让元素显示：

li.style.display = 'block';

乍一看，这么实现没有任何问题，实际上，看看下面的实际渲染效果图就知道为什么不行了：

可以看到，显示的列表的项目符号没有了。

原因很简单，<li>元素默认的display计算值不是'block'，而是'list-item'。

实际开发的时候，'list-item'不一定记得住，此时可以使用 revert 关键字代替，也就是甭管什么标签，全部使用浏览器默认的display计算值。

li.style.display = 'revert';

此时，列表显示的同时项目符号也正常显示了，如下截图所示：

您可以狠狠地点击这里：列表display不同值显示对比demo

二、revert关键字是干嘛的

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

目前现代浏览器均已支持。

revert关键字有时候会和CSS all属性一起使用，可以将某个控件元素完全还原为浏览器默认的样子。

例如<progress>进度条效果在iOS端很好看，很有质感，无需自定义样式，则我们就可以all:revert一键还原成系统默认的界面样式。

/* 仅iOS Safari有效 */
@supports (-webkit-overflow-scrolling: touch) {
    progress {
        all: revert;
    }
}

又例如写了两个美美的按钮：

希望还是使用浏览器原生的质朴的按钮，则可以对按钮元素设置all:revert进行还原。

会得到如下所示的按钮效果：

三、其他display场景示意

revert控制元素显示最适合用在公用的组件开发中，例如实现一个选项卡切换，或者手风琴切换效果，其中就有对元素的显示控制。

此时，可以告别传统的 display:block 显示，也无需判断原始的display计算值再设置，直接使用 display:revert试试。

这样，元素显示的时候，究竟是内联、块状直接通过HTML标签区分即可。

例如 <span>元素显示为inline，<div>、<p>元素显示为block，<table>元素显示为table等。

貌似没有哪个HTML元素默认的display计算值是 flex 或者 grid。

所以，revert也只能说是是个不错的方案，但还不是终极方案。

四、其他全局关键字

CSS世界中还有其他3个全局关键字，分别是：inherit、initial、unset。

然后根据实用性和兼容性我整理了一个全局关键字属性值评价表，如下所示：

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

关键字属性值	实用性	兼容性	整体评价
inherit	A	A+	A+
initial	B-	B+	B
unset	B-	B-	B-
revert	B	C	B-

不过非本文重点，不展开介绍。