我多久没学CSS了

今天早上逛Sidebar,看到一感兴趣的文章，题目叫做”82% of developers get this 3 line CSS quiz wrong“。我心想3行的代码这么多人都做错了，得看看什么情况。点进去看到了这么一个投票：

1737个人投票，只有18.1%的人选中的正确答案：skyblue，也就是说只有314个人答对了。

我惊呆了，我觉得答对的人太多了😛，事实上，我连revert怎么用的都不知道。

:root {--accent-color: skyblue; } 
div { --accent-color: revert; background: var(--accent-color, orange); } 

然后我赶紧查了revert的用法，然后又觉得这题目太迷惑了，答对的人真的不少了😅。

赶紧浏览器里试了一下。

结果：

答案确实是skyblue。

revert是CSS的全局关键字，所谓“全局关键字”，指的是所有的CSS属性都可以使用它作为属性值,包括简写属性 all。其他全局关键字包括inherit、initial、unset。

revert关键字可以让当前元素的样式还原成浏览器内置的样式(UA stylesheet)。（我们假设没有用户样式表----由浏览器用户提供的样式表）。

在这里就意味着， 自定义属性--accent-color 没有值。这里有很多人会这么干，既然div没有--accent-color属性，根据var的用法,自定义属性无效，则该函数将使用第二个值，即orange，那就错了。因为自定义属性默认是可以继承的，就像作用域变量一样，因为:root中定义了 --accent-color,所以div可以使用这个值，所以div的背景是skyblue。

假如我们把自定义属性改为非继承的会怎么样？这次会不是orange？

请注意， 我们注册一个自定义属性时，必须提供一个初始值。 代码如下：

:root {
    --accent-color: skyblue;
}

@property --accent-color {
  syntax: "<color>";
  inherits: false;
  initial-value: yellowgreen;
}

div {
  padding: 3em;
    --accent-color: revert; 
    background: var(--accent-color, orange);
}

结果：

答案是自定义属性的默认值 yellowgreen。

到这就完了，提到自定义属性，我记得最近刚好看到一本书中的关于自定义属性的应用，在《深入解析CSS》的第2.6节。

原文： lea.verou.me/2021/05/82-…

测试环境： Google Chrome 版本 90.0.4430.212 (正式版本) (64 位元)