CSS样式表渐进增强的应用

<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>

通过生成内容来将冒号添加回文档，这是一种更完美合适的方式：

label:after { content: ":"; }

用这种方式来编写表单，给了我们灵活性：当需要从整个站点移除装饰字符时，只要简单的编辑CSS文件，而不需要去寻找每一个表单（虽然我们曾经知道在哪）。这个技巧也能够很好降级，因为没有冒号时，表单并不会被渲染得无法使用——这是渐进增强的一个绝佳例子。

也许你已经发现，使用高级CSS选择符（译注：selector, 也有译为选择器的，但我觉得选择符更能体现本意，比如operator翻译成运算符，而不是运算器），可以将特定的样式附加到更多高级浏览器上，这有助于逐步增强站点。一个很好的例子是属性选择符，在IE6及其同一时代以及更早的浏览器中不能被理解（因此也就被忽略了）。Egor Kloos很漂亮地运用了这个概念，在CSS禅意花园（CSS Zen Garden）上提交了名为”双双”（Gemination）的作品：

（图示：Egor Kloos的CSS禅意花园作品（“双双”）在标准浏览器和IE6中的呈现对比）

他是怎样做到的？下面是略加修改的示例代码：

body { margin: 0; text-align: center; background: #600 none; } body[id=css-zen-garden] { margin: 100px 0 0; padding: 0; text-align: center; backgro

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!