硬重置：使用CSS初始值

By definition, stylesheet development involves setting CSS properties to new values. Complex stylesheets will eventually grow to the point at which CSS values need to be “wiped clean”, i.e. reset to their initial values. In some cases, those initial values are well-known and easy to remember; for other properties, they are not. Thankfully, modern CSS gives us an easy way to reset properties.

根据定义，样式表开发涉及将CSS属性设置为新值。 复杂的样式表最终将增长到需要“擦净” CSS值的程度，即重置为它们的初始值。 在某些情况下，这些初始值是众所周知的且容易记住。 对于其他属性，则不是。 幸运的是，现代CSS为我们提供了一种轻松重置属性的方法。

按按钮 (Push The Button)

Let’s assume that you’ve set images to float: left by default:

假设您已将图片设置为float: left默认情况下为float: left ：

img { float: left; }

Then, for an image in a particular circumstance (images of the class .recall), you want to reset the image to not float… and you can’t recall if that’s float: none or something else.

然后，对于特定情况下的图像( 类为 .recall图像)，您希望将图像重置为不浮动……并且您不记得是否float: none或其他东西。

In other words, you do know that the default behaviour isn’t to have anything floated, but you don’t remember how to get there. Instead of looking it up, you could add the following to your stylesheet:

换句话说，您确实知道默认行为不是浮起任何东西，但是您不记得如何到达那里。 除了查找之外，您还可以在样式表中添加以下内容：

img.recall { float: initial; }

It’s a common misconception that initial resets a property to the value it was initially given in the stylesheet, or to the default value provided in the CSS specification. Neither is true: rather, initial causes the property to reset to its default value for the user’s browser.

常见的误解是， initial将属性重置为样式表中最初提供的值，或重置为CSS规范中提供的默认值。 两者都不是： initial会导致属性重置为用户浏览器的默认值 。

In most cases, this initial value will be the same or similar between all browsers. initial is particularly useful in a number of cases:

在大多数情况下，所有浏览器的初始值都相同或相似。 initial缩写在许多情况下特别有用：

用例 (Use Cases)

initial can be used to reset color. The initial color of body text in the vast majority of browsers is black, so the following CSS works to reset heading elements:

initial可用于重设颜色。 在绝大多数浏览器中，正文的初始颜色是黑色，因此以下CSS可以重置标题元素：

body { color: hsl(333, 50%, 25%); }
h1, h2, h3 { color: initial; }

Note that black is not absolutely guaranteed to be the default color, since that’s up to the individual browser vendors (and, ultimately, individual user); similarly, doing the following:

注意，并不是绝对保证黑色是默认颜色，因为这取决于各个浏览器供应商(最终是各个用户)。 同样，请执行以下操作：

aside { font-family: initial; }

…will have different results in browsers; the resulting typeface is not guaranteed to be Times New Roman, since different browsers use different defaults.

…在浏览器中会有不同的结果； 由于不同的浏览器使用不同的默认值，因此不能保证所得的字体为Times New Roman 。

There are several other uses for initial:

initial还有其他几种用途：

• resetting z-index back to its default for an element;

  将元素的z-index重置为其默认值；

• resetting margins and transformations to their initial values
  重置边距并将其转换为初始值

止损限制 (Stop Limits)

One of the primary reasons behind the relatively rare use of initial in CSS is its complete lack of support in Internet Explorer, while it has been supported in all other browsers for many years. However, MS Edge has featured support for some time… and as a result, I expect that initial will make more appearances in site stylesheets in the future.

在CSS中很少使用initial主要原因之一是它完全缺乏对Internet Explorer的支持，而多年来所有其他浏览器都支持它。 但是，MS Edge的功能支持已有一段时间了，因此，我希望initial在将来会在网站样式表中出现更多。

翻译自: https://thenewcode.com/1172/Hard-Reset-Using-the-CSS-Initial-Value