首页 文章

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

提问于
浏览
508

我知道什么是CSS Reset,但最近我听说过这个名为Normalize.css的新东西

Normalize.cssReset CSS之间有什么区别?

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

它只是CSS重置的新热门词吗?

7 回答

  • 749

    我在normalize.css上工作 .

    主要区别是:

    • Normalize.css preserves useful defaults rather than "unstyling" everything. 例如,包括normalize.css之后的 supsub "just work"之类的元素(并且实际上更加健壮),而在包括reset.css之后,它们在视觉上与普通文本无法区分 . 因此,normalize.css不会对您施加视觉起点(同质性) . 这可能不是每个人的口味 . 最好的办法是试验两者,看看哪些凝胶符合您的喜好 .

    • Normalize.css corrects some common bugs that are out of scope for reset.css. 它具有比reset.css更广的范围,并且还提供常见问题的错误修复,例如:HTML5元素的显示设置,表单元素缺少 fontfont-size 的渲染,IE9中的SVG溢出,以及 button iOS中的样式错误 .

    • Normalize.css doesn't clutter your dev tools. 使用reset.css时常见的烦恼是浏览器CSS调试工具中显示的大型继承链 . 这与normalize.css不是一个问题,因为有针对性的样式 .

    • Normalize.css is more modular. 项目被分解为相对独立的部分,如果您知道您的网站永远不需要它们,您可以轻松删除部分(如表格规范化) .

    • Normalize.css has better documentation. normalize.css代码在GitHub Wiki中内联以及更全面地记录 . 这意味着您可以了解每行代码的作用,包含的原因,浏览器之间的差异以及更轻松地运行您自己的测试 . 该项目旨在帮助人们了解默认情况下浏览器如何呈现元素,并使他们更容易参与提交改进 .

    我在一篇文章about normalize.css中更详细地写了这篇文章

  • 5

    The major difference is that:

    • CSS重置旨在删除所有内置浏览器样式 . 标准元素如H1-6,p,strong,em等等最终看起来完全相同,完全没有装饰 . 然后你应该自己添加所有装饰 .

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

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

  • 37

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

    我用两个 .

    重置的一些样式,一些来自Normalize.css . 例如,从Normalize.css开始,有一种样式可以确保所有输入元素都具有相同的字体,而不会出现(在文本输入和textareas之间) . 重置没有这样的样式,因此输入有不同的字体,通常不需要 .

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

    问候!

  • 5

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

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

  • 5

    重置似乎是满足定制设计规范的必要条件,特别是在复杂的非样板式设计项目中 . 听起来似乎规范化是一种很好的方式来进行纯粹的网络编程,但网站通常是Web编程和UI / UX设计规则之间的联姻 .

  • 0

    首先 reset.css 是您可以使用的最差的库,因为它删除了HTML的标准结构,并在将边距填充和其他属性的值分配给 0 之后显示您作为文本编写的所有内容 . 例如,您会发现 <H1> ,与 <H6> 相同 .

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

  • 230

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

相关问题