菜单

至于CSS Reset 那叁个事(一)之 历史演化与Normalize.css(转)

2019年10月13日 - Ajax

前言

近年在翻阅陈旧的历史资料,整理此前饱受纠纷的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 历史回想

优势比较

前边讲到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.诺玛lize.css 拥有详细的文书档案
Normalize.css的代码基于详细而完美的跨浏览器讨论与测量试验。这些文件中具备详细的代码表达并在Github
Wiki中有更进一竿的注解。这意味着你能够找到每一行代码具体做到了哪些专业、为啥要写那句代码、浏览器之间的差别,而且你能够更便于地拓宽本人的测验。

这几个类型的指标是帮忙大家掌握浏览器暗中同意是什么样渲染成分的,同期也让民众很轻易地驾驭如何改良浏览器渲染。

CSS Reset 大旨代码与成效

任何时候加入到CSS
RESET的行列的大牌更加的多,比方产业界首脑 YUI团队 以及Eric
Meyer
把那份CSS
Reset变的一发充实,但是大家一见依旧窥见代码的主干部分仍然重新恢复设置,从此能够结论出早期的CSS
Reset的功能正是铲除全部浏览器私下认可样式,让它一切归零!

CSS

* { margin:0; padding:0 }

1
* { margin:0; padding:0 }

唯独在那之后一段时间,有人起头批判这种暴力清零的CSS
Reset格局,随后部分前端开荒者们也不胫而走一些争辨声音,比方:

  1. *{ margin:0; padding:0; }会带来品质难题
  2. 接纳通配符存在隐性难点
  3. 连着的竹签复位等于画蛇添足
  4. 连片的竹签重新设置导致语言因素失效

注:由于都是一些破旧的老难题,就不提供出处了,再此可是多研究,感兴趣谷歌~

Normalize.css 简要介绍

至于对Github的牵线,这里引用 咀嚼之味 针对 官方介绍 翻译的的 普通话版本

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
那一圈确实挤压了页面的生存空间,那就改掉。士农业和工业商,何人有什么人的功力,给她们制订个标准,确认保证他们在其余浏览器里都干好团结的生活。

下一章节会对诺玛lize.css举办简要的牵线,关于双方的差别分裂能够看问答平台的标题:
行使normalize.css遇到的难题?
Normalize.css 和 Reset CSS
有怎么样本质差距没?

有关CSS Reset那几个事(1):历史衍变与Normalize.css

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

初藳出处: Alsiso   

做了那多少个事

Normalize.css做了以下几件事:

国产 CSS Reset

那是YUI最新更新的三次版本V3.18.1,然而很为难的意识,YUI 提供的
cssfonts 和 cssbase
只考虑了西Owen字,对汉字的支撑却十分的少,那就招致不胜枚举客户只行使了cssreset,而从未运用别的五个。

遗闻nake和adiaos两大活动品牌到天朝后,有些活动科技(science and technology)会降低,可是相对没悟出,万能的代码到了天朝也是会缩水的。
– -!

于是,有个别大腕不甘心,不唯有嫌恶了本国抄来抄去的CSS
Reset,也受够了只思索西澳洲字体,不思索汉字的症结,大厂们就起来搜求制订属于自身的CSS
Reset,比方二〇〇七年AliKissy框架
(源码连接已失效,主页留回忆) 的率先份CSS Reset:

CSS

