（圖示：如何將單個樣式表拆分成多個相關的樣式表）

　　一旦完成了上面的分離，就可以使用一點神奇的小手段來給過時的瀏覽器（比如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”的媒介類型樣式）。結果，用漸進增強的方式來處理所有媒介的細節討論，如果不寫成一本書的話，也得用上好多篇幅。然而請別沮喪：在移動世界里，差異正開始統一起來，并且一些非常聰明的人正開始將資源放在一起以幫助我們開發。不過，為了節約時間和節省精力，我們將集中于打印設備上。