ベンダープレフィックス不要!Sassで自動設定する方法
はてなブックマーク - ベンダープレフィックス不要!Sassで自動設定する方法
Pocket

今回のエントリーでやりたいことは、以前に作成したサポートするブラウザのパラメータ設定から、不要なベンダープレフィックスを割り出して表示させないようにすることです。できる限りユーザーが触れるパラメータは少ないにこしたことはありませんよね。

 

 

以前に作成した、ベンダープレフィックスを自動で書きだしてくれる処理は以下のエントリーを参考にしてください。
 
「Sassを使えばbox-shadowのベンダープレフィックスコピペが要らない!」
「Sassで使用するベンダープレフィックスだけを出力する – @ifを使う」
 

この処理と以下のエントリーの、対応するブラウザのパラメータをうまく組み合わせたいと思います。

 
「Sassで未対応ブラウザへのCSS3使用は警告&自動修正!」
 

では今回も完成形から見てもらいたいと思います。

だいぶ長いソースとなってしまいましたが、今回追加した処理はハイライト部分となります。やっていることは単純で、例えば「 FireFox に対応不要」とパラメータがなっていれば「 -moz- 」は使用しない、としているだけです。ベンダープレフィックスを出力するかどうかは、「Sassで使用するベンダープレフィックスだけを出力する – @ifを使う」にて作っていますので簡単に実装することができました。これでわざわざ対応ブラウザと、出力するベンダープレフィックスを別個に設定する必要がなくなりましたね。