有多种方式可以将渐进增强融入到层叠样式表(Cascading Style Sheets, 简称CSS)的工作中,本文将讨论其中比较成功的一些,并考虑采用其它方式来逐步增强你的站点。
原文:Progressive Enhancement with CSS
作者: Aaron Gustafson
有多种方式可以将渐进增强融入到层叠样式表(Cascading Style Sheets, 简称CSS)的工作中,本文将讨论其中比较成功的一些,并考虑采用其它方式来逐步增强你的站点。 样式表的组织
如何在文档中引入样式表,很多Web设计者和开发者并没有想太多,但这其实是一门艺术。使用正确的方法,可以立即获得渐进增强的很多好处。 使用多个样式表
对样式进行稍许拆分可以带来很多好处。显而易见,超过1500行的样式表是有点难以维护的,将其拆分成多个样式表,可以改进工作流程(并节省你的精力)。还有一个好处很少提及:有助于在目标媒介类型(译注:指计算机、打印机、电视、手机等各种媒介类型)上获取更一致的呈现效果。
main.css文件包含了站点的所有样式规则,考虑将其拆分成包含版式、布局和颜色的独立样式表,相应地命名为:type.css, layout.css, color.css.
(图示:如何将单个样式表拆分成多个相关的样式表)
一旦完成了上面的分离,就可以使用一点神奇的小手段来给过时的浏览器(比如IE5/Mac)和很多对CSS布局缺乏有力支持的浏览器自动提供“低保真”的体验。怎么做呢?这完全取决你如何引入文件。假设通过link元素来引入main.css:
<link rel="stylesheet" type="text/css" href="main.css" />
首先,将上面一行引用拆分成三个相关的样式表:
<link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" />