Question

我有点担心每次使用CSS3功能时都必须为example编写跨浏览器的CSS指令：

-webkit-transform: rotate(7.5deg);  /* Safari 3.1+, Chrome 
   -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15 
    -ms-transform: rotate(7.5deg);  /* IE9 
     -o-transform: rotate(7.5deg);  /* Opera 10.5-12.00 
        transform: rotate(7.5deg);  /* Firefox 16+, Opera 12.50+

与CSS3 PIE适用于IE的方式相同，是否有一个javascript库，我们可以在html <head>中包含一个单行代码，它将读取CSS的标准版本指令（在此示例中为transform:），并将特定的一个应用于当前浏览器？

这将允许我编写有效的CSS3代码，更重要的是，编写更少的代码。

Answer 1

有prefix-free，承诺做你想做的事;虽然我必须承认我从未使用它，所以当我链接到它时，我无法提供任何建议。

Answer 2

我建议您使用twitter bootstrap并使用其less mixins来实现此目的。此外，如果你想写更少的CSS代码。您必须先检查LESS。

in less mixins

它包含很多像

这样的东西

// CSS3 PROPERTIES
// --------------------------------------------------

// Border Radius
.border-radius(@radius:4px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

从我的角度来看，整个框架可以很好地处理跨浏览器问题。

您可能仍需要使用PIE来解决一些问题并编写自己的混音。

这里的好处是你不需要包含任何额外的JavaScript库

你几乎只是使用CSS来修复所有内容。

Answer 3

您可以使用cross-style来处理跨浏览器。这个库中会有很多内置的自定义CSS组件。

e.g：

.cs-border-radius {
  background-color: indigo;
  padding: 32px;
  cs-border-radius: 10px; // custom CSS component
}

<html>
  <head>Test the cs-border-radius working on cross browsers</head>
  <link href="site.css" rel="stylesheet"/>
  <body>
    <div class="cs-border-radius">
      Congratulations! Your border-radius is working fine on cross browsers!
    </div>

    <script type="text/javascript" src="cross-style.min.js"></script>
  </body>
</html>

输出：

    <div class="cs-border-radius" style="border-radius:10px;
-moz-border-radius:10px; -webkit-border-radius:10px;
-khtml-border-radius:10px; behavior: url(../vendors/css-pie/2.0-beta-1/PIE.htc)">
              Congratulations! Your border-radius is working fine on cross browsers!
    </div>

跨浏览器的CSS3 javascript库

3 个答案: