Normalize.css 和重置 CSS 有什么区别？

What is the difference between Normalize.css and Reset CSS?

提问by Jitendra Vyas

I know what CSS Reset is, but recently I heard about this new thing called Normalize.css

我知道什么是 CSS Reset，但最近我听说了一个叫做 Normalize.css 的新东西

What is the difference between Normalize.cssand Reset CSS?

Normalize.css和Reset CSS 有什么区别？

What is the difference between normalizing CSS and resetting CSS?

规范化 CSS 和重置 CSS 有什么区别？

Is it just a new buzz word for the CSS Reset?

它只是 CSS 重置的一个新流行词吗？

回答by necolas

I work on normalize.css.

我在 normalize.css 上工作。

The main differences are:

主要区别是：

1. Normalize.css preserves useful defaults rather than "unstyling" everything.For example, elements like supor sub"just work" after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text after including reset.css. So, normalize.css does not impose a visual starting point (homogeny) upon you. This may not be to everyone's taste. The best thing to do is experiment with both and see which gels with your preferences.

2. Normalize.css corrects some common bugs that are out of scope for reset.css.It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of fontinheritance by form elements, correcting font-sizerendering for pre, SVG overflow in IE9, and the buttonstyling bug in iOS.

3. Normalize.css doesn't clutter your dev tools.A common irritation when using reset.css is the large inheritance chain that is displayed in browser CSS debugging tools. This is not such an issue with normalize.css because of the targeted stylings.

4. Normalize.css is more modular.The project is broken down into relatively independent sections, making it easy for you to potentially remove sections (like the form normalizations) if you know they will never be needed by your website.

5. Normalize.css has better documentation.The normalize.css code is documented inline as well as more comprehensively in the GitHub Wiki. This means you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests. The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.

1. Normalize.css 保留有用的默认值，而不是“取消样式”所有内容。例如，在包含 normalize.css 之后，类似sup或sub“正常工作”的元素（实际上变得更加健壮），而在包含 reset.css 之后，它们在视觉上与普通文本无法区分。因此， normalize.css 不会将视觉起点（同质性）强加给您。这可能不是每个人的口味。最好的办法是对两者进行试验，看看哪种凝胶符合您的喜好。

2. Normalize.css 纠正了一些超出 reset.css 范围的常见错误。它的适用范围比 reset.css 更广，还提供了一些常见问题的错误修复，例如：HTML5 元素的显示设置、font表单元素缺乏继承、纠正IE9 中的font-size渲染pre、IE9 中的 SVG 溢出以及buttoniOS 中的样式错误。

3. Normalize.css 不会让你的开发工具变得混乱。使用 reset.css 时的一个常见问题是浏览器 CSS 调试工具中显示的大型继承链。由于有针对性的样式，这不是 normalize.css 的问题。

4. Normalize.css 更加模块化。该项目被分解为相对独立的部分，如果您知道您的网站永远不需要它们，那么您可以轻松地删除这些部分（如表单规范化）。

5. Normalize.css 有更好的文档。normalize.css 代码在GitHub Wiki 中有内联和更全面的文档。这意味着您可以找出每行代码在做什么，为什么包含它，浏览器之间有什么区别，并且更轻松地运行您自己的测试。该项目旨在帮助人们了解浏览器默认如何呈现元素，并使他们更容易参与提交改进。

I've written in greater detail about this in an article about normalize.css

我在一篇关于 normalize.css的文章中对此进行了更详细的描述

回答by Jesper M

The major difference is that:

主要区别在于：

• CSS resets aim to removeall built-in browser styling. Standard elements like H1-6, p, strong, em, et cetera end up looking exactly alike, having no decoration at all. You're then supposed to add all decorationyourself.

• Normalize CSSaims to make built-in browser styling consistentacross browsers. Elements like H1-6 will appear bold, larger et cetera in a consistent way across browsers. You're then supposed to add only the differencein decoration your design needs.

• CSS 重置旨在删除所有内置浏览器样式。像 H1-6、p、strong、em 等标准元素最终看起来完全一样，根本没有装饰。然后你应该自己添加所有装饰。

• Normalize CSS旨在使内置浏览器样式在浏览器之间保持一致。像 H1-6 这样的元素将在浏览器中以一致的方式显示为粗体、更大等等。然后，您应该只添加设计所需的装饰差异。

If your design a)follows common conventions for typography et cetera, and b)Normalize.css works for your target audience, then using Normalize.CSS instead of a CSS reset will make your own CSS smaller and faster to write.

如果您的设计a)遵循排版等常见约定，并且b)Normalize.css 适用于您的目标受众，那么使用 Normalize.CSS 而不是 CSS 重置将使您自己的 CSS 更小且编写速度更快。

回答by ricmetalster

Normalize.css is mainly a set of styles, based on what its author thought would look good, and make it look consistent across browsers. Reset basically strips styling from elements so you have more control over the styling of everything.

Normalize.css 主要是一组样式，基于其作者认为看起来不错的样式，并使其跨浏览器看起来一致。重置基本上从元素中剥离样式，因此您可以更好地控制所有样式。

I use both.

我两个都用。

Some styles from Reset, some from Normalize.css. For example, from Normalize.css, there's a style to make sure all input elements have the same font, which doesn't occur (between text inputs and textareas). Reset has no such style, so inputs have different fonts, which is not normally wanted.

