1

特定の css 宣言との重複が少し面倒だと感じ始めました。

たとえば、回転変換を利用して、mozilla、chrome/safari で前後の回転などを行いたい場合、次のことを行う必要があります。

@-webkit-keyframes wiggle {
0% {-webkit-transform:rotate(12deg);}
50% {-webkit-transform:rotate(-6deg);}
100% {-webkit-transform:rotate(12deg);}
}

@-moz-keyframes wiggle {
0% {-moz-transform:rotate(12deg);}
50% {-moz-transform:rotate(-6deg);}
100% {-moz-transform:rotate(12deg);}
}

@-ms-keyframes wiggle {
0% {-ms-transform:rotate(12deg);}
50% {-ms-transform:rotate(-6deg);}
100% {-ms-transform:rotate(12deg);}
}

そしてもちろん、これらをそれぞれ個別に適用する必要があります。

.wiggle {
 -webkit-animation: wiggle 5s infinite;
 -moz-animation:    wiggle 5s infinite;
 -ms-animation:     wiggle 5s infinite;
}

これらすべての中で唯一異なるのは、ms、moz、および webkit だけです。これは少しばかげています。理想的には、上記の 20 行のコードを 8 行に削減することができます。しかし、各ブラウザーは互いに戦争状態にあるようであり、CSS コーダーは世界中で苦しむ必要があります。

これは、CSS とブラウザーの実装がこの種のことを前進させ続ける方法ですか? より良い短い方法はありますか？これを行うことは、より DRY なコーディング エクスペリエンスの作成に反しているようです。

4

3 に答える 3

2

「最先端の」cssを利用したい場合、答えは今後長い間「はい」のままになる可能性があります。

于 2012-05-16T03:15:00.440 に答える
1

LESS のようなフレームワークを使用することをお勧めします。これにより、クラス内でクラス (さらには関数) を呼び出すことができます。例を次に示します。

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}

次に、1行で必要な場所に呼び出します

div { .box-shadow(0 0 5px, 30%) }

ご覧のとおり、変数を使用できるため、1 つのプリセットのみを使用して、シャドウを適用する特定のセレクターに合わせて変更できます。

于 2012-05-16T06:49:44.173 に答える
0

prefixmycss、prefixfree、特にCSS3 Pleaseを見てみてはどうでしょうか。これらは、長い CSS を書く時間を大幅に節約するのに役立ちます。

于 2012-09-13T04:28:46.087 に答える