CSS Reset 和 Normalize.css

浏览器对body, h1这些标签,通常都有一个默认的css设置,而且不同的浏览器可能还不一样。例如

body { 
  display: block; 
  margin: 8px; 
} 

为了在不同浏览器上实现相同的显示效果,就需要处理这个问题,一般有两种方法:

  • CSS Reset
  • Normalize

CSS Reset

写一个css文件,在其中重新定义定义这些浏览默认设置,例如body{ margin: 0}

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?

Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser. (NB: article coming soon about why this is a false notion!)
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.

Eric Meyer’s “Reset CSS” 2.0

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Normalize

比起Reset的简单粗暴,Normalize.css提供了一种更加优雅的处理方式

Normalize.css preserves useful defaults

Normalize.css corrects common bugs

Normalize.css doesn’t clutter your debugging tools
A common irritation when using resets is the large inheritance chain that is displayed in browser CSS debugging tools.

image

http://nicolasgallagher.com/about-normalize-css/

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,449评论 0 10
  • 喜欢夏天的肆无忌惮 更喜欢夏天的水果泛滥
    pandolook阅读 317评论 0 0
  • 产品经理书单: 《产品经理手册》——哥乔斯 《结网》——王坚 《人人都是产品经理》——苏杰 《失控》 《用户体验的...
    马唐阅读 495评论 0 8
  • 时代引领者——全画幅数字摄影机CineAltaV 去年九月,索尼在北京为CineAltaV电影摄影机举行了隆重的发...
    884f9f92872f阅读 533评论 0 0
  • 一树春风吹青柳, 夕阳照水两闲悠。 楼阁庭院遥望美, 春景无限斗芳菲。
    荷静阅读 825评论 14 30