（图示：如何将单个样式表拆分成多个相关的样式表）
一旦完成了上面的分离，就可以使用一点神奇的小手段来给过时的浏览器（比如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" />
在过去，很多开发者将media的值设为”screen”或”projection”, 以使得布局样式在Netscape 4.x上彻底失效（译注：Netscape 4.x不支持浮动和定位等复杂布局）。然而，有更好的解决方法。在详细讲解这个方法前，我们先来看看可选媒介类型（Alternate Media Types）。
可选媒介类型
渐进增强主要关注内容，我们要将“增强”的体验带到所有支持内容显示的设备上。因此需要考虑浏览器之外的设备，比如打印和移动设备就很重要。
糟糕地是，移动设备市场依旧四分五裂而且不成熟（不要天真地认为所有手持浏览器都会渲染目标为“screen”的媒介类型样式）。结果，用渐进增强的方式来处理所有媒介的细节讨论，如果不写成一本书的话，也得用上好多篇幅。然而请别沮丧：在移动世界里，差异正开始统一起来，并且一些非常聪明的人正开始将资源放在一起以帮助我们开发。不过，为了节约时间和节省精力，我们将集中于打印设备上。
