初识 Initial

如果前几天有人走过来问我 inherit 和 initial 之间的区别，我可能会回答

“什么，它们有区别吗？”

我已经编写 CSS 超过十年了，但我似乎一直没有理解 initial 到底是什么或它有什么作用。管它是无知、懒惰还是幸运，但 inherit 一直满足我的需要，我从未想过要研究什么时候应该使用 initial 而不是 inherit。因此，这篇文章将分享我学到的一些东西。

initial 的含义

首先，规范帮助我们理解初始 _关键字_ 和初始 _值_ 之间的区别。

• 初始关键字: 如果属性的级联值是初始关键字，则属性的初始值将成为其指定值。
• 初始值: 每个属性都有一个初始值，在属性定义表中定义。如果属性不是继承属性，并且级联不会导致任何值，则属性的指定值将是其初始值。

嗯，好的。我将这些定义通过谷歌翻译（开玩笑！）后得到了以下结果

初始关键字是在初始值是最终输出的属性中声明的，该值由浏览器默认值定义。

因此，如果这里使用了 initial 关键字

.module {
  color: initial;
}

…那么 initial 值可能会返回 black，如果 black 是该元素属性的浏览器默认值。

它与 inherit 的区别

如果您认为这 听起来很像 inherit，那么您绝对是对的。它确实听起来非常像。

但 initial 和 inherit 在 inherit 检查级联中是否存在其他属性以供使用之前再执行额外的一步来获取初始值方面有所区别。

区别示例

查看 CodePen 上由 CSS-Tricks (@css-tricks) 创建的 CSS Initial 与 Inherit。

看到了吗？左侧框中的属性都设置为继承 .module 类，因为它是最接近的父元素。另一方面，右侧框中的属性设置为 initial，它将元素的属性重置为浏览器默认值。

何时使用 initial

我喜欢将 initial 视为一个硬重置。随着 CSS 的增长，样式很容易变得复杂，而使用 initial 是一种将元素恢复到其自然状态的方法。如果 initial 是老式的任天堂游戏，我将使用它来模拟将有问题的游戏卡从控制台中取出并 吹吹（尽管这样做 据说毫无效果）。

但这并不意味着 initial 是重置的灵丹妙药。这是因为初始值仍然受浏览器默认值的影响，而我们知道浏览器默认值可能会 因浏览器而异。

哦，等等，您使用 CSS 重置 吗？您可以预期它们用作初始值。

底线：我将使用 initial 来完全清除元素的任何继承样式，并使用 inherit 来确保元素从最近的父元素获取提示。

更实用的用例

以下是如何使用 initial 在表格中创建交替颜色线的示例。

查看 CodePen 上由 CSS-Tricks (@css-tricks) 创建的 CSS Initial。

浏览器支持

MDN 有一个很好的细分，介绍了 initial 的当前支持情况。请注意 IE 支持的明显缺失。

Chrome	Safari	Firefox	Opera	IE	Android	iOS
是	是	19	15	否	是	是

总结

我一直绞尽脑汁想找到一些 initial 的有趣用例。虽然我认为能够在元素上使用默认样式具有很大的潜在用途，但我还没有在实际应用中遇到过它们——但这可能更多地反映了我个人而不是属性值本身。

当 all 作为属性 获得更多支持时，这将非常有用。这样，声明 all: initial 将成为在任何元素上创建重置的真正强大的工具。

请分享您在项目中必须使用 initial 的任何情况。如果您用它来完成任何棘手的任务，则加分。