[翻译]标记语言和样式手册 Chapter 10 应用CSS（6）

使替换样式表发挥作用

太棒了.现在我们已经把替换样式表准备好了,随时可供使用.使用者要如何启动它们?不幸的是,很少浏览器具备替换样式表的内建功能,而Mozilla是具备这项功能的浏览器之一.

如果有替换样式表的话,浏览器视窗的左下角会出现一个小图标,Mozilla使用者可以点击这个图标,从选单中启动替换样式表(图10-3).

图10-3 Mozilla的替换样式表清单.

希望更多浏览器制造者能实现类似的功能,但是在那之前,还有另一种切换替换样式表的做法 -- 甚至能发挥cookies的魔力,保存下用户的选择.

Paul Sowden 在 A List Apart写了篇不可多得教学,题为"Alternative Style: Working With Alternate Style Sheets"(http://www.alistapart.com/articles/alternate/).在这篇文章里,他解释如何以一段JavaScript在浏览器内启动,关闭替换样式表.

切换动做由页面上的超链接完成,能根据title属性选用任何样式表.这段JavaScript会设定cookies记下使用者的最后一次选择,因此在使用者下次浏览网站时,除了预设样式表之外,也会启动正确的替换样式表.

举个例子,在编写这段内容时,我的个人网站提供了三种不同的配色方式,每种配色都能通过点击图标,呼叫Paul Sowden的script工作,第一个图标是预设值,而第二个,第三个图标则是两个提供不同配色方式的替换样式表(图10-4).

图10-4 点击图标,启动替换样式表

由于JavaScript是在使用者端执行的,因此切换动作会立刻生效,不需要重新读取整个页面,切换速度非常快.

完整的JavaScript程序可以到Paul Sowden在A List Apart撰写的文章下载(http://www.alistapart.com/articles/alternate/).

不止能调整字体大小

通过实验层叠作用,把特定的规则放在替换用样式表中,覆盖某些预设规则,就能在网站上做出一些十分有趣的互动效果,只需要用上简单的script与几条CSS规则,就算是小带宽也能带来大冲击.

DOM的好意

我们必须感谢另一个W3C标准,让我们能以script存取替换样式表,所谓的DOM,或称之为Document Object Model，推荐：苏沈小雨htmlDOM方法中文手册chm

其实是...恩,一起来看看W3C是怎么解释的:

文档对象模型是个与平台,语言无关的界面,主要是让程序与scripts能够动态存取修改文件内容,结构和样式.并且能够进一步处理文件,处理完成的结果会整合到显示的页面里头,这是W3C以及网络上其他DOM资源的概念.

听起来很熟悉,不是吗?这正是样式切换script所做的事情,动态存取,更新文件的样式设定.如果遵循W3C标准的话就能很轻松的办到,让开发者编写的script能够使用既定方式存取标记源代码的标签,如果努力编写符合标准的标记源代码,我们就能确保未来更容易撰写符合标准DOM的script,增强使用者浏览这些页面的体验.

样式切换script只触到了为DOM编写script的表面而已,但是这仍然是个以标准编写网页能获得很大好处的最佳示例.

结论

在这一章里,我们讨论了几种将CSS应用到标签,文档和整个网站的做法,同时也学会如何对老旧浏览器隐藏CSS,以及如何引用多重样式表.接着讨论了为不同支持程度的浏览器提供Lo-Fi和Hi-Fi样式表的做法,而不必编写scripts或是在服务器端侦测浏览器类型.

最后,学到了替换样式表,如何通过使用DOM编写JavaScript让使用者获得动态切换样式表的好处,允许使用者选择字体大小,色彩甚至是布局.

最后希望这些技巧能让你在设计样式的时候顺利起步!

阅读下一章：[翻译]标记语言和样式手册 Chapter 11 打印样式