说说CSS Hack 和向后兼容
发布时间:2010-05-17 13:11:00
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容,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 */
}
这种写法的优缺点是:
优点:易记;代码少
缺点:不全面
三、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个浏览器,也会更方便;
尽可能省资源
你要是不考虑页面加载速度,不考虑服务器承受能力的话,那在向后兼容和淘汰的处理上可以做得很完美(从代码上),但这从某种程度上,不如不做。
猜你喜欢
- 在编程时你一定碰到过时间触发的事件,在VB中有timer控件,而asp中没有,假如你要不停地查询数据库来等待一个返回结果的话,我想你一定知道
- 先看一下br怎么玩转“清除浮动”了。使用以下代码<br clear="all" />以下是代码效果演示:运行
- 今天淘到的,终于可以放心的使用IE7了,再也不用换回IE6做测试了!因为这个10M大小的软件已经包含了从IE3到IE6的版本,安装过程中可以
- myisam_max_[extra]_sort_file_size足够大delay_key_write减少io,提高写入性能bulk_ins
- 一、检测网络信息和系统信息 在Frontpage 2000 的Explorer管理器中选择帮助(Help)|关于Frontpage管理器(A
- 这是我上一篇关于安全的文章的其中一节。这是一个众所周知的事实,对你运行中的网站的MySQL数据库备份是极为重要的只需按照下面3步做,一切都在
- AJAX应用因为它们的表现力的丰富、更加互动和更加迅速的响应得到了赞扬声;这些优点都是通过使用XMLHttpRequest对象来动态的载入数
- 鉴于人手严重不足(当时算两个半人的资源),打消了逐个库手动去改的念头。当前的程序结构不允许搞革命的做法,只能搞搞改良,所以准备搞个自动化工具
- 来与大家分享。稍加改造就可以实现更强大的功能了。用下面的代码就可以简单的批量导出picasa相册的外链了。代码如下:<%@LANGUA
- ALTER DATABASE DATAFILEd:\ORANT\DATABASE\USER1ORCL.ORA RESIZE 10
- 在任何编辑器中,获取光标位置都是非常重要的,很多人可能认为较难,其实只要处理好浏览器的兼容,还是比较容易实现的。下面我们一起来看看如何获取到
- 如果你是一名Web Developer,而且还知道CSS Sprite这个词,请先去搜索一下,也许你正在使用这个技术,但只是不知道它的名字罢
- <%'该函数作用:按指定参数格式化显示时间。'numformat=1:将时间转化为yyyy-mm-dd h
- 有四个变量影响磁带备份设备的性能,并使 SQL Server 备份及还原性能操作得以在大体上随添加更多磁带设备而提高线性比例。◆软件数据块大
- 严格来说,Having并不需要一个子表,但没有子表的Having并没有实际意义。如果你只需要一个表,那么你可以用Where子句达到一切目的。
- 具体代码和说明如下:upload.asp<form action=http://<%= Request.&n
- Wordpress 2.6.2 出来了,今天将网站程序从2.6升级上来,比较了一下2个版本的代码,发现2.6的版本中的代码还有几个地方出现了
- 查看表空间的名称及大小代码如下:SQL>select t.tablespace_name, round(sum(bytes/(1024
- 如何干预执行计划 - - 使用hints提示基于代价的优化器是很聪明的,在绝大多数情况下它会选择正确的优化器,减轻了DBA的负担。但有时它也
- 在网站建设中,分类算法的应用非常的普遍。在设计一个电子商店时,要涉及到商品分类;在设计发布系统时,要涉及到栏目或者频道分类;在设计软件下载这