13.1 厂商前缀
尽管很多属于CSS3范畴的特性都还未进入W3C的候选推荐标准阶段(即相应的规范还未完成),但是它们中的大部分已经被Firefox、Internet Explore、Chrome、Safari和Opera的新版本实现了。
尚未完成的CSS实现是有可能发生变化的,为了应对这种情况,浏览器在实现一些CSS特性时使用了所谓的厂商前缀。这样,每个浏览器都可以引入自己的CSS属性支持方式,这种方式不会与最终的规范发生冲突,也不会与其他浏览器发生冲突。此外,厂商前缀还能确保将来规范成熟或定稿时,现有的使用实验性实现的网站不会崩溃。
每个主流浏览器都有其自身的前缀:
(1)-webkit-(Webkit/Safari/Chrome);
(2)-moz-(Firefox);
(3)-ms-(Internet Explore);
(4)-o-(Opera);
(5)-khtml-(Konqueror)。
它们放置在CSS属性名的前面,例如9.4.3节中介绍column-count属性时,写为-mozcolumn-count和-webkit-column-count。不过要记住的是,不必每次都使用全部前缀,在大多数情况下,只需要-moz-和-webkit-前缀。
尽管对需要包含的有前缀属性的顺序没有要求,但应该总是在最后包含该属性的无前缀版本,以保证未来仍然可用。这样,即便浏览器未来支持无前缀的属性,也不会产生中断的情况。例如:
在本章中可以看到,这样做意味着用较少的HTML,而用更多的CSS实现所需的效果。虽然厂商前缀通常会在CSS中造成大量的重复,但这只是前进路上的一点代价,同时也是Web专业人士已经普遍接受的代价,因为他们已经找到了使在代码中添加前缀的烦琐工作自动化的方法。例如使用CSS3 Generator(http://www.css3generator.com),选择属性和属性值,会自动生成需要书写的有前缀和无前缀的代码,这类型的工具可以简化创建这类属性的工作,减少输入,节约时间,如图13-1所示。
图13-1 CSS3 Generator工具