上面的条件注释使得IE7及其以下版本(译注:lte是less than or equal的缩写)能识别引入的样式。因此,当用IE7浏览页面时,将获取这些补丁。但是如果用的是新版本的IE——可能已经修复这些问题,比如IE8抛弃了hasLayout从而不再有这些问题——将忽略这些样式。另一方面,使用IE6可以获取到这些样式。这是很好的,因为在IE7中的渲染错误往往也存在于IE6中。上文中已经提及,IE7及其以下版本无法理解带媒介类型的@import,通过这种方式引入screen.css对IE7及其以下版本是无效的。因此,还需要在ie7.css文件的顶部添加不带媒介类型的@import语句来引入screen.css.
一旦为IE7添加完补丁,我会打开IE6, 看看是否需要随手打些补丁。如果确实需要,我会给文档添加另一个条件注释,引入ie6.css:
<!– [if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <[endif]–> <!– [if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <[endif]–>
接着,简单地将IE6需要的补丁添加到对应的样式表中,这些样式表将被IE7忽略,但是会依旧往下影响到IE5.5等版本。
通过这种方式使用条件注释,可以很轻松的管理项目中的目标浏览器,并使得CSS补丁文件保持独立自由。
其它考虑
CSS渐进增强并不局限于如何将样式表与文档关联起来,还可以应用在如何编写CSS上。
例如,考虑生成的内容(译注:比如用:after伪类生成的内容)。并非所有浏览器都支持,但这是一个很好的方法:可以用来添加一些额外的设计或文本。对于页面的可用性来说,这不是必须的,但这能提供一些视觉或其它方面上的增强。
拿简单的联系表单来举个例子:
(图示:此例中使用的HTML表单(代码将在下面给出))
当编写上面的HTML代码时,很可能会自然地将冒号(:)写在label元素里。为什么要这样做?真的给label元素添加了内容吗?并没有。这样做的目的是给用户提供额外的视觉线索,对label元素来说,这是多余的,应当去掉:
<form id="contact-form" action="#" method="post"> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /> </li> <li> <label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /> </li> <li> <label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" » cols="30"></textarea> </li> </ol> <button type="submit">Send It</button> </fieldset> </form>










