浏览器兼容自学问题搜集

2017-03-26 本文已影响0人饥人谷_Young丶K

1.什么是 CSS hack？

以下是引自百度文库的定义：

简单地讲，css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。由于各浏览器的内核不同，所以会造成一些误差就像JS一样，一个JS网页特效，在微软IE6、IE7、IE8浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌浏览器无效，这样就叫做JS hack ，所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。

也就是说：
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的，比如```
.kwstu{width:300px;_width:200px;}




2.谈一谈浏览器兼容的思路
---
首先，为什么会有浏览器兼容问题？

- 同一产品，版本越老 bug 越多
- 同一产品，版本越新，功能越多
- 不同产品，不同标准，不同实现方式
- 用到的网站
[浏览器市场份额](http://tongji.baidu.com/data/browser)
[caniuse.com](http://caniuse.com/) “查CSS属性兼容”
[browserhacks](http://browserhacks.com/) “查 Hack 的写法”

明白了为什么会有浏览器兼容问题，我们现在来说说浏览器兼容的思路：
1. 可行性分析：
产品的市场定位：例如，产品的受众群体、受众的浏览器比例、效果优先还是基本功能优先
产品的成本角度：有无必要做某件事，例如，有没有必要在IE6，7中使用圆角，阴影这些效果，而去花费大量成本。

2. 做到什么程度：
 - 让哪些浏览器支持哪些效果。

3. 如何做根据兼容需求选择技术框架/库(jQuery)
根据兼容需求选择兼容工具([html5shiv.js](https://github.com/aFarkas/html5shiv)、[respond.js](https://github.com/scottjehl/Respond)、[css reset](https://segmentfault.com/a/1190000003021766)、[normalize.css](https://github.com/necolas/normalize.css)、[Modernizr](https://github.com/Modernizr/Modernizr))
[postCSS](https://github.com/postcss/postcss)
条件注释、CSS Hack、js 能力检测做一些修补

4. 渐进增强和优雅降级
渐进增强
(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级
 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
[stackoverflow-渐进增强和优雅降级的区别](http://stackoverflow.com/questions/2550431/what-is-the-difference-between-progressive-enhancement-and-graceful-degradation)




3. 列举5种以上浏览器兼容的写法
---
1. 条件注释：
```html
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->

项目        范例                 说明
！     [if !IE]               非IE
lt    [if lt IE 5.5]          小于IE 5.5
lte     [if lte IE 6]         小于等于IE6
gt   [if gt IE 5]            大于 IE5
gte     [if gte IE 7]         大于等于IE7
|       [if (IE 6)|(IE 7)]     IE6或者IE7

属性选择器

box{
 color: red; 
_color: blue; /*ie6*/
 *color: pink; /*ie67*/ 
color: yellow\9; /*ie/edge 6-8*/
}

选择器前缀法

*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有效等等

条件注释结合类选择器整体优化

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

这样在CSS中就不用在属性前面加等一些乱七八糟的前缀*

利用Modernizr工具
Modernizr
当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。
参考文章
可以直接使用Modernizr在元素里生成的class名称，在你的css文件里定义相应的属性以便支持当前浏览器。例如，下面的代码，在支持shadow阴影的浏览器显示shadow，不支持的浏览器显示标准的边框：

.boxshadow #MyContainer { 
border: none;
 -webkit-box-shadow: #666 1px 1px 1px;
 -moz-box-shadow: #666 1px 1px 1px;
} 
.no-boxshadow #MyContainer {
 border: 2px solid black;
}

参考资料:史上最全的CSS hack方式一览

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

条件注释:是HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。条件注释最初于微软的 Internet Explorer 5浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于IE10停止支持。
IE Hack:针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程.
js 能力检测:不同浏览器支持的js方法不同，封装函数解决或对象解决兼容性问题
html5shiv.js:用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题
respond.js:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持媒体查询
css reset:将浏览器的默认样式全部去掉，就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
normalize.css:是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。保留有用的默认值，不同于许多 CSS 的重置；标准化的样式，适用范围广的元素；纠正错误和常见的浏览器的不一致性；一些细微的改进，提高了易用性；使用详细的注释来解释代码。
Modernizr: Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。
Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
工作原理
Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
postCSS: PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。
PostCSS 包括 CSS 解析器，CSS 节点树 API，一个源映射生成器和一个节点树 stringifier。
PostCSS是CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。

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

http://caniuse.com/

浏览器兼容自学问题搜集

1.什么是 CSS hack？

猜你喜欢

热点阅读