2

サーバー上の CSS ファイルを操作する必要があり、最近Autoprefixerライブラリを発見しました。

私の問題は - 私のcssファイルには、使用されたブラウザに応じたプレフィックスがあります。たとえば。私のcssコードは次のようなものです-

.newclass
{
    -moz-transition:.3s all;
}

Autoprefixer はここでは機能せず、css を次のようにする必要があります。

.newclass
{
    transition:.3s all;
}

引き起こす

.newclass
{
    transition:.3s all;
    -moz-transition:.3s all;
    -ms-transition:.3s all;
    -o-transition:.3s all;
    -webkit-transition:.3s all;
}

元の CSS (プレフィックスなしのプロパティではなくプレフィックス付きのプロパティ) で同じ結果を得る方法はありますか? または、Autoprefixer 以外に同じことを達成するのに役立つ他のライブラリはありますか?

4

1 に答える 1

3

これは仕様によるものです。Autoprefixer は、接頭辞なしの宣言の前にない接頭辞を意図的に無視するため、それらが上書きされることなく絶対に必要な場合に使用できるため、望ましくない副作用が発生する可能性があります。

たとえば、質問で指定した出力は、デフォルト設定で Autoprefixer を今すぐ実行した場合に生成される出力ではありません。プレフィックスが上書きされたと仮定すると、ほぼ 2 年前にリリースされた Firefox 16 の時点でプレフィックスが不要になっ-moz-たため、完全に破棄されます。実際の出力は次のようになります。

.newclass
{
    -webkit-transition:.3s all;
            transition:.3s all;
}

これで、古いバージョンの Firefox ( ) やその他のブラウザーに対応するオプションを指定して Autoprefixer を実行できますが、Autoprefixer で処理する場合は、CSS からプレフィックスを削除する必要があります。Firefox >= 4Autoprefixer が、CSS で明示的に宣言されたプレフィックスを使用して、必要なことを何でも実行できると想定することは期待できません。

ドキュメントのこのセクションには別の例がありますが、原則は同じです。

無効にする

Autoprefixer はインターフェースを持たないように設計されています – 機能するだけです。ブラウザ固有のハックが必要な場合は、接頭辞を外した後に接頭辞付きのプロパティを記述してください。

a {
    transform: scale(0.5);
    -moz-transform: scale(0.6);
}
于 2014-08-27T08:52:41.280 に答える