Netscape 4 (NN4)是第一款尝试提供有意义的的级联样式表(CSS)支持的浏览器。但是,它的CSS实现存在严重缺陷。在其他浏览器中能正确呈现的有效CSS样式表在NN4中往往产生完全不同的结果。所以,经常都要为NN4提供不同的样式规则,才能获得令人能够接受的结果。
在NN4用户占主流的年代,网站设计师需要耗费极大精力为这一款浏览器创建网页和样式表的特殊版本。现在,NN4用户群已显著缩水,只有少数设计师才会专为这一款浏览器设计网页。但无论如何,你仍然需要为NN4提供备用样式,才能使你的网页在它上面保持最低限度的可读性。
加载单独的样式表
如果使用外部样式表,为了解决与NN4的兼容问题,最简单的方式之一就是为NN4单独创建一个样式表,并为其他浏览器创建另一个样式表。可用一个脚本来检测浏览器的版本,并根据需要切换样式表。
然而,还有一个简单的技术可以避免使用脚本。具体就是为NN4加载一个样式表,再用为其他浏览器而设计的另一个样式表来替换它。由于NN4在处理外部样式表时的一个缺陷,虽然其他浏览器能正确加载并使用第二个样式表,但NN4根本不理会第二个样式表的存在。
这个技术基于一个简单的事实:所有浏览器都理解怎样链接一个外部样式表,惟一例外的就是NN4。它会忽略用于加载一个外部样式表的@import技术。因此,使用以下代码,就能加载你希望NN4使用的样式:
<link href="nn4styles.css" rel="stylesheet" type="text/css" />
然后,可使用如下所示的代码来加载另一个样式表(其中包含用于其他浏览器的样式):
<style type="text/css" media="all">
@import url(otherstyles.css);
</style>
由于导入的样式表位于链接的样式表之后,所以它的样式会覆盖并替换链接样式表中的样式。NN4对那些样式视若无睹,新的浏览器则能正确加载它们。
在NN4面前隐藏一个样式
如果你不想为NN4创建一个完全独立的样式,但仍然需要处理某些有问题的样式或规则,就可利用NN4的另一个缺陷在NN4面前隐藏CSS样式表的某一部分。这个技术称为Caio hack,它利用NN4在解释CSS注释时的缺陷来防止NN4处理一些代码;但是,其他浏览器能够看到并能正常处理这些代码。
/*标记一个CSS注释的开始,*/则标记注释结束。两者之间的一一后器起始标记,g r 切都是注释,会被浏览器忽略。然而,NN4会对注释标记内部出现的一个斜杠感到迷惑,比如/*/*/。在这种情况下,NN4会错误地识别注释的结尾,并忽略/*/*/之后的任何代码,直到遇到另一个注释结束标记。所以,利用以下代码,就能在NN4面前隐藏一部分CSS:
/*/*/ invisible to nn4 /* */
对于上述代码,大多数浏览器看到的都是一条完整的注释,后跟常规的指令,再是另一个完整的注释。相反,NN4在看到/*/*/时会进入注释模式,并认为它之后的所有东西都是注释,直到遇到第二个注释结束标记*/(注意第二对注释标记之间的空格)。所以,两个注释之间的一切都会在NN4面前隐藏。它可以是一个CSS规则声明的一部分,也可以是一个完整的样式表,只要两者之间没有其他注释。
提供只有NN4才能识别的样式
稍微修改一下Caio hack,就能在其他所有浏览器面前隐藏部分CSS,只有NN4才能正常识别它,如下所示:
/*/*/ /*/ nn4 only /* */
其中的关键在于,NN4和其他浏览器以不同的方式来响应第一条注释之后的/*/。NN4仍然处于注释模式,并忽略第一个正斜杠(/),但认为星号加正斜杠(*/)是一个注释结束标记。因此,NN4能正常处理后续代码。
其他浏览器则认为/*/*/是一条完整注释,并认为正斜杠加星号(/*)是注释起始标记,同时忽略后续的正斜杠以及后续的文本。最后是用空格分隔的一对完整注释标记,它使一切都恢复同步。但这一次,只有NN4才能正确识别所有成对标记,其他浏览器会忽略注释结束标记之前的一切。
人们已经越来越少地针对NN4而设计特殊的CSS代码,但它目前还没有完全消失。本文讲述的技术便于你分别为NN4和其他浏览器提供不同的样式,使网页在所有浏览器上都能正确呈现。
Michael Meadhra自Web问世之初便涉足IT行业,目前已出版了30多本书,其中包括How to Do Everything with Dreamweaver MX。( Osborne/McGraw-Hill出版)。
周靖最初从事计算机硬件行业,后专注于计算机资料翻译,迄今已有10年的翻译经验,代表作包括即将问世的《C++问题求解第4版》。