有关CSS Reset这么些事(1):历史演化与Normalize.css

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

原作出处: Alsiso   

原稿链接

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

有关CSS Reset这些事(贰):Normalize.css 源码解读

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

原稿出处: Alsiso   

前言

日前在读书陈旧的历史资料,整理在此之前饱受争议的CSS
Reset难点,但是好像十多年过去,以后我们集合了尺度,纷纭推荐应用Normalize.css,包含Bootstrap都开始展览了内置使用,可知它的肯定程度之高。

出于小说提到内容较多,会分为种类小说

第一章
重新整建CSS Reset历史的演化痕迹,从第二份CSS Reset的出生,到提议No CSS
Reset的想想,再到进口CSS Reset 一.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
源码版本:v三.0.3

第一份 CSS Reset

怎么会有CSS
Reset的留存呢?那是因为后期的浏览器帮忙和通晓的CSS规范不一致,导致浏览器在渲染页面时遵从不均等,出现繁多包容性难点。
关于 浏览器的暗中同意样式 请点击查阅!

基于玉伯的稿子中透漏,最早的一份CSS Reset来自Tantek
的undohtml.css,从U凯雷德L中的日期能够看出时间是200四年,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 功用不荒谬

第3个难题场景是如此,苹果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;
}
  • 修复浏览器私下认可边距,统一效果
网站地图xml地图