AI专业者开发社区 1 号成员
  •  0 回帖  •  10 浏览  •  4 个月前
   

CSS reset

 前面的话

　　大部分的时候，作为前端，我们在写 CSS 样式之前，需要添加一份 reset.css 。CSS reset 不仅用于清除默认样式，更是一种全局样式定义。如果项目前期不定制好 CSS reset，后期维护阶段再对其进行修改，将会牵一发而动全身。本文将详细介绍 CSS reset

 

reset

　　以网易 NEC的 CSS reset 为例，来进行说明

/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

　　下面来说明 CSS reset 的问题

　　1、不合理的样式重置

　　例如， html、div 、dt 等标签是没有默认 padding 和 margin 的

　　2、生僻标签的样式重置

　　例如，fieldset 、blockquote、q 等标签用的较少，用到时，再进行样式设置即可

　　3、性能负担

　　CSS reset 通常会增加浏览器进行样式计算的成本（即有一定的性能负担），因为它引入了许多的针对元素的全局规则，网页中几乎所有元素都会匹配一条乃至几条的 reset 规则，且往往规则中的属性设定其实会被更特殊的规则所覆盖（比如 padding 和 margin）。极端情况下，可能某条 reset 规则中的所有属性设置实际上并没有在任何元素上生效（因为全部被更特殊的规则给覆盖了），所有针对此规则的级联计算全都是浪费

　　基于这些问题，下面是修改版的 CSS reset

