CSS Hack 和向后兼容-白红宇

CSS Hack 和向后兼容

阅读量：5990 次

发布时间：2019-06-20

本文共 5287 字，大约阅读时间需要 17 分钟。

人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。

在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：

权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码

可维护：在资源成本和完美间平衡的向后兼容

可读：省力、易记

一、CSS 选择器 Hack

/* Opera */@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){head~body .sofish{display:block;}}

这种写法的优缺点是：

优点：全面，各种HACK都有；清理无用代码里易认

缺点：选择器名称不易记；代码量多（要重复写选择器）

二、css属性Hack

.sofish{        padding:10px;        padding:9px9; /* all ie */        padding:8px0; /* ie8-9 */        *padding:5px; /* ie6-7 */        +padding:7px; /* ie7 */        _padding:6px; /* ie6 */}

这种写法的优缺点是：

优点：易记；代码少

缺点：不全面

注：IE都能识别*标准浏览器(如FF)不能识别*
IE6能识别*，但不能识别 !important
IE7能识别*，也能识别!important
FF不能识别*，但能识别!important

另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。(推荐.我这只有这个有效！)

三、IE注释

这种写法的优缺点是：

优点：安全；向后兼容好；易维护

缺点：用不好会增加HTTP请求；用得好代码又多

四、浏览器探测：JS/后端程序判断

// 以jQuery为例，检测是否是IE6，是则加上class="ie6"if ($.browser.msie && $.browser.version = 6 ){     $('div').addClass('ie6');}

这种写法的优缺点是：

优点：全面；易维护；可读性高

缺点：占资源；代码量大（要重写选择器）

上面4种是我们最常用的方法。现在，让我们抽出心里存着的那3个原则，看看如何选择。要时间思考一下么？这里简单地说一下我的选择：

尽量使用单独HACK
这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。比如，ie6的单独hack：_padding:6px;；

向后兼容的目标：1年
你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9可能要发布了，所以，选择像padding:8px;这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响2个浏览器，也会更方便；
尽可能省资源

你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。

五、个人推荐写法

经济实惠型写法：注重单独的HACK。 IE的HACK比较多，选择省力易记的属性HACK；其他浏览器HACK少，选择块状的选择器HACK(推荐)

.sofish{        padding:10px;        padding:9px9; /* all ie */        padding:8px0; /* ie8-9 目前应用于IE8的单独hack，情况比较少 */        *padding:5px; /* ie6-7 */        +padding:7px; /* ie7 */        _padding:6px; /* ie6 */}/* webkit and opera */@media all and (min-width: 0px){ .sofish{padding:11px;} }/* webkit */@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }/* opera */@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }/* firefox * /@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */

准完美主义写法：配合IE注释，一律采用选择器HACK（选择性推荐）

HTML: 添加body class

.sofish{padding:10px;}.non-ie .sofish{padding:12px;}.ie9 .sofish{padding:9px;}.ie8 .sofish{padding:8px;}.ie7 .sofish{padding:7px;}.ie6 .sofish{padding:6px;}                         /* webkit and opera */@media all and (min-width: 0px){ .sofish{padding:11px;} }                         /* webkit */@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }                         /* opera */@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }                         /* firefox * /@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */

然后，从第二种方式我们也可以发现。把IE注释用在body class上，而不是添加单独的<link />或者@import会是更好的选择。虽然分文件也是一种不错的选择，但了为页面加载速度，HTTP请求一个都不能浪费。

至于利用JS或者后端程序来判断，除非你有足够的资源，除非你解决不了（90%不会发生），不然，并不推荐用。附上一个表（），可以参考参考：

六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：

/***** Selector Hacks ******//* IE6 and below */* html #uno  { color: red }      /* IE7 */*:first-child+html #dos { color: red }       /* IE7, FF, Saf, Opera  */html>body #tres { color: red }      /* IE8, FF, Saf, Opera (Everything but IE 6,7) */html>/**/body #cuatro { color: red }      /* Opera 9.27 and below, safari 2 */html:first-child #cinco { color: red }      /* Safari 2-3 */html[xmlns*=""] body:last-child #seis { color: red }      /* safari 3+, chrome 1+, opera9+, ff 3.5+ */body:nth-of-type(1) #siete { color: red }      /* safari 3+, chrome 1+, opera9+, ff 3.5+ */body:first-of-type #ocho {  color: red }      /* saf3+, chrome1+ */@media screen and (-webkit-min-device-pixel-ratio:0) {        #diez  { color: red  }}      /* iPhone / mobile webkit */@media screen and (max-device-width: 480px) {        #veintiseis { color: red  }}      /* Safari 2 - 3.1 */html[xmlns*=""]:root #trece  { color: red  }      /* Safari 2 - 3.1, Opera 9.25 */*|html[xmlns*=""] #catorce { color: red  }      /* Everything but IE6-8 */:root *> #quince { color: red  }      /* IE7 */*+html #dieciocho {  color: red }      /* Firefox only. 1+ */#veinticuatro,  x:-moz-any-link  { color: red }      /* Firefox 3.0+ */#veinticinco,  x:-moz-any-link, x:default  { color: red  }            /***** Attribute Hacks ******//* IE6 */#once { _color: blue }      /* IE6, IE7 */#doce { *color: blue; /* or #color: blue */ }      /* Everything but IE6 */#diecisiete { color/**/: blue }      /* IE6, IE7, IE8 */#diecinueve { color: blue9; }      /* IE7, IE8 */#veinte { color/***/: blue9; }      /* IE6, IE7 -- acts as an !important */#veintesiete { color: blue !ie; } /* string after ! can be anything */

CSS Hack 虽好且方便兼容各浏览器，但是通不过 W3C 验证，所以还得自己权衡是否有必要去使用。能不用尽量不用吧！

转载于:https://blog.51cto.com/xhtml/1411151

你可能感兴趣的文章