CSS样式表渐进增强的应用
|
原文：Progressive Enhancement with CSS
有多种方式可以将渐进增强融入到层叠样式表（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" /> 在过去，很多开发者将media的值设为”screen”或”projection”, 以使得布局样式在Netscape 4.x上彻底失效（译注：Netscape 4.x不支持浮动和定位等复杂布局）。然而，有更好的解决方法。在详细讲解这个方法前，我们先来看看可选媒介类型（Alternate Media Types）。 可选媒介类型渐进增强主要关注内容，我们要将“增强”的体验带到所有支持内容显示的设备上。因此需要考虑浏览器之外的设备，比如打印和移动设备就很重要。 糟糕地是，移动设备市场依旧四分五裂而且不成熟（不要天真地认为所有手持浏览器都会渲染目标为“screen”的媒介类型样式 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
