介绍一下normalize.css

阅读更多

前面写过一篇关于reset.css的一些思考与探究

 

这篇主要是介绍一下 normalize.css 

 

           ----- A modern，HTML5-ready alternative to CSS resets

 

下面部分内容来源于http://necolas.github.com/normalize.css/  本人简单地做一些简单的翻译工作：

 

1、它能做什么？

 

• 保留有用的默认值，这个区别于其他的CSS resets
• 标准化大范围的HTML elements的样式
• 纠正bugs，使浏览器具体通用性
• 通过一些巧妙的改进来增强可用性
• 用具体的说明来讲解代码的用处

2、 代码详谈

   ------ 下面我结合源码来与 YUI reset.css进行比较

相同点：

/*一致的*/
table{
    border-collapse:collapse;
    border-spacing:0;
}

 

不同点：

q:before,q:after{
    content:'';    //YUI reset
}

q:before,q:after{
    content:'';
    content:none;   //normalize 新加的
}

 

     字体方面：

/*YUI reset.css*/
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}

/*normalize.css*/
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;
}

 

    html的设置

   ------ 关于下面的规则我在 chrome浏览器font-size<12px 提到过

html{
   font-size:100%;
   -webkit-text-size-adjust:100%;  
   -ms-text-size-adjust:100%;
}

 

    增加了对img的处理

/*YUI reset.css*/
img{
   border:0;
}

/*normalize.css*/
img{
   border:0;
   -ms-interpolation-mode:bicubic;  /*解决ie7的图片拉伸的bug*/
}

 

    增加了对textarea的设置

textarea{
    overflow:auto;   /*去掉IE下垂直滚动条*/
    vertical-align:top;  /*增加可读性和alignment*/
}

 

    增加了对form元素字体设置

html,
button,
input,
select,
textarea{
    font-family:sans-serif;
}

 

    增加了fieldset的设置

/*YUI reset.css*/
fieldset{
    border:0;
}

/*normalize.css*/
fieldset{
     border:1px solid #c0c0c0;
     margin:0 2px;
     padding:0.35em 0.625em 0.75em;
}

 

    增加了对a的设置

  

a:focus{
    outline:thin dotted;  /*Chrome下的特殊的outline的重置*/
}
a:hover,a:active{
    outline:0;
}