前面的话
大部分的时候,作为前端,我们在写 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;
}