task12
2017-10-20 本文已影响0人
ngzk46
1. 什么是 CSS hack?
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这时就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
2. 谈一谈浏览器兼容的思路?
- 要不要做
- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度 (有无必要做某件事)
- 做到什么程度
- 让哪些浏览器支持哪些效果
- 如何做
- 根据兼容需求选择技术框架/库(jquery)
- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
- postCSS
- 条件注释、CSS Hack、JS 能力检测来做修补
3. 列举5种以上浏览器兼容的写法
- 属性前缀法(即类内部Hack)
例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
.box{
color: red;
_color: blue; /* ie6 */
*color: pink; /* ie67 */
color: yellow\9; /* ie/edge 6-8 */
}
-
选择器前缀法(即选择器Hack)
-
IE条件注释法(即HTML条件注释Hack)
针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
4. 以下工具/名词是做什么的
- 条件注释(conditional comment)
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。 - IE Hack
通过不同的代码来兼容不同版本的IE和其他浏览器。 - js 能力检测
最常用的也是最广泛使用的客户端检测技术是能力检测（特性检测）。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。 - html5shiv.js
Internet Explorer 9之前的版本几乎不支持HTML5元素和其它HTML5特性。HTML5Shiv允许Internet Explorer 9之前的版本识别HTML5标记，并允许他们使用CSS样式。 - respond.js
Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。 - css reset
CSS Reset的作用就是清除所有浏览器默认样式 - normalize.css
normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
1.保护有用的浏览器默认样式而不是完全去掉它们
2.一般化的样式：为大部分HTML元素提供
3.修复浏览器自身的bug并保证各浏览器的一致性
4.优化CSS可用性：用一些小技巧
5.解释代码：用注释和详细的文档来 - Modernizr
Modernizr是一套JavaScript 库，用来侦测浏览器是否支持HTML5与CSS3等规格。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。 - postCSS
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。
