看看下面这段代码,是否倍感亲切但又觉得很陌生呢:
.test {
background-color: black; /* firefox, opera, ie8 */
[;background-color: green;] /* safari, chrome */
*background-color: blue; /* ie7 */
_background-color: red; /* ie6 */
}
html*~/**/body .test {
border: 5px solid red; /* ie8 */
}
随着浏览器的更新换代,CSS Hack 变得越来越诡异和不可靠了-.-
相对来说,IE 的条件注释是值得信赖的:
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->>
<!--[if !IE]>--><body><!--<![endif]-->
<style type="text/css">
body.ie6 .test { background-color: blue }
body.ie7 .test { background-color: red }
body.ie8 .test { background-color: green }
</style>
注意,上面的代码虽然也是 hack,但大大简化和规范了 css hack 的写法。
最近看 ExtCore 3.0 的代码,发现 Ext 初始化时会自动给 body 添加浏览器信息:
//Initialize doc classes
(function(){
var initExtCss = function(){
// find the body element
var bd = document.body || document.getElementsByTagName('body')[0];
if(!bd){ return false; }
var cls = [' ',
Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))
: Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
: Ext.isOpera ? "ext-opera"
: Ext.isWebKit ? "ext-webkit" : ""];
if(Ext.isSafari){
cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4')));
}else if(Ext.isChrome){
cls.push("ext-chrome");
}
if(Ext.isMac){
cls.push("ext-mac");
}
if(Ext.isLinux){
cls.push("ext-linux");
}
if(Ext.isBorderBox){
cls.push('ext-border-box');
}
if(Ext.isStrict){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
var p = bd.parentNode;
if(p){
p.className += ' ext-strict';
}
}
bd.className += cls.join(' ');
return true;
}
if(!initExtCss()){
Ext.onReady(initExtCss);
}
})();
比如在 IE8 下,会添加以下信息:
将浏览器信息添加到 body 和 html 上后,我们书写 CSS Hack 就会变得很容易了。
通过 JS 添加浏览器信息,需要将 JS 放在头部执行,以确保渲染前就添加好。另外,对于不支持 JS 的用户代理,此方法无效。
还有一个方案是在服务器端处理,比如 browscap 方案。优点的是没有 JS 方案的缺点,缺点是遇上 proxy cache 就不准确了。
个人觉得 JS 方案可行。因为禁用 JS 的浏览器用户,自身已是高手,不用我们担心。对于不支持 JS 的用户代理,比如手机等浏览器,则有对应的 WAP 版本给用户使用。这样,我们可以:
- 在 head 部分加载一个非常小巧精简的 js,该 js 在 body 可用时,能立刻给 body 添加浏览器信息。
- 在 css 里,通过
body.ie6 .test { ... }
来书写 css hack
这样,无论浏览器如何更新换代,我们都不必去记忆或发掘那一堆诡异的 css hack 的写法了。
分享到:
相关推荐
杂文 never say goodbye to learn
Never Say Goodbye-Baby VOXNever Say Goodbye-Baby VOXNever Say Goodbye-Baby VOXNever Say Goodbye-Baby VOXNever Say Goodbye-Baby VOXNever Say Goodbye-Baby VOXNever Say Goodbye-Baby VOXNever Say Goodbye-...
Goodbye Greenscreen(智能抠图插件)是一款专业的AE人工智能背景遮罩抠像颜色键控插件。这款软件它基于人工智能,使用这款插件后软件可以进行更加复杂的背景抠图和纯色背景抠图。可以从视频和干净的背景中创建遮罩,...
数学建模-A76271-Wave Goodbye to Poor Reception.zip
和盗版产品说再见(fare goodbye to pirated product).docx
Goodbye
老外教你说英语第一课say hello and goodbye
Moving To Linux Kiss The Blue Screen Of Death Goodbye 2004
linux_lvs永志不谕 Time To Say Goodbye_there for me for love_happay.rar linux_lvs永志不谕 Time To Say Goodbye_there for me for love_happay.rar
linux下十分好用的摄像头驱动
美国大学生数学竞赛获奖论文,历届,单项文件,内容丰富,大学生数学,数学竞赛,参考资料,极具参考价值
开源项目-TheCodeTeam-goodbye.zip,Hello Goodbye, a simple lib for running code when a program exits
Moving to Linux®: Kiss the Blue Screen of Death Goodbye! Second Edition By Marcel Gagné ............................................... Publisher: Addison Wesley Professional Pub Date: August 01...
大一高英unit1 《never say goodbye》说课稿.docx
小学英语 3AUnit4 Goodbye教案 苏教牛津版.doc
react-goodbye是一个保存提醒实用程序,可以防止在离开之前进行路由转换而不保存更改。 请查看页面以获取更多信息。 安装 npm install --save react-goodbye 或者您可以使用yarn : yarn add react-goodbye ...
css样式 good example
关于klt算法的一篇重要论文,Jianbo Shi and Carlo Tomasi. Good Features to Track. IEEE Conference on Computer Vision and Pattern Recognition, pages 593-600, 1994.
该文档来自Jerome在2014 Container技术大会的演讲。