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で機能するのと同じように、HTMLにワンライナーとして含めることができるjavascriptライブラリがあります。これ<head>は、CSSディレクティブの標準バージョン（transform:この例では）を読み取り、特定の現在のブラウザ用ですか？

これにより、有効なCSS3コードを記述でき、さらに重要なことに、記述するコードを減らすことができます。

4

3 に答える 3

5

プレフィックスフリーがあり、これはあなたが望むことをすることを約束します。一度も使ったことがないことを告白しなければならないので、リンクしている間はお勧めできません。

于 2012-08-08T20:42:52.660 に答える
3

これを実現するには、 twitterブートストラップを使用し、ミックスインを少なくすることをお勧めします。その上、あなたがより少ない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を使用する必要がある場合があります。

ここでの良い点は、追加のjavascriptライブラリを含める必要がないことです。

ほとんどすべてを修正するためにCSSを使用します。

于 2012-08-08T20:43:16.430 に答える
0

クロスブラウザの処理にはクロススタイルを使用できます。このライブラリには、多くの組み込みのカスタム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 に答える