如何使用-moz-和-webkit- css属性来支持不同的浏览器？

Question

对于所有CSS3属性,我必须使用不同的供应商前缀版本来支持不同的渲染引擎.这是一个例子:

-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;

background:#dee0e1;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1f2f3), to(#dee0e1));
background:-moz-linear-gradient(#f1f2f3, #dee0e1);
background:-o-linear-gradient(#f1f2f3, #dee0e1);
background:linear-gradient(#f1f2f3, #dee0e1);

对于border-radius,我必须使用3种不同的属性,对于背景渐变,我必须以5种不同的方式使用background属性.它增加了CSS的大小.

有没有办法只使用一个属性,让Firefox 1-5了解它？

Answer 1

有没有办法只使用一个属性,让Firefox 1-5了解它？

简而言之,没有.

版本4之前的Firefox需要-moz-border-radius:http://caniuse.com/border-radius

Firefox 3.6 仍然有一些市场份额,所以你现在应该保留供应商的前缀版本.

对于背景渐变,我必须以5种不同的方式使用背景属性.它增加了CSS的大小.

目前,你无能为力.

最终,所有浏览器都会支持linear-gradient.在此之前,和旧版本不再使用,你必须忍受臃肿的CSS.

如果要支持尽可能多的浏览器,渐变代码实际上会变得更糟:

http://www.colorzilla.com/gradient-editor/

background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */