各种css hack - 兼容性探测

CSS HACK:浏览器兼容的一些写法
人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。
在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：
　　1.权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码
　　2.可维护：在资源成本和完美间平衡的向后兼容
　　3.可读：省力、易记
这里把成本放在了第一位，并不是说我们不愿意追求完美，而只是，太刻意追求完美有时候可能会阻碍我们前进；在成本后，应该是可维护和可读，这点对于团队的合作来说至关重要，而最终结果也是为了减少成本。
先把这三个原则存起来，来看看我们平时解决兼容的写法（后面会附详细的Hack方法列表）：
一、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:9px\9; /* all ie */ padding:8px\0; /* ie8-9 */ *padding:5px; /* ie6-7 */ +padding:7px; /* ie7 */ _padding:6px; /* ie6 */
}

这种写法的优缺点是：
优点：易记，代码少
缺点：不全面
三、IE 注释

<!--[if IE]>IE only<![endif]-->
<!--[if !IE]>NOT IE<![endif]-->

这种写法的优缺点是：
优点：安全；向后兼容好；易维护
缺点：用不好会增加HTTP请求；用得好代码又多
四、浏览器探测：JS/后端程序判断

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

这种写法的优缺点是：
优点：全面；易维护；可读性高
缺点：占资源；代码量大（要重写选择器）
上面4种是我们最常用的方法。现在，让我们抽出心里存着的那3个原则，看看如何选择。要时间思考一下么？这里简单地说一下我的选择：
1、尽量使用单独HACK
这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。比如，ie6的单独hack：

 _padding:6px;

2、向后兼容的目标：1年

padding:8px\0;

你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9可能要发布了，所以，选择像
这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响2个浏览器，也会更方便；
3、尽可能省资源
你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。
五、个人推荐写法
其实可以纠结的还真多，这里结合A-Grade浏览器的种类和HACK的种类，写两种个人认为比较合理的HACK和向后兼容相兼顾的写法，仅供大家参考的。
经济实惠型写法：注重单独的HACK。 IE的HACK比较多，选择省力易记的属性HACK；其他浏览器HACK少，选择块状的选择器HACK(推荐)

.sofish{ padding:10px; padding:9px\9; /* all ie */ padding:8px\0; /* 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:

<!--[if IE6]--><body class="ie6"><![endif]-->
<!--[if IE7]--><body class="ie7"><![endif]-->
<!--[if IE8]--><body class="ie8"><![endif]-->
<!--[if IE9]--><body class="ie9"><![endif]-->
<!--[if !IE]--><body class="non-ie"><![endif]-->

.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 */

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

[cc lang="css"]
/***** 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: blue\9; }/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

其他的就不多说了。不过，还是要提醒一下: 注释也是很重要的。虽然是HACK了，但现实中情况有时候比想象中的复杂得多，给代码一个注释，好过千言万语。
最后，还是那句，希望看到你更好的方法！
本文来自：支付宝UED

这里是hack兼容性的东东，其实是从这里来的

转载于:https://www.cnblogs.com/stonl/p/4291892.html

各种css hack - 兼容性探测相关推荐

对ie6、ie7、ff兼容性的详细css hack介绍
这个毛病把我憋了好久了,最近到底找到了解决滴方式,通过偶测试系完整ok滴,和大伙儿共享. 以下为引佣: 如今偶大多数全是用!important来hack,关于ie6和firefox测试可以正常卖弄,可 ...
CSS HACK：IE6、IE7、IE8、Firefox兼容性问题解决方案
CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案参考文章: (1)CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案 (2)https://www. ...
CSS HACK 区别 IE6、IE7、IE8、Firefox兼容性
转载链接:http://developer.51cto.com/art/201009/226787_1.htm 本文向大家描述一下如何使用CSS HACK区别IE6.IE7.IE8.Firefox兼容 ...
在网上找到一个CSS hack列表，记录在这里以分析css的浏览器兼容性
另外摘抄一份目前的css浏览器兼容问题汇总,记录在这里自己好好学习一下 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的 ...
CSS浏览器兼容性的4个解决方案：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件...
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...
兼容ffIE678 hack(IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例)
兼容ffIE678 hack(IE6.IE7.IE8.Firefox兼容性CSS HACK代码+示例) 1.区别IE和非IE浏览器CSS HACK代码 #divcss5{ background:blu ...
CSS的解决IE5/IE5.5/IE6/FF/IE7的兼容性问题(css hack)
之前找了几个不同版本的可独立运行的IE浏览器,正好拿来试试页面的兼容性问题.不试不知道,在IE6和FF中没问题的页面在IE5和IE5.5中乱成一团,一直听说IE5是WEB标准制作的一个"钉子 ...
CSS浏览器兼容性----Hack
CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器. 类内部Hack:比如 IE6能识别下划线&qu ...
css ie6,ie7,ie8 兼容性写法,CSS hack写法
margin-bottom:40px; /*ff的属性*/ margin-bottom:140px\9; /* IE6/7/8的属性 */ color:red\0; ...

各种css hack - 兼容性探测

各种css hack - 兼容性探测相关推荐

最新文章

热门文章