一些样式来自 Reset，一些来自 Normalize.css。例如，从 Normalize.css 中，有一种样式可以确保所有输入元素具有相同的字体，这种情况不会发生（在文本输入和文本区域之间）。重置没有这样的样式，所以输入有不同的字体，这通常是不需要的。

So bascially, using the two CSS files does a better job 'Equalizing' everything ;)

所以基本上，使用这两个 CSS 文件可以更好地“均衡”一切；)

regards!

问候！

回答by N.Elsayed

First reset.cssis the worst library you can use, because it removes the standard structure of HTML and displays everything you write just as text, after assigning the values of margin padding and other attributes to 0. So for example you will find that <H1>, will be the same as <H6>.

首先reset.css是您可以使用的最糟糕的库，因为在将边距填充和其他属性的值分配给0. 例如，您会发现<H1>, 将与<H6>.

On the other hand Normalize.cssuses the standard structure and also fixes almost all the errors existing in it. For example it fixes the problem with showing a form from one browser to another. Normalize fixes this by modifying this features so your elements will be shown the same on all browsers.

另一方面Normalize.css使用标准结构，也修复了其中存在的几乎所有错误。例如，它解决了从一个浏览器向另一个浏览器显示表单的问题。Normalize 通过修改此功能来解决此问题，因此您的元素将在所有浏览器上显示相同。

回答by user3170099

resetting seems a necessity to meet custom design specifications, especially on complex, non-boilerplate type design projects. It sounds as though normalizing is a good way to proceed with purely web programming in mind, but oftentimes websites are a marriage between web programming and UI/UX design rules.

重置似乎是满足自定义设计规范的必要条件，尤其是在复杂的非样板类型设计项目中。听起来好像规范化是进行纯 Web 编程的好方法，但网站通常是 Web 编程和 UI/UX 设计规则之间的结合。

回答by dbb

Well from its description it appears it tries to make the user agent's default style consistent across all browsers rather than stripping away all the default styling as a reset would.

从它的描述来看，它似乎试图使用户代理的默认样式在所有浏览器中保持一致，而不是像重置一样剥离所有默认样式。

Preserves useful defaults,unlike many CSS resets.

保留有用的默认值，与许多 CSS 重置不同。

回答by Sean Tank Garvey

Sometimes, the best solution is to use both. Sometimes, it is to use neither. And sometimes, it is to use one or the other. If you want all the styles, including margin and padding reset across all browsers, use reset.css. Then apply all decorations and stylings yourself. If you simply like the built-in stylings but want more cross-browser synchronicity i.e. normalizations then use normalize.css. But if you choose to use both reset.css and normalize.css, link the reset.css stylesheet first and then the normalize.css stylesheet (immediately) afterwards. Sometimes it's not always a matter of which is better, but when to use which one versus when to use both versus when to use neither. IMHO.

有时，最好的解决方案是同时使用两者。有时，两者都不使用。有时，它是使用一个或另一个。如果你想在所有浏览器中重置所有样式，包括边距和内边距，请使用 reset.css。然后自己应用所有装饰和样式。如果你只是喜欢内置样式，但想要更多的跨浏览器同步性，即规范化，那么使用 normalize.css。但是，如果您选择同时使用 reset.css 和 normalize.css，请先链接 reset.css 样式表，然后（立即）链接 normalize.css 样式表。有时并不总是哪个更好的问题，而是何时使用哪个、何时使用两个以及何时都不使用的问题。恕我直言。

回答by Daniel Danielecki

This question has been answered already several times, I'll short summary for each of them, an example and insights as of September 2019:

这个问题已经回答了好几次了，我会为每个问题做一个简短的总结，一个例子和截至 2019 年 9 月的见解：

• Normalize.css- as the name suggests, it normalizesstyles in the browsers for their user agents, i.e. makes them the same across all browsers due to the reason by default they're slightly different.

• Normalize.css- 顾名思义，它为用户代理在浏览器中规范化样式，即由于默认情况下它们略有不同，因此使它们在所有浏览器中都相同。

Example: <h1>tag inside <section>by default Google Chrome will make smaller than the "expected" size of <h1>tag. Microsoft Edge on the other hand is making the "expected" size of <h1>tag. Normalize.css will make it consistent.

示例：默认情况下，Google Chrome<h1>内部<section>的标签会小于<h1>标签的“预期”大小。另一方面，Microsoft Edge 正在制作<h1>标签的“预期”大小。Normalize.css 将使其保持一致。

Current status: the npm repository shows that normalize.css packagehas currently more than 500k downloads per week. GitHub stars in the project of the repositoryare more than 36k.

当前状态：npm 存储库显示normalize.css 包目前每周下载量超过 500k。仓库项目中的GitHub star超过 36k。

• Reset CSS- as the name suggests, it resetsall styles, i.e. it removes all browser's user agent styles.

• 重置 CSS- 顾名思义，它重置所有样式，即它删除所有浏览器的用户代理样式。

Example: it would do something like that below:

示例：它将执行以下操作：

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Current status: it's much less popular than Normalize.css, the reset-csspackage shows it's something around 26k downloads per week. GitHub stars are only 200, as it can be noticed from the project's repository.

当前状态：它不如 Normalize.css 流行，reset-css包显示它每周大约有 26k 次下载。GitHub star 只有 200，这可以从项目的存储库中注意到。