[让CSS更规范]文档类型、DOCTYPE切换和浏览器模式

摘自《精通CSS:高级Web标准解决方案》

DTD(文档类型定义)是一组机器可读的规则,它们定义XML或(X)HTML的特定版本中允许有什么,不允许有什么。在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD,因此知道要使用(X)HTML的哪个版本。

DOCTYPE声明是(X)HTML文档开头处的一行或两行代码,它描述使用哪个DTD。在下面的示例中,要使用的DTD是XHTML 1.0 Strict的DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DOCTYPE通常(但不总是)包含指定的DTD文件的URL。浏览器一般不读取这些文件,而是只识别常见的DOCTYPE声明。

1. 有效性检验

除了根据语义加标记之外,(X)HTML文档还需要用有效的代码来编写。如果代码是无效的,浏览器会尝试解释标记本身,有时候会产生错误的结果。更糟的是,如果发送具有正确的MIME类型的XHTML文档,理解XML的浏览器将不显示无效的页面。因为浏览器需要知道要使用的DTD才能正确地处理页面,所以对页面进行有效性检验要求有DOCTYPE声明。

可以使用W3C检验器检查(X)HTML是否是有效的,这是一个类似于检验器bookmarklet或Firefox Developer Extension的插件。许多(X)HTML编辑器现在内置了检验器,还可以在计算机上本地安装W3C检验器的副本。检验器会指出页面是否是有效的,如果是无效的页在,它还会指出原因是什么。

有效性检验很重要,因为它有助于找到代码中的bug。因此,尽早和经常进行有效性检验是个好习惯。但是,有效性检验太苛刻了,许多好页面由于很小的错误(比如&符号没有进行编码)或者因为遗留的内容而无法通过有效检验。所以,尽管有效性检验是很重要的,但是在现实世界中,需要一定程度的常识。

有各种代码检验工具。可以访问http://validator.w3.org/并且输入自己的URL来对自己的站点进行在线检验。但是,如果经常进行检验(这是个好习惯),那么每次都输入自己的URL有点儿麻烦。我使用一个方便的检验器bookmarklet(也称favelet),这是一小段可以存储在浏览器的书签或收藏夹中的JavaScript。单击这个书签就会触发JavaScript动作。对于检验器bookmarklet,它通过W3C检验器运行当前页面并显示结果。在我的个人站点(www.andybudd.com/bookmarklet)上可以找到这个检验器bookmarklet和其他许多方便的Web开发bookmarklet。

如果使用FireFox,那么可以下载和安装各种插件。在可用的大量检验器插件中,我个人喜欢的是Web Developers Extension插件。除了可以检验(X)HTML和CSS之外,它还可以执行许多其他有用的任务,比如描述各种(X)HTML)元素、关闭样式表以及在浏览器中编辑样式。可以从http://chrispederick.com/work/firefox/webdeveloper/下载Web Developers Extension,这是使用Firefox的CSS开发人员必须具备的插件。

还有一个用于IE6和更高版本的开发人员工具栏。可以从http://tinyurl.com/7mnyh下载这个工具栏。尽管它的特性不如Firefox工具栏那么丰富,但是仍然非常有用。

DOCTYPE声明除了对有效性检验很重要之外,浏览器还将它们用于另一个用途。

2. 浏览器模式

当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种表现模式:标准模式和怪异模式(quirks mode)。在标准模式中,浏览器根据规范表现页面;在怪异模式中,页面以一种比较宽松的向后兼容的方式显示。怪异模式通常模拟老式浏览器(比如Microsoft IE4和Netscape Navigator4)的行为以防止老站无法无作。

对于这两种模式之间的差异,最显著的例子涉及Windows上IE专有的框模型。在IE6出现时,在标准模式中使用正确的框模型,在怪异模式中使用老式的专有框模型。为了维持对IE5和更低版本的向后兼容性,Opera 7和更高版本也在怪异模式中使用有缺点的IE框模型。

表现方面的其他差异比较小,而且是与特定浏览器相关的,包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素,以及在使用关键字时将字号增加一级。

Mozilla和Safari还有第三种模式,称为“几乎标准的模式(almost standards mode)”,除了在处理表格的方式方面有一些细微的差异之外,这种模式与标准模式相同。

3. DOCTYPE切换

浏览器根据DOCTYPE是否存在以及使用的DTD来选择要使用的表现方法。如果XHTML文档包含形式完整DOCTYPE,那么它一般以标准模式表现。对于HTML 4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式表现,但是有过渡DTD而没有URL会导致页面以怪异模式表现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以怪异模式表现。

根据DOCTYPE是否存在选择表现方法的效果被称为DOCTYPE切换(DOCTYPE switching)或DOCTYPE侦测(DOCTYPE sniffing)。并非所有浏览器都采用这些规则,但是这些规则很好地说明了DOCTYPE切换的工作方式。Eric Meyer深入研究了这个主题,并且制作了一张图(http://meyerweb.com/eric/dom/dtype/dtype-grid.html)来说明不同的浏览器如何根据DOCTYPE声明选择表现方式。

DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS,如果选择了错误的DOCTYPE,那么页面就将以怪异模式表现,其表现就可能会有错误或不可预测。因此,一定要在站点的每个页面上包含形式完整的DOCTYPE声明,并且在使用HTML时选择严格的DTD。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3c.org/TR/html4/strict.dtd">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3c.org/TR/xhtml1/DTD/xhtml-strict.dtd">
 
  许多HTML编辑器会自动添加DOCTYPE声明。如果创建XHTML文档,它们还可能在DOCTYPE声明前面添加XML声明:

<?xml version="1.0" encoding="utf-8"?>

XML声明是XML文件使用的可选声明,它定义使用的XML版本和字符编码类型等设置。不幸的是,如果DOCTYPE声明不是页面上的第一个元素,那么IE6会自动切换到怪异模式。因此,除非要将页面用做XML文档,否则最好避免使用XML声明。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值