浏览器兼容性是网络可访问性的重要组成部分。 开发人员需要考虑其受众和需要支持的浏览器版本的差异 。 尽管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设计工作的有用工具。
更多资源
关于标准化的知识并没有很多,因此大多数学习都是通过实践来进行的。
实际上,没有太多的解释说明您无法通读样式表并根据需要复制/更改代码。 但是,如果您要查找其他相关信息,请在下面添加一些链接。