任务12

2017-09-28 本文已影响0人饥人谷_严琰

什么是 CSS hack

由于不同厂商（如Internet Explorer,Safari,Mozilla Firefox,Chrome等）、不同版本（如IE6和IE7）的浏览器，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

谈一谈浏览器兼容的思路

要不要做：
产品的角度：（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度： (有无必要做某件事)
做到什么程度：
让哪些浏览器支持哪些效果
如何做
1.根据兼容需求选择技术框架/库(jquery)
2.根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
3.使用条件注释、CSS Hack、js 能力检测做一些修补。

列举5种以上浏览器兼容的写法

属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
选择器前缀法(即选择器Hack)：比如IE6能识别*html .class{}，IE7能识别+html .class{}
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：；针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
使用利用Modernizr工具:
运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”。如果class里面有no-名称的，可以在css里面添加（.no-名称）相应的属性来实现一些其他效果。
使用ie条件注释和html5shiv.js，respond.js结合

<!--[if lt IE9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![end if]-->

以下工具/名词是做什么的

条件注释
条件注释是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。
IE Hack
针对IE浏览器编写不同的CSS的让IE能够在不同的正常渲染的过程
js 能力检测
检测浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
html5shiv.js
由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，解决方案就有下面
使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）。
利用脚本document.createElement(“”)创建对应的脚本，CSS选择器便可正确应用到该标签。
考虑到IE9是支持html5的，所以直接在HTML页面的head标签中添加脚本引用即可。
respond.js
Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询，实现响应式网页设计
css reset
重置浏览器的默认样式，更准确说就是通过重新定义标签样式，“覆盖”浏览器的CSS默认属性。
normalize.css
是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
主要功能：
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来
Modernizr
Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名
Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的 fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。
postCSS
postCSS本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。

一般在哪个网站查询属性兼容性？

caniuse.com 查CSS属性兼容
browserhacks 查 Hack 的写法
浏览器市场份额