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

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

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

正常化CSS和重置CSS有什么区别?

这只是一个新的CSS复位的时髦词?

我在normalize.css上工作。

主要区别是:

  1. Normalize.css保留有用的默认值,而不是“不重叠”的一切。 例如,像supsub这样的元素在包含normalize.css(并且实际上变得更健壮)之后“正常工作”,而在包含reset.css之后,它们在视觉上与普通文本没有区别。 所以,normalize.css并没有强加给你一个视觉的起点(homogeny)。 这可能不是每个人的口味。 要做的最好的事情就是对两者进行实验,并根据自己的喜好来查看哪些凝胶。

  2. Normalize.css更正了reset.css超出范围的一些常见错误。 它具有比reset.css更广泛的范围,并且还提供了常见问题的错误修复:HTML5元素的显示设置,缺less表单元素的fontinheritance,更正了pre font-size渲染,IE9中的SVG溢出,以及iOS中的button样式错误。

  3. Normalize.css不会混乱你的开发工具。 使用reset.css时常见的问题是浏览器CSSdebugging工具中显示的大型inheritance链。 这不是normalize.css的问题,因为有针对性的风格。

  4. Normalize.css更加模块化。 该项目被分解为相对独立的部分,如果您知道您的网站永远不需要该部分,则可以轻松地删除部分(如表单规范化)。

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

我在一篇关于normalize.css的文章中更详细地写了这个

主要区别在于:

  • CSS重置旨在删除所有内置的浏览器样式。 像H1-6,p,strong,em等标准元素看起来完全一样,完全没有装饰。 那么你应该自己添加所有的装饰

  • 标准化CSS旨在使浏览器内置的浏览器样式保持一致 。 像H1-6这样的元素将会在浏览器中以一致的方式显示为粗体,大小等等。 那么你应该只添加你的devise所需的装饰差异

如果你的devisea)遵循了排版等的常规约定,并且b) Normalize.css适用于你的目标受众,那么使用Normalize.CSS而不是CSS重置会让你自己的CSS更小更快写入。

Normalize.css主要是一组样式,基于作者认为它看起来不错,并使其在浏览器中看起来一致。 重置基本上从元素剥离造型,所以你有更多的控制一切的样式。

我用两个。

一些样式来自Reset,一些来自Normalize.css。 例如,从Normalize.css中,有一种风格可以确保所有input元素具有相同的字体,而不会发生(在文本input和文本区之间)。 重置没有这样的风格,所以input有不同的字体,这是不正常的。

所以基本上,使用这两个CSS文件可以更好地“平衡”所有内容;)

问候!

从描述中可以看出,它试图使用户代理的默认样式在所有浏览器中保持一致,而不是像重置一样去除所有默认样式。

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

重置似乎是满足定制devise规范的必要条件,尤其是复杂的非模板typesdevise项目。 听起来好像标准化是进行纯粹的Web编程的好方法,但是网站通常是Web编程和UI / UXdevise规则的结合。

首先, reset.css是可以使用的最差的库,因为它会在将margin margin和其他属性的值分配给0之后,删除HTML的标准结构,并显示您以书面forms编写的所有内容。 例如,你会发现<H1> ,将和<H6>

另一方面, Normalize.css使用标准结构,并且修复了几乎所有存在的错误。 例如,它修复了从一个浏览器向另一个浏览器显示表单的问题。 Normalize通过修改此function来修复此问题,以便在所有浏览器上显示相同的元素。

有时候,最好的解决办法是使用两者。 有时候,两者都不能使用。 有时候,这是使用一个或另一个。 如果您想要所有样式(包括所有浏览器中的边距和填充重置),请使用reset.css。 然后自己应用所有的装饰和造型。 如果您只是喜欢内置的样式,但想要更多的跨浏览器同步性,即规范化,则使用no​​rmalize.css。 但是,如果您select同时使用reset.css和normalize.css,请先链接reset.css样式表,然后再立即链接normalize.css样式表(立即)。 有时并不总是一个更好的问题,而是什么时候使用哪一个与什么时候使用两个什么时候使用什么时候都不使用。 恕我直言。