相关知识点:
为什么会有CSS Reset的存在呢?那是因为早期的浏览器支持和理解的CSS规范不同,导致 渲染页面时效果不一致,会出现很多兼容性问题。
reset的目的,是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性。 normalize的理念则是尽量保留浏览器的默认样式,不进行太多的重置,而尽力让这些样式保 持一致并尽可能与现代标准相符合。
1、Normalize. css保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。相比之下, Normalize. css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素 重新设置样式。当一个元素在不同的浏览器中有不同的默认值时,Normalize. css会力求让 这些样式保持一致并尽可能与现代标准相符合。
2、 Normalize. css 修复了浏览器的 bug
它修复了常见的桌面端和移动端浏览器的bug。这往往超出了 Reset所能做到的范畴。关于 这一点,Normalize, css修复的问题包含了 HTML5元素的显示设置、预格式化文字的 font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的 bugo
3、 Normalize. css没有复杂的继承链
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在
Normalize. css中就不会有这样的问题,因为在我们的准则中对多选择器的使用时非常谨慎的, 我们仅会有目的地对目标元素设置样式。
4、 Normalize. css是模块化的
这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元 素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的 一般化)。
5、 Normalize. css拥有详细的文档
Normalize. css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说 明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工 作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。
css reset是最早的一种解决浏览器间样式不兼容问题的方案,它的基本思想是将浏览器的所 有样式都重置掉,从而达到所有浏览器样式保持一致的效果。但是使用这种方法,可能会带来 一些性能上的问题,并且对于一些元素的不必要的样式的重置,其实反而会造成画蛇添足的效 果。
后面出现一种更好的解决浏览器间样式不兼容的方法,就是normalize. css ,它的思想是尽 量的保留浏览器自带的样式,通过在原有的样式的基础上进行调整,来保持各个浏览器间的样 式表现一致。相对与css reset, normalize. css的方法保留了有价值的默认值,并且修复了 一些浏览器的bug,而且使用normalize. css不会造成元素复杂的继承链。

Was this helpful?

0 / 0

发表回复 0

Your email address will not be published.