文献:http://www.verydemo.com/demo_c104_i3376.html
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容,CSS HACK自然而然地被我们想起。今天,我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以方便维护。而解决兼容的方法就是(必须是,因为这才最容易有问题的)其中一个最重要的、要解决的规范之一。
在解决兼容方法上,想定出一个统一的规范,个人认为应该以下面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 */
}
这种写法的优缺点是:
- 优点:易记,代码少
- 缺点:不全面
破洛洛文章简介:说说CSS Hack 和向后兼容. |
三、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年
你想现在的网站兼容IE10么,谁不想,但这可预见性太低了,也可以说,成本太高了。暂时没必要。不过,IE9可能要发布了,所以,选择像
padding:8px\0;
这样的IE8+的hack,在删掉其他代码不影响向后兼容上,会更好;并且,如果IE10出来,一旦支持这个hack,而又没有这个bug,可能删掉只影响2个浏览器,也会更方便;
3、尽可能省资源
你要是不考虑页面加载速度,不考虑服务器承受能力的话,那在向后兼容和淘汰的处理上可以做得很完美(从代码上),但这从某种程度上,不如不做。
破洛洛文章简介:说说CSS Hack 和向后兼容. |
五、个人推荐写法
其实可以纠结的还真多,这里结合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 */
[/css]
<p>然后,从第二种方式我们也可以发现。把IE注释用在body class上,而不是添加单独的<code><link /></code>或者<code>@import</code>会是更好的选择。虽然分文件也是一种不错的选择,但了为页面加载速度,HTTP请求一个都不能浪费。</p>
<p>至于利用JS或者后端程序来判断,除非你有足够的资源,除非你解决不了(90%不会发生),不然,并不推荐用。附上一个表(<a rel="nofollow" href="viahttp://paulirish.com/2009/browser-specific-css-hacks/">via</a>),可以参考参考:</p>
<h3>六:全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表:</h3>
[cc lang="css"]
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { 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了,但现实中情况有时候比想象中的复杂得多,给代码一个注释,好过千言万语。
最后,还是那句,希望看到你更好的方法
相关推荐
CSS Hack 不得不在一些项目中运用到
主要介绍了各种浏览器下的CSS Hack兼容性写法,CSS Hack大致可以分为内部Hack和选择器Hack以及HTML头部引用Hack,需要的朋友可以参考下
2. hack写法列表 1 3.在IE7+浏览器中按照IE7文档模式 1 4. 注意 Html头部的声明 2 二 IE下判断IE版本的语句 2 1. 直接案例 2 2. 语法 3 3. 注意事项 4 三 常见css的兼容性问题 4 1. IE6下float元素margin加倍 4 2. ...
各种浏览器的兼容性和CSS HACK的写法,让你不再为IE6和各种浏览器的兼容性发愁,非常方便!
CSS Hack的目的是兼容各种浏览器,然而IE总是个例外的存在,特别是IE8,而IE8又是Windows 7的IE的默认内置版本...偶然尝试出了仅针对IE8有效的CSS Hack猎奇写法,下面与大家分享一下:
由于各大浏览器尤其IE浏览器对web标准支持情况不一,导致标准的网页在各个浏览器中的表现不一,因此,解决各浏览器兼容性问题成为了前端工程师最重要的工作之一,而所谓的hack技术则是前端开发中必用的。 CSS hack...
本文将为你总结CSS针对各浏览器的兼容HACK(以IE6/IE7/IE8 /FF为主),以及IE特有的条件注释使用方法.
写页面设计的朋友们,经常为浏览器CSS的兼容性头痛不已,经过本人的仔细研究发现一种好的写法,现在与大家分享.
这个问题一直困扰我很久,不过,今天我终于搞明白了,也独创了一个能hack IE8、IE9、IE11这三个浏览器的代码写法模式,本文将与各位分享。 \9和\0为什么可能hack IE11\IE9\IE8无效? 可能很多人都略明白,\0是用来
浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点,ie8的出现就更头疼了,原来hack ie7的方法又不能用了,...
虽然和大家在一起学习各浏览器的Hack的写法,但我还是要说“Hack对于一位专业的前端攻程师来说并不是一样很好的东西,我力求处理浏览器兼容,尽量不使用Hack写法来处理,除非实在没有办法的情况下,再加以使用。...
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南...
一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<style>#wrapper{width: 100px!...
具体写法很容易: 复制代码代码如下: #someNode { position: fixed; #position: fixed; _position: fixed; } 第一排给Firefox以及其他浏览器看 第二排给IE7(可能以后的IE8、IE9也是如此,谁知道呢)看 第三排给IE...
项目中用的grunt-contrib-less, 写了以下less代码 复制代码代码如下: .mapfix{ position: fixed; top:10px; width: 430px;...执行less命令后,报错 开始以为是less不支持IE css hack,后发现是IE css