悟道Web标准:让W3C标准兼容终端(2)
作者:greengnn 来源:蓝色理想 发布时间:2009-10-11 16:40:00
其实上面所说的,也就是让W3C标准兼容终端,本应该终端按照W3C规范来开发解析器,但是种种的原意,终端各持己见,置W3C标准于不顾,而用户体验永远是第一位的。所以我们既然遵循标准,又要兼容终端。
我们不是标准的制定者,仅仅是实施者。就要考虑到项目的用户群体的特性,使用哪个终端多一点,显而易见,IE6的使用者仍然是大多数的。而且XHTML的严格定义方式不符合IE6的解析方式。通过权衡,即选择了W3C的推荐标准,虽然不是最新的,也兼容了现有终端的情况。
废话有点多了,概要的说明一下,选择一个适合项目大多数用户终端的标准,就HTML来说,4.0和xhtml1.0(改良后)都是不错的,但是要遵循HTML的结构化和语义化的要求,标签必须小写,闭合合理,嵌套正确,摒弃表现型标记,结构代码和表现代码分离。html1.0也可以编写成xml结构化的状态,即时没有xml声明。
CSS是最头疼的一块,如果严格按照W3C的css2.1规范,是很难兼容到IE系列浏览器的,特别是IE5.5 IE6两种,他们的解析和W3C相差甚远,所以CSS文件就必须进入hack,一种是css自身的私有属性和私有识别的代码,一种是IE浏览器特有的条件注释。细节就不多讲了。
如何既遵循标准,有兼容浏览器。那就是使用符合标准或者近似符合的浏览器作为主要开发软件,我建议安装有firebug插件的firefox作为第一个调试工具,等界面完成后,再调试其他浏览器,通过csshack或者条件注释,或者两者混搭。
理想的CSS兼容方案是,IE8,firefox这类通过Acid2 测试的浏览器使用标准的CSS代码,对没有通过测试的(就是IE系列)使用条件注释。例如:
<link rel="stylesheet" type="text/css" href="w3c.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie7lt.css" />
<![endif]-->
IE5.5的份额太少,可以考虑不兼容,兼容也主要是盒模型上的兼容。
理想的终究会存在很多现实的问题,比如IE的请求数过多,这是速度上的损失,代码维护不方面,同一个页面需要维护多个css文件,容易产生遗漏,避免这两个因素,css hack是做好的方式,主样式+私有样式解决兼容问题。
针对IE,常见bug的处理,haslayout的触发,放在标准CSS代码的后面。比如:
.clearfix:after{content:"\0020"; display:block; height:0; clear:both;}
.clearfix{*zoom:1;/*IE haslayout*/}
.box {float:left;margin-left:20px;_display:inline;/*双倍margin bug*/}
以后的浏览器对CSS的处理都采用W3C css2.1规范为主,私有属性为辅的策略,比如firefox的-moz-,IE8的-ms-,sefari和Chrome的-webkit-,Opera的-o-。
Javascript的标准兼容终端,我不是很清楚,基本的还可以看出,应用W3C的DOM操作文档树,而不是IE的document.all,摒弃IE的Jscript和VBscript。而且JS是可以去判断终端的,实例:
var ua = navigator.userAgent.toLowerCase();
var _isOpera = ua.indexOf('opera') != -1,
_isSafari = ua.indexOf('safari') != -1,
_isGecko = !_isOpera && !_isSafari && ua.indexOf('gecko') > -1,
_isIE = !_isOpera && ua.indexOf('msie') != -1,
_isIE6 = !_isOpera && ua.indexOf('msie 6') != -1,
_isIE7 = !_isOpera && ua.indexOf('msie 7') != -1;
通过终端的判断,给IE开小灶,解决IE 的兼容问题。
if (_isIE6) { // IE6
//语句
}
DHTML的历史远远大于现在所说的富客户端,很多经验组建都源自于早期的IE平台上的DHTML,如何保持JS主体代码的标准化和对IE系列的兼容,我自己还需要再积累积累。
最后,为什么很多团队要求将firefox作为开发环境,待代码完成后再进行IE系列的bug调试。就是基于这个思想,先按照W3C标准规范编码,再处理对标准支持不好的浏览器的。这样你才能理解为什么把IE的错误解析成为bug,而且页面工程师的教材也接近统一,那就是W3C的文档,那是我们权威的教材。向后,终端都尊重了W3C标准,IE8就是很好的例子。
猜你喜欢
- 1. 得到安全字符串,在查询中使用,过滤单引号。Function Get_SafeStr(str) &nb
- 如何显示最后十名来访者?代码和说明见下:<%Application.LockIF NOT isArray(&nbs
- Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScr
- reflow是个神奇的东西,之前Realazy说到过这个reflow,我摘出其中的重点:在CSS规范中有一个渲染对象的概念,通常用一个盒子(
- Request.ServerVariables里Server_Name与Http_Host之间有什么区别呢?如果不仔细看,您应该看不出它们之
- dssaa 问:求一个如奥运倒计时牌那样显示的倒计时程序突然想到这样的一个小程序,不知道能不能做,比如我要在我的主页上挂一个页面,上面只显示
- 下面就是解决方案: 1- From the command prompt, stop isqlplus: c:\>isqlplusct
- 创作思路:主要还是想尝试做点稍微不同于整天为迎合客户而做的东西.然后闲时就开始构思,比如坐车,走路什么的.看到有一些复古手机的相关图,就想到
- 那么,现在如果给出一个权限编号,要去检索出用后这个权限的用户集合,就会需要在逗号分隔的多个权限编号中去匹配给出的这个权限编号。如果使用lik
- Oracle :NvlNVL函数:NVL函数是将NULL值的字段转换成默认字段输出。NVL(expr1,expr2)expr1,需要转换的字
- 生成HTML方法主要步骤只有两个:一、获取要生成的html文件的内容二、将获取的html文件内容保存为html文件我在这里主要说明的只是第一
- 所谓天赋(左脑和右脑)也就是你是否有艺术天赋,天赋也许是存在的,这主要在于人类左右脑的分工。左脑主要负责逻辑理解、语言、判断、分类、分析、推
- strConnString = "driver={MySQL ODBC 3.51 
- 演示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
- © 版权符号显示不清楚,就是那个圈C,在某些网站上就是显示太小,看不清楚。一开始还以为是字体大小的原因,调大以后,还是一样
- 我想从文件读数据的话,要比直接从数据库快一些吧(个人观点),昨天测试了读出6000条新闻,读数据库用了23579毫秒,读文件只用了123毫秒
- 今天我和中国著名画家"渔人"谈了一个关于"怎样才能设计好"的问题,他给我说了一句话,得益不浅,那句话
- asp自定义错误显示方法:<html><head><meta http-equiv="Co
- 具体代码如下:Function ASTCreateFtpSite(IPAddress, RootDirectory,&n
- JavaScript Dom编程 学习书籍选择JavaScript Dom编程学习,很多朋友无疑对如何选择入门的书籍,比较头疼。或许也是他们