源码解读,历史演变与Normalize

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

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

原稿出处: Alsiso   

初稿链接

        CSS Reset 是革命党,CSS Reset
里最激进那一派提倡不管你小子有用没用,通通给自家脱了那身服装,凭什么您
body 出生就穿一圈 margin,凭什么你姓 h 的比人家吃得胖,凭什么您 ul
戴一胳膊珠子。于是 *{margin:0;}
等等运动,把住户全拍扁了。看似是众终生等了,实则是荒废了财富又占不到便利,有求于人家的时候还得贱贱地给加回去,实在需求每户的暗中同意样式了怎么做?人家锅都扔炉子里烧了,自身瞅着办吧。

有关CSS Reset那叁个事(2):Normalize.css 源码解读

新浦京,2015/08/02 · CSS · CSS
Reset,
Normalize.css

原来的作品出处: Alsiso   

前言

近年在翻阅陈旧的野史资料,整理从前饱受争议的CSS
Reset难点,然而好像十多年过去,未来大家统一了标准,纷繁推荐应用Normalize.css,包涵Bootstrap都进行了放置使用,可知它的肯定程度之高。

源码解读,历史演变与Normalize。由于文章提到内容较多,会分为连串小说

第一章
整治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,供大家参考使用,敬请期待

        Normalize.css
是考订派。他们发起,各类要素都有其设有的道理,简单阴毒地一碗水端平是倒霉的。body
那一圈确实挤压了页面包车型大巴生存空间,那就改掉。士农工商,何人有哪个人的功能,给她们制订个标准,确定保障他们在任何浏览器里都干好和谐的活计。

前言

上一章节牵线了CSS
Reset的野史,最终对Normalize.css做了简短的问询,所以从那节伊始对源码举行表明翻译与解读,尽可能从最根性情的标题询问它在帮大家做如何?

回顾:至于CSS Reset 那三个事(一)之
历史衍变与Normalize.css

CSS Reset 历史回看

       也足以知道为CSS Reset
是大顺,闭目掩耳,对于外来东西全然不收受;故为完全重置。

Normalize 源码解读

前方讲到的分模块解读,就是先黏贴一段源码,然后依照官方提供的评释进行翻译整理,尽大概提供案例分析,然后再度开始展览整理总括,假诺您有疑点,能够留言一起调换。

源码地址:https://github.com/necolas/normalize.css/blob/master/normalize.css
源码版本:v3.0.3

第一份 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 }

     
Normalize.cs是孙吴,外来好的收受不佳的抛开;故为重置掉该重置的体裁,保留有用的
user agent 样式,同时开始展览局地 bug 的修复。

html与body 元素

CSS

/** * 1. Set default font family to sans-serif. * 2. Prevent iOS and
IE text size adjust after device orientation change, * without
disabling user zoom. */ html { font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%;
/* 2 */ }

1
2
3
4
5
6
7
8
9
10
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
*    without disabling user zoom.
*/
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
  1. 安装全局的书体为sans-serif,关于中文字体的设置可参考 Amaze
    UI
  2. 防止 iOS 横屏字号放大,同时保险在PC上 zoom 功效平常

第二个难点场景是这样,苹果IOS设备调整后会自动调整文字的大小,依照苹果的打算是为着提高用户体验,比如竖屏状态下是14px,转换为横屏时就改成了20px,把text-size-adjust:100%就不会调动字体大小了。

万一把值设置为'text-size-adjust:none',那么就会导致用户不能够推广收缩字体了。

CSS

/** * Remove default margin. */ body { margin: 0; }

1
2
3
4
5
6
7
/**
* Remove default margin.
*/
 
body {
  margin: 0;
}
  • 修复浏览器暗许边距,统一效果

相关文章