与传统的,历史演变与Normalize

关于CSS Reset那么些事(一):历史演变与Normalize.css

2015/08/01 · CSS与传统的,历史演变与Normalize。 · CSS
Reset,
Normalize.css

初稿出处: Alsiso   

原作链接

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

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

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

原稿出处: Alsiso   

前言

近些年在读书陈旧的历史资料,整理以前饱受争议的CSS
Reset难题,可是好像十多年过去,未来大家统一了规范,纷繁推荐应用Normalize.css,包蕴Bootstrap都进展了放置使用,可知它的承认程度之高。

是因为文章提到内容较多,会分成系列小说

第一章
整理CSS Reset历史的衍生和变化印迹,从第2份CSS Reset的降生,到提议No CSS
Reset的思维,再到进口CSS Reset 一.0骄傲的出世;最终世易时移,CSS
Reset被诺玛lize.css所代替;
接着伊始认识Normalize.css,明白它都做了那个事情,诉说与CSS
Reset的分别,优秀优势,告诉你干吗要采用它。

第二章
是因为Normalize.css只提供了英文文书档案,未有提供对应的中文版本,所以从这章开首对其源码举办翻译整理与解读,本章包括html与body,HTML五成分,链接,语义化文本标签,内嵌成分,群组成分等情节解读。

第三章,
一连来介绍源码中的表单和表格部分,并且整理1份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规范差别,导致浏览器在渲染页面时效应不平等,出现过多包容性难点。
关于 浏览器的默许样式 请点击查阅!

根据玉伯的文章中透漏,最早的1份CSS Reset来自Tantek
的undohtml.css,从UCRUISERL中的日期能够看看时间是200四年,Tantek遵照自己必要对此1些标签举行了简单的重置,源码如下:

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;
}
  • 修复浏览器暗中认可边距,统1效果

发表评论

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

网站地图xml地图