/* KISSY CSS Reset 观念:清除和重新设置是紧凑不可分的 特色:1.适应中文2.依据最新主流浏览器 维护:玉伯(lifesinger@gmail.com),
正淳(ragecarrier@gmail.com) */ /* 清除内外边距 */ body, h1, h2, h3,
h4, h5, h6, hr, p, blockquote, /* structural elements 结构成分 */ dl,
dt, dd, ul, ol, li, /* list elements 列表成分 */ pre, /* text
formatting elements 文本格式成分 */ fieldset, lengend, button, input,
textarea, /* form elements 表单成分 */ th, td { /* table elements
表格成分 */ margin: 0; padding: 0; } /* 设置暗许字体 */ body, button,
input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma,
Helvetica, Arial, “宋体”, sans-serif;*/ font: 12px/1 Tahoma, Helvetica,
Arial, “\5b8b\4f53”, sans-serif; /* 用 ascii
字符表示,使得在别的编码下都无难点 */ } h1 { font-size: 18px; /* 18px
/ 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4,
h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style:
normal; } /* 将斜体扶正 */ code, kbd, pre, samp, tt { font-family:
“Courier New”, Courier, monospace; } /* 统一等宽字体 */ small {
font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 平日化 */ /*
重新恢复设置列表成分 */ ul, ol { list-style: none; } /* 重新载入参数文本格式成分 */ a
{ text-decoration: none; } a:hover { text-decoration: underline; }
abbr[title], acronym[title] { /* 注:1.ie6 不扶植 abbr;
2.那边用了质量选拔符,ie6 下无效果 */ border-bottom: 1px dotted;
cursor: help; } q:before, q:after { content: ”; } /* 重新恢复设置表单成分 */
legend { color: #000; } /* for ie6 */ fieldset, img { border: none; }
/* img 搭车:让链接里的 img 无边框 */ /* 注:optgroup 无法扶正 */
button, input, select, textarea { font-size: 100%; /* 使得表单成分在 ie
下能承继字体大小 */ } /* 重新设置表格成分 */ table { border-collapse:
collapse; border-spacing: 0; } /* 重置 hr */ hr { border: none;
height: 1px; } /*
让非ie浏览器暗许也突显垂直滚动条,幸免因滚动条引起的闪烁 */ html {
overflow-y: scroll; }

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/* KISSY CSS Reset
理念:清除和重置是紧密不可分的
特色:1.适应中文 2.基于最新主流浏览器
维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/
 
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}
 
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}
 
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
 
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
 
/* 重置列表元素 */
ul, ol { list-style: none; }
 
/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
 
abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}
 
q:before, q:after { content: ”; }
 
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
 
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
 
/* 重置 hr */
hr {
    border: none;
    height: 1px;
}
/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

 

记得玉伯在写完第一版本的CSS Reset后,在篇章的最后仍旧千叮咛,万嘱咐说:

请记住:永世不真实万能一挥而就方案,永恒不曾银弹。
因此笔者的提交涉 Eric 是一致的:请遵照具体要求,适合的数量裁剪和修改后再使用。

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

何以会有CSS
Reset的留存吗?那是因为早先时代的浏览器帮忙和清楚的CSS标准分歧,导致浏览器在渲染页面时效应不等同,出现比比较多包容性难题。
关于 浏览器的暗中同意样式 请点击查看!

听别人讲玉伯的篇章中泄漏,最初的一份CSS Reset来自Tantek
undohtml.css,从UTiguanL中的日期能够见到时间是二〇〇三年,Tantek根据自己必要对此某些标签进行了简短的重新载入参数,源码如下:

CSS

/* undohtml.css */ /* (CC) 2004 Tantek Celik. Some Rights Reserved.
*/ :link,:visited { text-decoration:none } ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 } a img,:link img,:visited img {
border:none } address { font-style:normal }

1
2
3
4
5
6
7
8
9
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

源码深入分析

尽管诺玛lize.css第五条优势是提供了详细的文书档案,可是它并不曾提供相应的国语版本,葡萄牙共和国语表明首先看起来非常不够鲜明,其次对难点的解析程度也非常不足细化,并且也不带有有失常态态案例,所以接下去会分章节对模块实行源码解读与整治。

1 赞 1 收藏
评论

图片 1

粗略概述

Normalize.css
@necolas@jon_neal 两位大拿花了几百个时辰来商讨不相同浏览器的私下认可样式的差别而得出的结晶,多谢前辈们的贡献。

Normalize.css
只是八个十分小的CSS文件,但它在暗中认可的HTML成分样式上提供了跨浏览器的万丈一致性。相比于守旧的CSS
Reset,Normalize.css是一种今世的、为HTML5预备的优质替代方案。Normalize.css以后早已被用于FacebookBootstrap、HTML5 Boilerplate、GOV.UK、库罗德dio、CSS Tricks
以致巨额另外框架、工具和网址上。

当前Normalize.css 已经变为了CSS
Reset的代表方案是确实无疑的职业了。国内盛名的AliceUIAmazeUI 框架都是根据可能借鉴Normalize.css举行的拟定化版本。

能够从那边下载:
Github:https://github.com/necolas/normalize.css/

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图