- 浏览: 400006 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
goahead2010:
有用
JS遍历对象或者数组 -
bishibaodian:
不要在这样找笔试题了,一次就这么几个,还没过瘾就没有了,去安装 ...
整理了一份招PHP高级工程师的面试题 -
smallearth:
不错
整理了一份招PHP高级工程师的面试题 -
ipodao:
暂时没发现啊!
IE域名带有下划线导致的session丢失 -
ipodao:
谢了
JS遍历对象或者数组
在解决兼容方法上,想定出一个统一的规范,个人认为应该以下面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个原则,看看如何选择。要时间思考一下么?这里简单地说一下我的选择:
尽量使用单独HACK
这样维护起来成本比较低,改动不会影响其他的浏览器,而一旦有浏览器淘汰,只要搜索关键字,就可以批量去掉这些代码。比如,ie6的单独hack:_padding:6px;;
向后兼容的目标:1年
你想现在的网站兼容IE10么,谁不想,但这可预见性太低了,也可以说,成本太高了。暂时没必要。不过,IE9可能要发布了,所以,选择像padding:8px\0;这样的IE8+的hack,在删掉其他代码不影响向后兼容上,会更好;并且,如果IE10出来,一旦支持这个hack,而又没有这个bug,可能删掉只影响2个浏览器,也会更方便;
尽可能省资源
你要是不考虑页面加载速度,不考虑服务器承受能力的话,那在向后兼容和淘汰的处理上可以做得很完美(从代码上),但这从某种程度上,不如不做。
五、个人推荐写法
其实可以纠结的还真多,这里结合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 */
然后,从第二种方式我们也可以发现。把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: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
其他的就不多说了。不过,还是要提醒一下: 注释也是很重要的。虽然是HACK了,但现实中情况有时候比想象中的复杂得多,给代码一个注释,好过千言万语。
最后,还是那句,希望看到你更好的方法!
发表评论
-
年月日三级联动菜单
2012-09-05 16:01 1636<html xmlns="http:// ... -
javascript中创建对象的几种方式
2012-09-05 13:25 969随着web 2.0 的兴起(最具代表性的是Aja ... -
清除js缓存
2012-07-20 18:26 5259客户端有一个HTML文件,是用来提交输入信息的.但问 ... -
JS操作cookie
2012-07-20 16:56 873var Cookie=new Object(); C ... -
iframe下的cookie设置
2012-07-11 22:05 1818http://viralpatel.net/blogs/how ... -
IE域名带有下划线导致的session丢失
2012-07-11 22:01 1478IE下如果域名包含_ 则会导致之前session存入的信息丢失 ... -
Iframe父页面和子页面之间的JS调用
2012-07-11 21:59 19581.index.html <!DOCTYPE h ... -
CSS3的一些特效
2012-04-25 14:28 700http://www.cnblogs.com/damonlan ... -
js中undefined,null,NaN的区别
2012-03-31 11:25 33161.类型分析: js中的数据类型有undefined, ... -
jQuery---循环滚动新闻列表
2012-03-09 11:29 882Demo1:http://www.cssrain.cn/dem ... -
html提交表单中input image和img
2012-02-29 18:16 163351.<input type="image&qu ... -
DTD文件定义
2012-02-29 22:27 833DTD文件定义 一个DT ... -
doctype声明、浏览器的标准、怪异等模式
2012-02-08 22:26 1726群里看到一个面试题,doctype 标准(严格)模式(S ... -
Javascript正则表达式
2012-02-07 22:13 723创建一个正则表达 ... -
HTTP协议
2012-02-01 16:29 881引言 HTTP协议我想任何IT 人士都耳熟能详了 ... -
Zend Studio中安装Aptana及几个配置说明
2012-01-29 11:51 929Zend Studio加Aptana的完美结合.我想,无 ... -
10 个很棒的 jQuery 代码片段
2011-11-25 17:42 816图片预加载 (function($) { var ca ... -
HTTP session cookie原理及应用
2011-09-24 14:55 2109PHP 的COOKIE coo ... -
CSS子选择器
2011-09-14 17:04 885<html> <head> < ... -
ajax提交表单
2011-09-14 17:02 880示例代码如下: <html> <he ...
相关推荐
CSS Hack兼容大全,令网页能正常显示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器上
简单CSShack:区分IE6、IE7、IE8、Firefox、Opera().pdf
仅 Firefox 3 和 IE7 识别的 Hack。 1、仅 Safari 和 Opera 识别的 Hack @media all and (min-width: 0px){/* Safari and Opera rules here */} 或者 @media screen and (-webkit-min-device-pixel-ratio:0) {/* ...
browser-hack-sass-mixins:浏览器hack sass mixin-将SCSS应用于特定的浏览器-CSS hacks:IE,Chrome,Firefox,Edge,Opera
知道CSS的朋友一定听说过CSS hack,现在的浏览器IE、Firefox、Chrome、Opera、Safari。。。百家争鸣,可苦了Web前端开发人员了。
今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器
什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一...
important就能够零丁给firefox做hack了,可是此刻多了ie八、opera、chrome等这些个所说的规范浏览器后,firefox能熟悉的工具它们都熟悉,偏生firefox有个致命的bug就是不撑持input的line-height属性,于是我又犯合计了,...
CSS类级别的hack仅IE7识别 *+html {…} IE6及IE6以下识别 * html {…} opera、safari、chrome识别: @media all and (min-width: 0px){…} //Firefox3.0.6不识别,但Firefox3.6也识别该规则,如果Firefox版本有...
——IE6—— IE7————IE8——FF2————FF3——— Opera9.5>property—— Y———— Y———— Y———— N———— N———— N.... /*用于Opera、Firefox2、Firefox3等现代浏览器*/ >color:green !important;
该技巧经主流浏览器测试:Firefox, Safari, Opera, 以及Internet Explorer 6。 好处 这是一个纯CSS技巧,无需JS或Flash。它兼容主流浏览器包括IE6 (需要使用PNG hack)。 它对于设计标题是很完美的。你无需使用...
基于jquery做的网页版仿苹果系统导航菜单,效果非常流畅 华丽 不解释。。。 用法: 在页面头部标签<head></head>中加入下面的代码 ...我已经在IE 6, IE 7, Opera 9, Firefox 2, Firefox 3 and Safari 2上测试通过。
向上融科前端代码规范浏览器测试与支持我们支持的浏览器为:IE8 +, Chrome, FireFox, Opera, 360浏览器, QQ 浏览器, 猎豹浏览器。渐进退化,产品在 Chrome 及国内的 Chromium 内核浏览器上的体验应该做到最好,包括...
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化...
支持三级嵌套选项卡。 重用性极高,在IE6+,Firefox2+,Opera9中均能正常工作,且并没有使用hack。 灵活性也很高。
懒:Kule Lazy4 CSS框架
urbrowser:发现用户的平台,系统以及浏览器