澳门在线威尼斯官方 > 威尼斯澳门在线 > 正史衍变与Normalize,书写规范

原标题:正史衍变与Normalize,书写规范

浏览次数:181 时间:2019-09-24

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

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

原稿出处: Alsiso   

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代码,缩小文件大小,以博取越来越高的加载速度

书写标准,13条css书写 1. 不等浏览器成分的默许属性有所差异,使用Reset可重新恢复设置浏览器成分的部分私下认可属性,以达成浏览器的合作。...

前言

近年在翻阅陈旧的野史材料,整理在此之前饱受争议的CSS Reset难点,但是好像十多年过去,将来我们统一了标准,纷繁推荐使用Normalize.css,包罗Bootstrap都开展了安置使用,可知它的料定程度之高。

是因为文章提到内容相当多,会分成体系文章

第一章
重新整建CSS Reset历史的嬗变印迹,从第一份CSS Reset的降生,到提出No CSS Reset的合计,再到进口CSS Reset 1.0夜郎自大的落地;最终轻描淡写,CSS Reset被诺玛lize.css所取代;
随后起头认知Normalize.css,领会它都做了那多少个事情,诉说与CSS Reset的分别,特出优势,告诉你干什么要利用它。

第二章
出于Normalize.css只提供了保加布尔萨语文书档案,未有提供对应的汉语版本,所以从那章最初对其源码进行翻译整理与解读,本章满含html与body,HTML5成分,链接,语义化文本标签,内嵌元素,群组成分等剧情解读。

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

CSS Reset 历史回看

第一份 CSS Reset

何以会有CSS Reset的留存呢?这是因为中期的浏览器协理和透亮的CSS标准分歧,导致浏览器在渲染页面时效应不平等,出现相当多包容性难题。 关于 浏览器的暗许样式 请点击查阅!

依赖玉伯的篇章中透漏,最初的一份CSS Reset来自Tantek 的undohtml.css,从U大切诺基L中的日期能够观看时间是二零零三年,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 }

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. 连接的价签重新设置导致语言成分失效

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

No CSS Reset 思想

Jonathan Snook是首先个提议No CSS Reset观念,其主干是Less is more,少正是多,不提倡使用暴力归零的秘技。

玉伯新兴也在《Reset CSS研讨》作品中演讲表达,其实 Eric 迈尔并不期待我们下载她的 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. */ /** * 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

那是YUI最新更新的二回版本V3.18.1,不过很为难的觉察,YUI 提供的 cssfonts 和 cssbase 只思索了西欧文字,对汉字的支撑而不是常的少,那就形成众多顾客只行使了cssreset,而从不采取任何四个。

听大人说nake和adiaos两大活动品牌到天朝后,有些活动科学和技术会减弱,可是相对没悟出,万能的代码到了天朝也是会浓缩的。 – -!

于是,有个别大牌不甘心,不唯有厌倦了本国抄来抄去的CSS Reset,也受够了只思索西亚洲字体,不思索汉字的瑕玷,大厂们就从头物色拟订属于本人的CSS Reset,举个例子2010年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, "5b8b4f53", 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, "5b8b4f53", 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 是均等的:请依照实际须求,适当的数量裁剪和修改后再利用。

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:正史衍变与Normalize,书写规范

关键词:

上一篇:没有了

下一篇:没有了