您使用哪种HTML5重置CSS,为什么?[关闭]


123

您使用哪种HTML5重置CSS,为什么?有没有发现涉及更多案例的案例?

我已经开始使用HTML5 Doctor's:http : //html5doctor.com/html-5-reset-stylesheet/似乎可行,但是我想知道是否还有更好的方法。



相似,是的,但我只是希望使用其他人而不是修改其他人以使其工作,因此,如果需要,以后可以只复制一个新版本。
Darryl Hein

20
D_N我理解这一点,但是HTML5确实会对CSS产生影响,尤其是在重置CSS上,现在您需要在其中包含其他标签,例如nav或aside。
Darryl Hein

Answers:


40

实话实说:尽管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黑客,但是

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;
}

每个标头标签都是目标。&他们不会重置身体的线条高度。

我敢肯定,以上所有方法都能很好地完成预期的工作,但可能会超出必要范围。

埃里克·迈耶(Eric Meyer)

UI

HTML5样板

以上是针对Boilerplate倾向于(过于友好)方面的职业玩家的,我敢肯定由于受欢迎程度的缘故。目前,我自定义的重置中有80%是样板。

我将逐一介绍所有这三个内容,并自己做,这不是火箭科学。


2
请注意,normalize.css现已更改。标题的字体大小不再设置。
Ruben Verborgh 2014年

2
值得一提的是,Normalize.css不仅管理桌面浏览器,而且还管理移动浏览器,例如iOS Safari,Android版Chrome,股票浏览器等,它们本身是独一无二的。因此,Normalize被引入许多流行的框架中。
马特·史密斯

我曾经因为这个使用“埃里克迈耶”,但现在使用“锐”复位样式表:danielsokolowski.blogspot.ca/2012/11/...
丹尼尔Sokolowski

19

Normalize.css非常适合桌面和移动浏览器,并在许多流行的HTML模板中使用。

但是,如何使用CSS all属性重置CSS属性(direction和除外)unicode-bidi呢?这样,您就无需包含任何其他文件:

{
    all: unset
}

CSS all具有广泛的支持,但IE / Edge中除外。与相似unset


有趣,但它似乎是最慢的解决方案,仅在Firefox中受支持,因此它没有任何实际用途(至少在当前时间如此)。
tomasz86

不错,只有Firefox现在支持它,但是我认为它很有可能最终被Modernizr之类的解决方案所采用。github.com/Modernizr/Modernizr/issues/1219
Matt Smith,



3
  1. 与许多CSS重置不同,保留有用的默认值。
  2. 标准化各种HTML元素的样式。
  3. 纠正错误和常见的浏览器不一致问题。
  4. 通过细微的改进来提高可用性。
  5. 使用详细注释说明代码的作用。

normalize.css


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

简单但完全有效。也许抛出一个:

body {
    font-size: small;
}

很好的措施。


9
更改默认边距并在表单控件上填充会产生不受欢迎的效果,并且命名字体大小的关键字在浏览器之间的行为并不完全一致。这过于简单了。它还无法为HTML 5中引入的元素设置样式,因此它们保持不变display: inline
昆汀2010年

4
我不同意。边距和填充是唯一不可预测的属性。font-size属性使用一个命名关键字专门针对阅读这些内容的浏览器,这使得YUI字体缩放在所有主要浏览器(developer.yahoo.com/yui/examples/fonts/fonts-size_source.html)上均有效。我也永远不想强加元素的正常流动,因此我将不理会那些HTML 5元素,仅根据需要更改它们的显示类型或位置。我意识到我的选择不受欢迎,但是它比其他解决方案优雅得多,并且可以工作。
kaikai 2010年

3
不不不不!HTML5元素未设置display属性,因此可以正常地回退到default display: inline。您是否曾见过一个站点图,其中页眉,页脚,导航,侧栏,实际上每个页面节都是内联的?抱歉,kaikai,但这是不可接受的!
FilipDupanović10年

杜德,我什至还不是HTML5专家,我知道这完全不是正确的重置方法。
Icemanind

4
绝对有效的答案。*我听说唯一的缺点可能是选择器很慢。
安东·斯特罗贡诺夫

2

HTML5规范包括推荐的支持CSS的浏览器的CSS声明。出于乐趣,我把它们带回原处,并在有意义的地方进行了恢复。您可以在本文中查看结果。

但是,我不建议在生产中使用它。它更像是一种概念证明,比起用作通用重置样式表,它可能更适合于给出提示。之前的任何其他建议可能是一个更好的选择。


0

我使用Normalize或HTML5 Doctor中的重置,并对其进行更改以适合我正在处理的项目。

顺便说一句,使用复位的概念或多或少已成为标准。


您还有其他详细信息吗?
James A Mohler 2013年

我不会遗漏我没有使用特定项目的元素。例如,如果我不使用表单,则删除表单元素。我敢肯定你知道这个主意。重置不使用的元素没有任何意义。
cornishninja 2013年

支持我关于修改重置以适合我的需求的观点
cornishninja 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.