CSS Hack 和向后兼容
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容,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注释
<!--[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个原则,看看如何选择。要时间思考一下么?这里简单地说一下我的选择:
尽量使用单独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
<!--[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 */
然后,从第二种方式我们也可以发现。把IE注释用在body class上,而不是添加单独的<link />
或者@import
会是更好的选择。虽然分文件也是一种不错的选择,但了为页面加载速度,HTTP请求一个都不能浪费。
至于利用JS或者后端程序来判断,除非你有足够的资源,除非你解决不了(90%不会发生),不然,并不推荐用。附上一个表(via),可以参考参考:
六:全面的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
CSS Hack 和向后兼容相关推荐
- 【荐】说说CSS Hack 和向后兼容
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...
- css hack *html,css hack 大全 各个浏览器的css
各个浏览器的css hack区别属性: IE6: _zoom:1; IE6/7: *zoom:1; IE6/7/8/9 :\9 各个浏览器的css hack区别规则 IE6: *html{} IE7: ...
- 各种css hack - 兼容性探测
CSS HACK:浏览器兼容的一些写法 人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说到浏览器兼容,C ...
- 【总结】IE6,IE7,IE8,Firefox兼容的css hack 补充!
IE6,IE7,IE8,Firefox兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-co ...
- CSS hack浏览器兼容一览表
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助. 屏蔽IE浏览 ...
- html网页改兼容模型,浏览器兼容、CSS hack、normalize.css及盒模型基础知识问答
一.问题(一).如何调试 IE 浏览器 1.对于IE7及以下版本可采用IETester(不能测脚本,模拟出来的IE6平台与真实的IE6还是有差异的,结果不完全可靠).Expression Web Su ...
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...
- CSS 兼容浏览器的方法 CSS Hack
开发人员基本都知道,CSS的开发本身并不难,但是,当在不同的浏览器下测试代码时,困难就出现了.浏览器的 bug 和不一致的显示方式,是大多数CSS开发人员面临的主要难题,你的设计在一种浏览器上看起来很 ...
- css hack *html,HTML_CSS Hack整理,CSS Hack是在标准CSS没办法兼容 - phpStudy
CSS Hack整理 CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务. 我进行前端开发的时候 ...
最新文章
- 这所211大学,实力强悍,适合“踩线生”报考!
- Android 中文API(86)——ResourceCursorAdapter
- win10系统安装Redis3.2.100
- 推荐系统的构建:从经典到深度学习方法
- ref的mysql_ref:Mysql授权远程登陆
- AC自动机:多模式串匹配实现敏感词过滤
- 3_03 蛇形填数(数组)
- distcc 链接失败_distcc分布式编译时,icu host程序偶现编译失败原因分析
- git PHP commit 规范,git commit 时自动对所有 php 文件执行语法错误检查
- ^全^ 获取SQL SERVER2000/2005、MySql、Oracle元数据的SQL语句 [SQL语句来自CodeSmith]
- c语言跑马灯循环三次停止,跑马灯代码 连续不间断的跑马灯的代码(js)
- Lenovo ServerGuide 10.4
- 解三对角矩阵以及循环三对角矩阵方程的数值计算方法
- 行人重识别论文阅读7-基于图卷积的行人骨架识别
- 【MySQL】SHOW ENGINE INNODB STATUS \G之Pages flushed up to的理解
- 使用CA签发的服务器证书搭建Tomcat双向SSL认证服务(转)
- 翻转单词顺序(python)
- 药明康德2020年营业收入165.35亿元,同比增长28.5%
- 2014年禁毒工作总结,2015年工作打算
- python 函数 求绝对值 abs()