logo标签列表

你使用哪个HTML5重置CSS？为什么选择它？

csshtmlcss-reset
122

你使用哪个HTML5重置CSS？为什么？你是否发现有一个能够涵盖更多情况的CSS？

我开始使用HTML5 Doctor的：http://html5doctor.com/html-5-reset-stylesheet/它似乎很有效，但我想知道是否有更好的选择。

1
类似于：https://dev59.com/jXA75IYBdhLWcg3weY5f - Mark Byers
是的，它们很相似，但我更想使用别人的代码而不是修改一个使其工作，这样在以后如果需要的话，我只需复制更新版本即可。 - Darryl Hein
20
我明白，但是HTML5确实会对CSS产生影响，特别是在重置CSS时，你现在需要包含其他标签，如nav或aside。 - Darryl Hein
8个回答
40

说实话，尽管有markdowns kaikai是对的，你只需要将*padding和margin重置为0。

可惜99%的人没有资源或人力来跟上那里数百个浏览器版本。因此，对于典型网站来说，重置表是必不可少的。

html5reset:（干扰性太强）

我刚刚看了一下http://html5reset.org/

img,
object,
embed {max-width: 100%;}

并且：

html {overflow-y: scroll;}

我理解它有好的意图，但这不是重置表的工作。它做出了太多的假设。

蓝图重置：（字面意思是蓝图）

body {
  line-height: 1.5;
  background: white;
}

1.5是什么情况？为什么背景变成白色了？（我知道这是为了改正，但还是不必要的）

Normalize.css:（非正常）

https://github.com/necolas/normalize.css/blob/master/normalize.css

它一开始带有一些针对webkit/ie的hack，但是...

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

每个标题标签都被选中了，并且它们不会重置 body 的行高。

我确信上述方法能够很好地达到预期效果，但可能被不必要地覆盖。

Eric Meyer

YUI

HTML5Boilerplate

以上三种方法更适合熟练的开发者，而由于其流行度，Boilerplate 更偏向于友好（过度友好）。目前我的自定义重置样式有 80% 基于 Boilerplate。

我将详细研究这三种方法并制作自己的样式表，这并不是什么难事。

2
请注意，normalize.css已经更改; 现在不再设置标题的字体大小。 - Ruben Verborgh
2
值得一提的是，Normalize.css 不仅可以管理桌面浏览器，还可以管理移动浏览器，如 iOS Safari、Chrome for Android、股票浏览器等，它们各自独特。因此，Normalize 也被集成到许多流行的框架中。 - Matt Smith
我曾经使用“Eric Meyer”重置样式表，但现在使用“YUI”重置样式表，因为这个原因：http://danielsokolowski.blogspot.ca/2012/11/a-tip-for-relatively-sized-html-input.html - Daniel Sokolowski
19

Normalize.css 很适合桌面和移动浏览器，并且被许多流行的 HTML 模板使用。

但是，CSS 的 all 属性如何呢？它重置了除了 direction 和 unicode-bidi 以外的所有 CSS 属性。这样一来，您就不需要包含任何额外的文件：

{
    all: unset
}

CSS all在除IE/Edge之外的浏览器中得到广泛支持。与unset类似。

有趣的是，它似乎是最慢的解决方案，并且仅在Firefox中受支持，因此它没有真正的用途（至少在目前这个时刻）。 - tomasz86
现在只有Firefox支持它，但我认为它有很大的机会出现在像Modernizr这样的解决方案中。https://github.com/Modernizr/Modernizr/issues/1219 - Matt Smith
6
reset.css 是 Blueprint CSS 框架使用的样式表，它能够很好地支持 HTML5 元素，并被包含在他们的 screen.css 文件中。
Blueprint 是快速原型设计新网站的有用资源，他们的源代码组织良好，值得学习。
4
简单而有效，比依赖于*通用选择器的重置更快。 - tomasz86
4
  1. 保留有用的默认值，不像许多CSS重置。
  2. 规范化一系列HTML元素的样式。
  3. 纠正错误和常见的浏览器不一致性。
  4. 通过微小的改进提高可用性。
  5. 使用详细的注释解释代码功能。

normalize.css

2
* {
    margin: 0;
    padding: 0;
}

简单而非常有效。也许可以加入一个：
body {
    font-size: small;
}

为了确保准确性，我需要您提供原文。
9
清除表单控件的默认边距和填充可能会产生意想不到的影响，并且命名的字体大小关键字在不同浏览器中的行为并不完全一致。这种方法过于简单化了。它还未设置HTML 5中引入元素的样式，因此它们仍然保持“display: inline”的状态。 - Quentin
4
我不同意。Margin和Padding是唯一不可预测的属性。Font-size属性使用命名关键字，专门针对那些可以读取这些关键字的浏览器，这使得YUI字体比例在每个主要浏览器中都有效（http://developer.yahoo.com/yui/examples/fonts/fonts-size_source.html）。我也从不想干扰元素的正常排列，所以我会让HTML5元素保持原样，只在需要时更改它们的显示类型或位置。我知道我的选择不太受欢迎，但它比其他解决方案更优雅，并且有效。 - kaikai
3
不不不不不！HTML5元素没有设置显示属性，因此它们会优雅地回退到默认的display:inline。你有没有见过网站图示，在这个图示中，页眉、页脚、导航、侧栏等几乎所有页面部分都是连续排列的？？？对不起kaikai，但这样做是不可接受的！ - Filip Dupanović
4
绝对正确的答案。唯一的缺点可能是“*”选择器会比较慢，我听说过。 - Anton Strogonoff
@skmasq 这个问题是“你使用哪种重置？”，并且得到了精确的回答，这就是我为什么点赞的原因。现在它已经成为社区维基，所以不重要了。如果您能澄清这些CSS规则在现代浏览器中难以遵循的行为，那将非常有用！ - Anton Strogonoff
显示剩余2条评论
2
HTML5规范包含适用于支持CSS的浏览器的建议CSS声明。出于兴趣，我把其中有意义的部分进行了还原，并在本文中展示了结果。 然而，我不建议在生产中使用此样式表。它更像是一个概念验证，最好用于提供提示而不是作为通用重置样式表。任何其他建议可能都是更好的选择。
0

我使用Normalize或HTML5 Doctor的reset，然后对其进行修改以适应我正在开发的项目。

顺便说一下，使用重置的概念已经成为更多或少数标准。

您有任何其他细节吗？ - James A Mohler
如果在特定的项目中没有使用到某些元素，我就不会保留它们。比如，如果我没有使用表单，我就会删除表单元素。我相信你能明白这个道理。重置未使用的元素是毫无意义的。 - cornishninja
为了支持我修改重置以适应我的需求的观点，可参考以下网址：http://www.cssreset.com/which-css-reset-should-i-use/ - cornishninja
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接