body{margin: 0; font: 12px/22px Arial,"微软雅黑"; color: #333;}
header,footer,section,article,aside,nav,figure{display:block}

ul,ol{margin: 0;padding: 0;list-style: none;}
p,dl,dd{margin: 0;}
h1,h2,h3,h4{margin: 0;font-size: 100%;}


img{border:none;}
a{color: #21a557;cursor: pointer; text-decoration: none; }
a:active,a:hover{outline：none;}
a:hover{text-decoration: underline;}


strong{font-weight:normal;}
em,i{font-style:normal;}


table{border-collapse: collapse; table-layout: fixed;border-spacing:0;}
th,td{padding: 0;}
button,input{box-sizing: border-box;padding: 0;border: none;background: none;}

 

Normalize

　　Normalize.css 与 reset.css 的风格恰好相反，注重通用的方案，重置掉该重置的样式（例如 body 的默认 margin），保留该保留的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。Normalize 不讲求样式一致，而讲求通用性和可维护性

html {
  /*统一行高*/
  line-height: 1.15;
  /*防止在 winPhone 和 ISO 中，因旋转屏幕而造成的字体大小的改变*/
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%; 
}

body {
/去除 margin/
margin: 0;
}


article,aside,footer,header,nav,section,figcaption,figure,main{
/重置 IE8- 浏览器的 display/
display: block;
}


h1 {
/统一字体大小及 margin/
font-size: 2em;
margin: 0.67em 0;
}


figure {
/重置 IE8 浏览器的 margin/
margin: 1em 40px;
}


hr {
/重置 firefox 浏览器的 box-sizing/
box-sizing: content-box;
height: 0;
/重置 IE 浏览器的 overflow/
overflow: visible;
}


pre {
/统一字体大小及字体系统/
font-family: monospace, monospace;
font-size: 1em;
}


a {
/移除 IE10 中的灰色背景/
background-color: transparent;
-webkit-text-decoration-skip: objects;
}


abbr[title] {
/移除 Chrome57- and Firefox 39- 中的 border-bottom/
border-bottom: none;
/统一 text/-decoration
text-decoration: underline;
text-decoration: underline dotted;
}


b,strong {
/统一字体重量/
font-weight: bolder;
}


code,kbd,samp {
/统一字体系列及字体大小/
font-family: monospace, monospace;
font-size: 1em;
}


dfn {
/重置 Android4.3- 浏览器的字体样式/
font-style: italic;
}


mark {
/重置 IE8- 浏览器的背景颜色及文本颜色/
background-color: #ff0;
color: #000;
}


small {
/统一字体大小/
font-size: 80%;
}


sub,sup {
/去除 sub、sup 对行高的影响/
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}


sub {
/统一位置/
bottom: -0.25em;
}


sup {
/统一位置/
top: -0.5em;
}


audio,video {
/重置 IE8- 浏览器的 display    /
display: inline-block;
}


audio:not([controls]) {
/重置 iOS 4-7 中的 display 及 height/
display: none;
height: 0;
}


img {
/重置 IE9- 浏览器的 border-style/
border-style: none;
}


svg:not(:root) {
/重置 IE 浏览器中的 overflow/
overflow: hidden;
}


button,input,optgroup,select,textarea {
/统一样式/
/移除 Firefox and Safari 中的 margin/
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
}


button,input {
/重置 IE 浏览器中的 overflow/
overflow: visible;
}


button,select {
/重置 firefox 浏览器中的 text-transform/
text-transform: none;
}


button,html [type="button"], [type="reset"],[type="submit"] {
/重置 webkit 浏览器的 appearance 属性/
-webkit-appearance: button;
}


button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {
/重置 firefox 浏览器中的 border 和 padding/
border-style: none;
padding: 0;
}


button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {
/统一 outline/
outline: 1px dotted ButtonText;
}


fieldset {
/重置 firefox 浏览器的 padding/
padding: 0.35em 0.75em 0.625em;
}


legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}


progress {
/重置 IE9- 浏览器的 display/
display: inline-block;
/重置 Chrome/, Firefox 浏览器的 vertical-align
vertical-align: baseline;
}
textarea {
/移除 IE 浏览器中默认的垂直滚动条/
overflow: auto;
}


[type="checkbox"],[type="radio"] {
/重置 IE9- 浏览器的 box-sizing 及 padding    /
box-sizing: border-box;
padding: 0;
}


[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {
/修正 Chrome 中增加和减量按钮的光标样式/
height: auto;
}


[type="search"] {
/重置 Chrome and Safari 的 appearance 和 outline-offset/
-webkit-appearance: textfield;
outline-offset: -2px;
}


[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {
/在 macOS 上删除 Chrome 和 Safari 中的内填充和取消按钮。/
-webkit-appearance: none;
}


::-webkit-file-upload-button {
/在 iOS 和 Safari 中，纠正无法点击的类型。/
-webkit-appearance: button;
font: inherit;
}


details, menu {
/重置 IE8- 浏览器的 display/
display: block;
}


summary {
/统一 display/
display: list-item;
}


canvas {
/重置 IE8- 浏览器的 display/
display: inline-block;
}


template {
/重置 IE 浏览器的 display/
display: none;
}


[hidden] {
/重置 IE9- 浏览器的 display    /
display: none;
}

 

使用

　　是否 Normalize.css 就真的比 reset.css 好呢？

　　也不见得，Normalize.css 中重置修复的很多 bug ，其实在我们的项目中十个项目不见得有一个会用得上，那么这些重置或者修复，某种意义上而言也是所谓的冗余代码

　　所以，应该根据项目需要，混合部分 reset 或者 normalize，编写了一份适合团队项目的 reset ，做出取舍微调，适量裁剪和修改后再使用

　　对于一般项目而言，在调用 normalize.css 之后，再根据实际情况，编写 reset.css。当然，这个 reset 并不是将样式清空，而是设置样式的默认值及常用的工具样式

html{
    /*这样，1rem=100px，方便后续计算，不设置为 10px 是因为 chrome 下最小字体大小为 12px*/
    font-size:100px;
}
body{
    /*设置为 12px*/
    font-size: 0.12rem;
    line-height: 1.5;
    /*不使用纯黑色 #000，降低页面对比度*/
    color:#222;
}
a{
    color:#666;
    text-decoration:none;
}
a:hover,a:active{
    color:#0ae;
    text-decoration: underline;
}
::selection{
    background-color: #b3d4fc;
    text-shadow:none;
}
ul{
    margin: 0;
    padding: 0;
    list-style:none;
}
.fl{float: left;}
.fr{float: right;}
.clear:after{content:""; display: block; clear: both;}
.clear{zoom:1;}
/*低版本浏览器提示*/
.browserupgrade{
    margin:0;
    padding:1rem;
    background-color: #ccc;
}