Html 您使用哪种 HTML5 重置 CSS,为什么?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3485720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Which HTML5 reset CSS do you use and why?
提问by Darryl Hein
Which HTML5 reset CSS do you use and why? Is there one that you've found to cover more cases?
您使用哪种 HTML5 重置 CSS,为什么?您是否发现有一种可以涵盖更多案例?
I've started using HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/It seems to work, but I'm wondering if there is something better out there.
我已经开始使用 HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/它似乎有效,但我想知道是否有更好的东西。
回答by frontsideup
Real talk: Despite the markdowns kaikaiis right, you only need to reset *padding & margin to 0.
实事求是:尽管降价kaikai是对的,但您只需要将 *padding & margin 重置为 0。
Though unfortunately 99% of us do not have resources or man power to keep up with the hundreds of browser versions out there. So a reset sheet is essential for the typical website.
但不幸的是,我们 99% 的人没有资源或人力来跟上数百个浏览器版本。因此,重置表对于典型的网站是必不可少的。
html5reset: (It's too interfering)
html5reset:(太干扰了)
I just took a look at http://html5reset.org/
我只是看了一下http://html5reset.org/
img,
object,
embed {max-width: 100%;}
And:
和:
html {overflow-y: scroll;}
I understand it has good intentions but, that's not the job of a reset sheet. It's making too many assumptions.
我知道它的意图是好的,但这不是重置表的工作。它做出了太多的假设。
BluePrint Reset:(literally a blueprint)
蓝图重置:(字面意思是蓝图)
body {
line-height: 1.5;
background: white;
}
Whats up with 1.5. And why background white?(I know it's for correcting but still not necessary)
1.5怎么了。为什么背景是白色的?(我知道这是为了纠正但仍然没有必要)
Normalize.css: (Not normal)
Normalize.css:(不正常)
https://github.com/necolas/normalize.css/blob/master/normalize.css
https://github.com/necolas/normalize.css/blob/master/normalize.css
It started good with some webkit/ie hacks but
它开始使用一些 webkit/ie hacks 很好,但是
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;
}
Every header tag is targeted. & they don't reset the line-height of the body.
每个标题标签都是有针对性的。& 他们不会重置身体的行高。
I'm sure all the above does the intended job well, but will probably be overridden more than necessary.
我确信以上所有内容都能很好地完成预期的工作,但可能会被不必要地覆盖。
Eric Meyer
埃里克·迈耶
YUI
唯
HTML5Boilerplate
HTML5样板
The above are more for pros with Boilerplate leaning to the (over friendly) side I'm sure due to popularity. At the moment 80% of my customized reset is boilerplate.
以上更多是针对 Boilerplate 倾向于(过度友好)方面的专业人士,我敢肯定由于受欢迎程度。目前,我的自定义重置的 80% 是样板文件。
I'm going to go though all three bit by bit and make my own, it's not rocket science.
我将一点一点地尝试所有这三个并制作我自己的,这不是火箭科学。
回答by Matt Smith
Normalize.cssis great for both desktop and mobile browsers and is used in many popular HTML templates.
Normalize.css非常适合桌面和移动浏览器,并用于许多流行的 HTML 模板。
But what about using the CSS all
property which resets CSS properties except direction
and unicode-bidi
? That way you don't need to include any additional files:
但是如何使用 CSSall
属性重置 CSS 属性,除了direction
and unicode-bidi
?这样你就不需要包含任何额外的文件:
{
all: unset
}
CSS all
has wide support except in IE/Edge. Similarly with unset
.
回答by calvinf
The reset.cssused by Blueprint CSSframework works well and includes HTML5 elements. It gets included in their screen.cssfile.
Blueprint CSS框架使用的reset.css运行良好,并包含 HTML5 元素。它包含在他们的screen.css文件中。
Blueprint is a useful resource for rapid prototyping of new sites, and their source code is well organized and worth learning from.
蓝图是新站点快速原型设计的有用资源,其源代码组织良好,值得学习。
回答by Illes Peter
Eric Meyer also released v2 of his CSS reset (and he did so almost a year ago now):
Eric Meyer 还发布了他的 CSS reset 的 v2(现在他几乎在一年前发布了):
回答by zzart
- Preserves useful defaults, unlike many CSS resets.
- Normalizes styles for a wide range of HTML elements.
- Corrects bugs and common browser inconsistencies.
- Improves usability with subtle improvements.
- Explains what code does using detailed comments.
- 保留有用的默认值,与许多 CSS 重置不同。
- 标准化各种 HTML 元素的样式。
- 纠正错误和常见的浏览器不一致问题。
- 通过细微的改进提高可用性。
- 使用详细注释解释代码的作用。
回答by Boldewyn
The HTML5 spec includes recommended CSS declarationsfor CSS-capable browsers. For the fun of it I took them and reverted those, where it makes sense. You can view the result in this article.
HTML5 规范包括为支持 CSS 的浏览器推荐的 CSS 声明。为了好玩,我拿走了它们并在有意义的地方恢复了它们。您可以在本文中查看结果。
However, I don't recommend using this in production. It's more a proof of concept and might better be used to give hints than to serve as an all-purpose-reset stylesheet. Any of the other suggestions before might be a better choice.
但是,我不建议在生产中使用它。它更像是一种概念证明,最好用于提供提示,而不是用作通用重置样式表。之前的任何其他建议都可能是更好的选择。
回答by kaikai
* {
margin: 0;
padding: 0;
}
simple yet entirely effective. perhaps throw in a:
简单但完全有效。也许抛出一个:
body {
font-size: small;
}
for good measure.
为好措施。
回答by cornishninja
I use Normalize or the reset from HTML5 Doctor, and I alter it to fit the project I'm working on.
我使用 Normalize 或 HTML5 Doctor 的重置,并对其进行更改以适合我正在处理的项目。
BTW it's only the concept of using a reset that's become more or less a standard.
顺便说一句,这只是使用重置的概念或多或少已成为标准。