css3元素私有前缀及其用法

在CSS3模块标准尚未被W3C批准或者标准所提议的特性尚未被浏览器完全实现时，浏览器厂商会使用所谓的私有前缀来测试“试验性的”CSS 特性。这样，浏览器设计者实现了 CSS3的新模块，但对使用 CSS3的开发者来说则很繁琐。看看 CSS3中实现圆角的代码：

.round{-khtml-border-radius: 10px; /* Konqueror */-rim-border-radius: 10px; /* RIM */-ms-border-radius: 10px; /* Microsoft */-o-border-radius: 10px; /* Opera */-moz-border-radius: 10px; /* Mozilla (如 Firefox) */-webkit-border-radius: 10px; /* Webkit (如 Safari 和 Chrome) */border-radius: 10px; /* W3C */}

你可以看到一组私有前缀属性（这个列表还不是很全面） ，每一个都有其独有的前缀字符串， 如 -webkit- 是针对Webkit核心浏览器， -ms- 是微软的私有前缀所以针对的是Internet Explorer，等等。CSS的工作方式是浏览器逐行下载样式表，应用其可识别的属性，忽略其无法识别的属性。
此外，样式表中后出现的属性优先级高于之前出现的同名属性。正是由于这种层叠，我们就可以先列出私有前缀属性，最后使用无前缀的属性来修正，以确保当该特性被完全实现时，浏览器会运行正确的效果，而不是之前的特定浏览器的试验性效果。
挨个列出每一种私有前缀是最理想的做法，但实际开发中很少有人那样做。相反，他们要么只指定自己期望的浏览器，要么在编写规则之前已经检查过哪些浏览器支持该特性。
例如，你可以仅写如下代码：

.round{-moz-border-radius: 10px; /* Mozilla (e.g Firefox) */-webkit-border-radius: 10px; /* Webkit (e.g. Safari and Chrome) */border-radius: 10px; /* W3C */}

这样写会覆盖 Firefox、Chrome和 Safari，以及任何已经完全实现了该规则的浏览器。我知道你在想什么，对同一个属性写多个私有前缀声明是否会造成代码臃肿？确实会有那么一点。但无论追加多少前缀属性，相对于图片而言，这仍然是一个更加快速、优雅且健壮的解决方案。
在讨论网站应用之前，最好先看看当前浏览器使用率的分布情况。这样做会让我们对支持哪些浏览器更胸有成竹。例如，如果时间和预算都很紧张，你可能会决定不对任何在你的网站上使用率小于 3%的浏览器提供私有前缀支持。此时你需要根据一组数据来做判断。
现在我们知道了前缀的来源，以及如何在规则中应用它。接下来我们看一些快速而有效的 CSS3技巧。