1

我有点担心每次使用 CSS3 功能时都必须编写跨浏览器 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 代码，更重要的是，编写更少的代码。

4

3 回答 3

5

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

于 2012-08-08T20:42:52.660 回答
3

我建议你使用twitter bootstrap并使用它更少的mixins 来实现这一点。此外，如果您想编写更少的 css 代码。您必须先检查LESS。

在其较少的混合中

它包含很多东西，比如

// 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 来解决一些问题并编写自己的 mixins。

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

您几乎只是使用 CSS 来修复所有问题。

于 2012-08-08T20:43:16.430 回答
0

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

例如：

.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>
于 2015-11-14T13:33:53.247 回答