1.条件注释
IE条件注释是一种特殊的HTML注释，这种注释只有IE5.0及以上版本才能理解。比如普通的HTML注释是：
而只有IE可读的IE条件注释是：
“非IE条件注释”：
non-IE HTML Code
“非特定版本IE条件注释”（很少用到）：
<![IGNORE[]]>Code for browsers that match the if condition
简而言之，除了“Windows上的IE”之外的所有浏览器都会认为条件注释只是一段普通的HTML注释。你不能在CSS代码中使用条件注释。IE条件注释是很有用的对IE隐藏或者展现特定代码的方法，比起在CSS中用诡异的_/制造bug，利用IE条件注释来写CSS “hacks”是更合理的方法。通俗点，条件注释就是一些if判断，但这些判断不是在脚本里执行的，而是直接在html代码里执行的。
条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。
从语法上看这是相当合法的普通HTML注释。任何浏览器都会认为<!–和–>之间的部分是注释从而忽略它。但是IE也会看到其中[if IE]>，从而开始解释接下来的代码直到遇到<![endif]。所以，下面这些代码不会显示在任何其他浏览器中面。
通过“比较操作符”可以更灵活地对IE版本进行控制，用法是在IE前面加上“比较操作符”。合法的操作符如下：
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同
示例：
<!–[if gt IE 5.5]> / 如果IE版本大于5.5 /
<!–[if lte IE 6]> / 如果IE版本小于等于6 /
<!–[if !IE]> / 如果浏览器不是IE /
虽然看上去当你第一次使用条件注释的时候会更费时，但当你以后调试你的CSS的时候，就会发现非常方便。用条件注释你只需要写一遍HTML注释，而用bug你需要为每一条规则都写上又长又丑的代码，而且还经常是为了改变其他的hacks而写的hacks。除此之外条件注释对于不支持它的任何浏览器而言都是合法的HTML注释。以下为条件注释与CSS hacks的一些区别：
Hacks是基于浏览器的bug，而这些bug最终可能会被修复。
条件注释是基于IE特定代码，这种识别机制任何时候都不会被移除。
每一个浏览器都能看见你的hacks，或许下一个版本或者一个新的浏览器会在你的hacks代码上出错。
只有IE才能看到条件注释，通过额外的“IE文件”来影响页面，其他浏览器根本就不会下载它。
Hacks不能确保对哪些浏览器生效而对哪些不，用的hacks越多，代码越混乱。
条件注释利用版本匹配使得作者可以容易地对特定版本写代码。
2.IE Hack
什么是CSS hack
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
CSS hack的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
IE hack
1.条件注释法
这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
2.类内属性前缀法
| hack | 写法 | 实例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| * | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| + | +color | 绿色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | 黄色 | Y | Y | N | N | N | N | N | N | N | N |
| _ | _color | 蓝色 | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| \0 | color:red\0 | 红色 | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0 | color:red\9\0 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
| !important | color:blue !important;color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
说明：在标准模式中
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
3.选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
等等
3.js 能力检测
引言
我们知道，各个版本的浏览器有着许多不一致性。理想状态下，应该是所有的浏览器都提供一套标准的API接口。但是现实中，各个版本的浏览器存在的怪癖非常多，我们通常都是使用客户端检测来作为补救措施。但是我们应该知道，不到万不得已，不要使用客户端检测。只要能找到更通用的方法，就应该优先采用更通用的方法。总之。先设计最通用的方案，在使用特定于浏览器的技术增强该方案
1、能力检测
最常用的也是最广泛使用的客户端检测技术是能力检测（特性检测）。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。其基本默认如下：
1/特性检测
2 if (object.propertyInQuestion) {
3 //使用object.propertyInQuestion
4 }
举例来说，IE5不支持document.getElementById这个DOM方法。尽管可以使用非标准的document.all属性实现相同的功能。但是早期的IE的确不支持document.getElementById。所以通过下面的特性检测来保证浏览器的兼容性。请看下面的例子：
function getElement(id) {
if (document.getElementById) {
return document.getElementById(id);
}
else if (document.all) {
return document.all[id];
}
else {
throw new Error("浏览器版本太老了，不存在搜索DOM接口");
}
}
我们看到方法是想返回指定Id的DOM元素。document.getElementById()是实现这一功能的标准方式，所以首先检测它。如果浏览器不支持这个方法，那么久退而求其次使用document.all属性来实现类似的功能。如果这两个特性都无法使用，那么说明这个方法无法使用了。
第二个重要的概念在于：必须检测实际要用到的特性。一个特性存在，并不意味着另一个特性也存在。请看下面的例子：
1 function getWindowWidth() {
2 //假设是IE浏览器
3 if (document.all) {
4 //错误的用法
5 return document.documentElement.clientWidth;
6 }
7 else {
8 return window.innerWidth;
9 }
10 }
这是一个错误使用能力检测的例子。在这个例子中，首先检测document.all这个特性。然后使用document.documentElement.clientWidth返回窗体的宽度。IE8之前的浏览器确实不支持window.innerWidth属性。但是document.all属性成立的浏览器并不是只有IE。Opera也支持这个属性，也支持window.innerWidth。我们使用到了document.documentElement.clientWidth，这个也是需要进行特性检测的。
2、更可靠的能力检测
能力检测对于想知道某个特性是否会按适当的方式行事非常有效。我们在上面介绍的利用类型转换来确定某个对象成员是否存在，但这样是还是不知道该成员是不是你想要的。下面我们来看一个例子：
1 //不要这样做,这只是检测了是否存在相应的方法--这不是能力检测
2 function isSortable(object) {
3 return !!object.sort;
4 }
这个函数通过检测对象是否有sort方法来确定对象是否支持排序。但是如果一个对象包含了sort属性，那么也会返回true。这会导致一些问题。所以更好的方法是检测sort是否是一个函数。例如：
1 function isSortable(object) {
2 return typeof object.sort === "function";
3 }
这里的typeof操作符用于确定sort的确是一个函数。所以后期可以使用sort进行排序。
4.html5shiv.js
html5shiv.js让IE6、IE7、IE8支持html5
1.插件介绍
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。所以我们在使用过程中，想要让低版本的浏览器，即IE9以下的浏览器支持，那么这款html5shiv.js是一个非常好的选择！
上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。
2.相关图片
3.使用方法
<!--[if lt IE 9]>
<script type="text/javascript" src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->
4.相关操作
html5shiv.js操作指南
5.下载
html5shiv.js下载
5.respond.js
Respond.js让IE6-8支持CSS3 Media Query
Bootstrap里面就引入了这个js文件，从名字看出来是自适应的兼容。打开IE看了一下，效果挺好的，自适应的效果挺好的。Respond.js让不支持css3Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
使用方式
官方demo地址：http://scottjehl.github.com/Respond/test/test.html
1.在css中正常用 min/max-width media queries
2.引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果respond.js加载得很后面，这时重新根据media query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）
实现思路
- 1.把head中所有<link rel=“sheetstyle” href=“xx”/>的css路径取出来放入数组
- 2.然后遍历数组一个个发ajax请求
- 3.ajax回调后仅分析response中的media query的min-width和max-width语法，分析出viewport变化区间对应相应的css块
- 4.页面初始化时和window.resize时，根据当前viewport使用相应的css块。
respond.js总结
优点：压缩后仅1k,不跨域时性能ok，只需引入respond.js通用易用
缺点：仅支持media query的min-width和max-width（用于响应式够用）；支持跨域，虽然配置有点麻烦，实现跨域代价高而且有闪屏体验欠佳。
6.css reset
1.css 重置
重置样式表的目标是减少浏览器在缺省行高，标题页边距和字体大小等方面的不一致性。重置样式经常出现在CSS框架中。（CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”！）
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
2.CSS reset的滥用
物极必反，在集体主义的亚洲国家，从众服从以及跟风是相当常见的，这在CSS reset的应用上可见一般，Eric在其reset代码页面中提到：要根据您自己的要求做修改。然而，目前的状态是（尤其一些中小型网站），CSS reset代码直接拷贝过去，也不做一番思考，我真是哀其不幸，怒其不争。我今天就见到了这么一行CSS reset代码：
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0;padding: 0; }
看到这样子的CSS代码我只能无奈的摇摇头，浮躁的不严谨这些词立马涌现在我脑中。姑且先不说CSS reset这东西的出现以及推崇就是个错误，光看看这段样式代码，我就吐血三升了。我想，有类似这段样式代码的网站不在少数，但是却是很屎的一段CSS样式代码。
1.div标签默认有margin值吗？有padding值吗？怎么会想到应用div{margin:0; padding:0;}属性呢？真是画蛇添足，多此一举。
-
dt标签有默认的margin与padding值就是0，这里为什么还要使用呢？ -
li标签默认有margin值吗？有padding值吗？压根就没有，也不自己测测，还没事找事设置个li{margin:0; padding:0;}声明，真是衰！ -
code标签是个属于inline水平的元素，居然也扯到margin与padding的重置，真是好笑。 - 还有，像
form,input,button,textarea这样子的表单元素，有margin值吗？有padding值吗？我真是不解！ -
fieldset,legend这两个90年代的标签你的网站上使用了吗？使用概率不足1%的标签也拿来重置，我实在无语了。 - 还有
th，td这些标签，幸好没有写上table与tr标签，否则我一起痛批一段。
在我看来，就算要CSS默认属性要reset重置，也应该如下：
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;} ol,liul{margin:0; padding:0;}
这样子的CSS reset才是高效的，简洁的，其他一些标签都要通通的去掉，完全没有必要。
3.CSS reset的不足
CSS文件的大小
显然，CSS reset平白无故的增加了CSS文件的大小，虽然，增加的大小可能有限，但是，要知道，即使0.1秒的载入时间差异也会影响互联网企业的收入的。
样式的重置
许多的CSS样式要重写与重新覆盖，典型的多此一举。
CSS的渲染
这可以说是最大的问题，样式无缘无故增加了很多的渲染，想想看，一个项目或是一个页面中有多少个div标签，居然使用div{margin:0; padding:0;}当然，*{margin:0; padding:0;}更是无法容忍的。
7.Normalize.css
Normalize.css 是？
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
Normalize.css是一种CSS reset的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。
我们创造normalize.css有下面这几个目的：
- 保护有用的浏览器默认样式而不是完全去掉它们
- 一般化的样式：为大部分HTML元素提供
- 修复浏览器自身的bug并保证各浏览器的一致性
- 优化CSS可用性：用一些小技巧
- 解释代码：用注释和详细的文档来
Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。
与 css reste区别
- Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。 - Normalize.css 修复了浏览器的bug
它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug - Normalize.css 不会让你的调试工具变的杂乱
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。
4. Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
5. Normalize.css 拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。
8.Modernizr
Modernizr是什么？
Modernizr是一小段JavaScript代码，可自动检测用户浏览器中下一代Web技术的可用性。Modernizr 不是基于UA 将所有浏览器列入黑名单，而是使用功能检测功能，以便根据浏览器的实际功能轻松定制用户体验。
什么是特征检测？
在网络开发的黑暗时代，我们经常不得不求助于UA嗅探，以确定他们的用户是否能够使用Awesome-New-Feature ™。实际上，这意味着要做如下的事情
if (browser === "the-one-they-make-you-use-at-work") {
getTheOldLameExperience();
} else {
showOffAwesomeNewFeature();
}
现在看起来不错，对吧？我们正在使用Awesome-New-Feature ™，当然它不像旧式的硬皮浏览器那样支持，对吧？今天可能就是这种情况。但是如果该浏览器的下一个版本增加了对Awesome-New-Feature ™的支持呢？现在你必须回去审计你的代码，更新你正在做这个检查的每一个地方。假设您有时间了解每个浏览器的每个功能更新。更糟糕的是，直到你意识到它实际上运行在最新版本中，所有这些用户getTheOldLameExperience都无缘无故地回到了办公室。
那些用户 - 显然没有理由给予一个不合标准的网站 - 实际上可以进入他们的浏览器和操作系统设置，并将浏览器的名称（或者user-agent- 在执行UA嗅探时与代码进行比较）更改为任何他们想要的内容。那时 - 你的代码是没有意义的。您正在屏蔽可能实际支持您所有功能的用户，并可能让那些不支持的功能出现。几乎每个人都会受到破坏。一定有更好的方法！
有，它被称为Feature Detection，它看起来更像这样
if (Modernizr.awesomeNewFeature) {
showOffAwesomeNewFeature();
} else {
getTheOldLameExperience();
}
功能检测实际上是以编程方式检查Awesome-New-Feature ™是否工作，而不是根据用户是否在one-they-make-you-use-at-work浏览器上做出决定，并假设这意味着他们要么无法访问Awesome-New-Feature ™功能浏览器，并给你一个或结果。所以，现在只要您最不喜欢的浏览器添加了对Awesome-New-Feature ™的支持，您的代码就会在那里自动运行！没有更多的必须更新，永远。代码最终是相似的，但它的实际意图更加清晰truefalse
9.postCSS
PostCSS是一个很有趣的项目。简而言之，它将CSS转换成抽象语法树(AST)，也就是JavaScript可以操作的一种数据形式。基于JavaScript的PostCSS插件可以执行不同的代码操作。PostCSS本身并没有改变你的CSS，它请允许插件执行和转换你的代码。
