浏览器兼容
2017-09-30 本文已影响0人
饥人谷_一叶之秋
一.什么是 CSS hack
- 由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
二.谈一谈浏览器兼容的思路
- 当我们遇到浏览器兼容问题时，首先想的是该兼容是否需要做，如果在产品和成本的角度来考虑比较合适就需要做，否则就不必了（当然做不做主要是还是看老板）；当我们认为有必要做（或者老板要做）时，我们要考虑需要做到什么程度，也就是让哪些浏览器支持哪些效果；最后我们要考虑如何做，我们可以可以将兼容需求选择基础框/库（jquery），根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)postCSS
，另外我们可以使用条件注释、CSS Hack、js 能力检测做一些修补。
三.列举5种以上浏览器兼容的写法
- 选择合适的框架
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9) - 属性前缀法
任务11-1.png
- IE条件注释法:
任务11-2.png
- 选择器前缀法
任务11-3.png
- 使用一些工具兼容
html5shiv.js： 用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题
modernizr.js： 特性检测器，有就使用原生，没有就加载polyfill
respond.js： 用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计
css reset直接重置浏览器的默认样式
normalize.css保留浏览器的原来样式并且做到每个浏览显示一致）
四.以下工具/名词是做什么的
- 条件注释：是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
- IE Hack：是针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
- js 能力检测：最常用的也是最广泛使用的客户端检测技术是能力检测（特性检测）。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。
- html5shiv.js：主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
- respond.js：是在做响应式网页的时候一些浏览器器不支持媒体查询等css3新特性，使用respond.js来兼容。
- css reset：是样式重置，将浏览器的默认样式根据开发者的选择进行覆盖掉。
- normalize.css是一个可以定制的CSS文件，实现样式重置的一种方式，相对于其他的方式更有优势，标准化的样式，适用范围广的元素。纠正错误和常见的浏览器的不一致性。一些细微的改进，提高了易用性。使用详细的注释来解释代码。
- Modernizr：保护有用的浏览器默认样式而不是完全去掉它们，修复浏览器自身的bug并保证各浏览器的一致性，用一些小技巧优化CSS可用性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
- postCSS：是一款通过JS插件来转换CSS的工具。这些插件能帮你校验你的CSS代码、转换未来的CSS语法、支持变量和混写、以及内联图片等等。
