关于CSS Reset那些事(1):历史演变与Normalize.css

Normalize.css 简单介绍

关于对Github的介绍,这里引用 咀嚼之味 针对 官方介绍 翻译的的 中文版本

13条Css 书写规范,13条css书写

1.
不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。 
/** 清除内外边距 **/ 
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, 
/* structural elements 结构元素 */ 
dl, dt, dd, ul, ol, li, 
/* list elements 列表元素 */pre, 
/* text formatting elements 文本格式元素 */ 
form, fieldset, legend, button, input, textarea, 
/* form elements 表单元素 */ 
th, td, 
/* table elements 表格元素 */ 
img/* img elements 图片元素 */ 
{   border:medium none;   margin: 0;   padding: 0; } 
/** 设置默认字体 **/body,button, input, select, textarea 
{   font: 12px/1.5 ‘宋体’,tahoma, Srial, helvetica, sans-serif; } 
h1, h2, h3, h4, h5, h6 { font-size: 100%; } 
em{font-style:normal;} /** 重置列表元素 **/ 
ul, ol { list-style: none; } 
/** 重置超链接元素 **/a 
{ text-decoration: none; color:#333;} 
a:hover { text-decoration: underline; color:#F40; } 
/** 重置图片元素 **/img{ border:0px;} 
/** 重置表格元素 **/ 
table { border-collapse: collapse; border-spacing: 0; }

  1. 良好的命名习惯

  2. 代码缩写 
    li{    
    font-family:Arial, Helvetica, sans-serif; 
        font-size: 1.2em; 
        line-height: 1.4em;   
      padding-top:5px;   
      padding-bottom:10px;   
    padding-left:5px; 

    变成 
    li{   
      font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
       padding:5px 0 10px 5px; 
    }

  3. 利用CSS继承 
    如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上, 
    让它们继承这些CSS样式。 
    这样你可以很好的维护你的代码,并且还可以减少代码量。那么本来这样的代码: 
    #container li{ font-family:Georgia, serif; } 
    #container p{ font-family:Georgia, serif; } 
    #container h1{font-family:Georgia, serif; } 
    #container{ font-family:Georgia, serif; }

  4. 使用多重选择器 
      
    你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。 
    这样做不但代码简洁且可为你节省时间和空间。如: 
    h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
    h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
    h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
    可以合并为 
    h1, h2, h3{ font-family:Arial, Helvetica, sans-serif;
    font-weight:normal; }

  5. 适当的代码注释

  6. 给你的CSS代码排序 
      
    如果代码中的属性都能按照字母排序,那查找修改的时候就能更加快速:

/*** 样式属性按字母排序 ***/ 
div{     
   
  color:#666;   
  font:1.2em/1.4em Arial, Helvetica, sans-serif; 
    height:300px;  
   margin:10px 5px;   
padding:5px 0 10px 5px;  
   width:30%;   
  z-index:10; 

  1. 选择更优的样式属性值 
      
    CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,如 
      
    区别在于border:0把border设为0px,虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。 
      
    而border:none把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。所以建议使用border:none; 
      
    同样的,display:none隐藏对象浏览器不作渲染,不占用内存。而visibility:hidden则会。

  2. 使用<link>代替@import 
      
    首先,@import不属于XHTML标签,也不是Web标准的一部分,它对于较早期的浏览器兼容也不高,并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计:不要使用@import》。所以,请避免使用@import

  1. 使用外部样式表 
      
    这个原则始终是一个很好的设计实践。不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以,在实际应用中,没有必要把CSS代码内置在HTML文档中:

  2. 避免使用CSS表达式(Expression) 
      
    CSS表达式是动态设置CSS属性的强大(但危险)方法。

  3. 代码压缩 
      
    当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。压缩您的代码,可以采用一些工具,如YUI
    Compressor 
      
    利用它可精简CSS代码,减少文件大小,以获得更高的加载速度

http://www.bkjia.com/Javascript/1087367.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1087367.htmlTechArticle13条Css 书写规范,13条css书写 1.
不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。…

CSS Reset 替代品 Normalize.css

我们把历史拉回到今天,时过境迁,CSS Reset
逐渐淡出的前沿前端的视野,被取而代之就是Normalize.css,关于对CSS
Reset 与
Normalize.css的区别?可以引用知乎上 张小核桃 的一个回答:

CSS Reset 是革命党,CSS Reset
里最激进那一派提倡不管你小子有用没用,通通给我脱了那身衣服,凭什么你
body 出生就穿一圈 margin,凭什么你姓 h 的比别人吃得胖,凭什么你 ul
戴一胳膊珠子。于是 *{margin:0;}
等等运动,把人家全拍扁了。看似是众生平等了,实则是浪费了资源又占不到便宜,有求于人家的时候还得贱贱地给加回去,实在需要人家的默认样式了怎么办?人家锅都扔炉子里烧了,自己看着办吧。

Normalize.css
是改良派。他们提倡,各个元素都有其存在的道理,简单粗暴地一视同仁是不好的。body
那一圈确实挤压了页面的生存空间,那就改掉。士农工商,谁有谁的作用,给他们制定个规范,确保他们在任何浏览器里都干好自己的活儿。

下一章节会对Normalize.css进行简单的介绍,关于两者的差异区别可以看问答平台的问题:
使用normalize.css遇到的问题?
Normalize.css 和 Reset CSS
有什么本质区别没?

No CSS Reset 思想

Jonathan Snook是第一个提出No CSS Reset思想,其核心是Less is
more,少即是多,不提倡使用暴力归零的方法。

玉伯后来也在《Reset CSS研究》文章中阐述说明,其实 Eric Meyer
并不期望大家下载他的 CSS Reset
后直接就拿去用,而是应该按照自己的需求,适量裁剪和修改后再使用。

后来YUI更新了cssreset,还配套有
cssfonts 和 cssbase。cssreset只负责清除默认样式,而CSS fonts 和 CSS base
则将一些元素的默认样式重设回来,这就消除了之前的争议,这一又迅速成为大家的通用解决方法了。

YUI 提供的cssfonts.css

CSS

/* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights
reserved. Licensed under the BSD License. http://yuilibrary.com/license/
*/ /** * Percents could work for IE, but for backCompat purposes, we
are using keywords. * x-small is for IE6/7 quirks mode. */ body {
font:13px/1.231 arial,helvetica,clean,sans-serif; *font-size:small; /*
for IE */ *font:x-small; /* for IE in quirks mode */ } /** *
Nudge down to get to 13px equivalent for these form elements */ select,
input, button, textarea { font:99% arial,helvetica,clean,sans-serif; }
/** * To help tables remember to inherit */ table {
font-size:inherit; font:100%; } /** * Bump up IE to get to 13px
equivalent for these fixed-width elements */ pre, code, kbd, samp, tt {
font-family:monospace; *font-size:108%; line-height:100%; } /* YUI CSS
Detection Stamp */ #yui3-css-stamp.cssfonts { display: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
 
/**
* Percents could work for IE, but for backCompat purposes, we are using keywords.
* x-small is for IE6/7 quirks mode.
*/
body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
*font-size:small; /* for IE */
*font:x-small; /* for IE in quirks mode */
}
 
/**
* Nudge down to get to 13px equivalent for these form elements
*/
select,
input,
button,
textarea {
font:99% arial,helvetica,clean,sans-serif;
}
 
/**
* To help tables remember to inherit
*/
table {
font-size:inherit;
font:100%;
}
 
/**
* Bump up IE to get to 13px equivalent for these fixed-width elements
*/
pre,
code,
kbd,
samp,
tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}
 
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssfonts { display: none; }

前言

近期在翻阅陈旧的历史资料,整理之前饱受争议的CSS
Reset问题,不过好像十多年过去,现在大家统一了口径,纷纷推荐使用Normalize.css,包括Bootstrap都进行了内置使用,可见它的认可程度之高。

由于文章涉及内容较多,会分为系列文章

第一章
整理CSS Reset历史的演变痕迹,从第一份CSS Reset的诞生,到提出No CSS
Reset的思想,再到国产CSS Reset 1.0骄傲的诞生;最终时过境迁,CSS
Reset被Normalize.css所替代;
随后开始认识Normalize.css,了解它都做了那些事情,诉说与CSS
Reset的区别,突出优势,告诉你为什么要使用它。

第二章
由于Normalize.css只提供了英文文档,没有提供对应的中文版本,所以从这章开始对其源码进行翻译整理与解读,本章包含
html与body,HTML5元素,链接,语义化文本标签,内嵌元素,群组元素等内容解读。

第三章,
继续来介绍源码中的表单和表格部分,并且整理一份normalize-zh.css中文注释的版本上传至Github,供大家参考使用,敬请期待

关于CSS Reset那些事(1):历史演变与Normalize.css

2015/08/01 · CSS · CSS
Reset
,
Normalize.css

原文出处: Alsiso   

优势对比

前面讲到CSS
Reset的核心作用就是清零,而且过于暴力;那么作为后者Normalize.css,到底有什么优势可以完全取代前者呢?

1.Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。
相比之下,Normalize.css保持了许多默认的浏览器样式。
这就意味着你不用再为所有公共的排版元素重新设置样式。
当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

2.Normalize.css 修复了浏览器的bug
它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。
关于这一点,Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

3.Normalize.css 修复了浏览器的bug
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在Normalize.css中就不会有这样的问题,因为在我们的准则中对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。

4.Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。

5.Normalize.css 拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github
Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。

这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的,同时也让人们很容易地明白如何改进浏览器渲染。

源码解析

虽然Normalize.css第五条优势是提供了详细的文档,但是它并没有提供对应的中文版本,英文注释首先看起来不够清晰,其次对问题的解析程度也不够细化,而且也不包含问题案例,所以接下来会分章节对模块进行源码解读与整理。

1 赞 1 收藏
评论

图片 1