浏览器兼容性是网络可访问性的重要组成部分。 开发人员需要考虑其受众和需要支持的浏览器版本的差异 。 尽管CSS重置是一个选项，但是大多数开发人员更喜欢Normalize.css，因为它在所有现代Web浏览器中都具有简单性和交叉兼容性。
在这篇文章中，我将介绍Normalize的基础知识以及它与一般CSS重置的比较方式 。 这不是一个复杂的库，理解时间不应该超过几个小时。 但是规范化的关键是学习如何正确，明智地实施它。
浏览器重置与规范化
多年来，我一直使用Eric MeyerCSS resets的自定义版本。 这些对于我的大多数项目来说已经足够了，并且没有引起任何重大问题。 但是Normalize改变了我对重置的看法，因为它的工作方式不同于CSS重置。 了解差异很重要。
可以将Normalize视为始终适用于所有浏览器的服装 ，并且可以将CSS重置视为所有浏览器的热核爆炸 。
标准化样式和格式的标题，段落，块引用和公共元素，以便它们在所有受支持的浏览器中看起来相同（或足够接近） 。 CSS重置会完全清除所有内容，因此没有默认值 。
重置CSS后，您的标题便与您的段落相同； 元素没有任何填充，边距或间隔。 使用CSS重置后， 您必须提供新代码以增强样式。 使用Normalize，您可以获得可以建立的预先设计的样式 。
那么，其中一个比另一个更好吗？ 尽管有一个论点指出“规范化” 在兼容方面更有效，并且产生的文件较小 ，但这是一个热门话题。
“我不得不争论归一化比重置好。 这将导致更少CSS跨线被转移，更好地利用UA默认值，并更好地了解内容是如何打算的显示“。
无论您是爱上Normalize还是喜欢典型的重置，重要的是至少要了解双方并选择最合适的选择。 很少有开发人员从头开始编写代码，因此现代前端开发几乎需要Normalize或CSS重置。
如果您想尝试CSS重置，这里有一些流行的选择：
规范化配置
规范化创建者Nicolas Gallagher在介绍性帖子中写道：
“ Normalize.css是一个小CSS文件，可以在HTML元素的默认样式中提供更好的跨浏览器一致性。 这是一种现代的，支持HTML5的版本，可以替代传统CSS重置。”
多年来，它已发展成为全球开发人员使用的受信任库。 在Bootstrap和Pure CSS中甚至使用了Normalize。
有两种在项目中使用Normalize的方法：编辑源代码以自定义自己的Normalize样式表，或将其用作基础并在顶部添加样式。
前者是一种选择策略，您可以遍历Normalize.css文件，并删除制作自己的自定义样式表所需的所有内容。 最好在每个项目的基础上保持较低的文件大小。
另外，一些开发人员包括整个Normalize.css文件，并在此文件之上构建自己的样式表。 完整的Normalize样式表跨越420多行代码，相当于约6.8KB未压缩。
两种方法都不比另一种更好，并且值得遵循对每个项目或您喜欢的工作流程最有效的方法。
首先，可以从GitHub下载Normalize副本或从外部CDN托管它。 您还可以像这样从NPM直接获取最新版本的Normalize：
npm install --save normalize.css如果您不想下载任何文件，您甚至可以创建一个新的CodePen项目 ，该项目可以在单击按钮时附加Normalize。
由于Normalize是模块化的，因此您可以临时删除部分，甚至可以自己创建自定义的Normalize。 然后，您可以从选定的部分（如HTML5显示元素）开始每个项目，同时删除嵌入内容的样式。
每个规范化规则都有一个相应CSS注释，说明其作用以及解决的问题/错误。 很明显，例如在较新HTML5元素上设置display:block 。
其他这样的SVG代码不太明显，它隐藏了Internet Explorer中的溢出：
svg:not(:root) {
overflow: hidden;
}我强烈建议浏览样式表，以准确了解其工作方式，并了解Normalize是否适合您的项目。
网页设计中的Normalize.css
最新版本的Normalize v4.0提供了广泛的浏览器支持。
- Chrome（最后两个）
- 边缘（后两个）
- Firefox（最后两个）
- Firefox ESR
- Internet Explorer 8+
- 歌剧（最后两个）
- Safari 6+
据我所知，Normalize可能支持具有不断更新的旧版浏览器，例如Firefox。 但是“官方”支持仅包括Chrome / Edge / FF / Opera的两个最新版本。
Normalize v1也支持IE6 +和Safari 4+，但是该版本不再更新。
使用Google Analytics（分析）之类的工具检查浏览器版本至关重要。 这将使您更好地了解Normalize是否可以用作现代Web设计工作的有用工具。
更多资源
关于标准化的知识并没有很多，因此大多数学习都是通过实践来进行的。
实际上，没有太多的解释说明您无法通读样式表并根据需要复制/更改代码。 但是，如果您要查找其他相关信息，请在下面添加一些链接。
2025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
