ベンダープレフィックス不要！Sassで自動設定する方法

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

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

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

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

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

/*----------------------------------------------------------
ベンダープレフィックスの使用可否設定
----------------------------------------------------------*/
$NOTSUPPORT_SAFARI:  false;
$NOTSUPPORT_CHROME:  false;
$NOTSUPPORT_FIREFOX: false;
$NOTSUPPORT_IE:      false;
$NOTSUPPORT_OPERA:   false;

// サファリに対応する必要が無い場合
@if ((not $SUPPORT_MAC_SAFARI)  and (not $SUPPORT_WIN_SAFARI))  { $NOTSUPPORT_SAFARI: true; }
// Chromeに対応する必要が無い場合
@if ((not $SUPPORT_MAC_CHROME)  and (not $SUPPORT_WIN_CHROME))  { $NOTSUPPORT_CHROME: true; }
// FIREFOXに対応する必要が無い場合
@if ((not $SUPPORT_MAC_FIREFOX) and (not $SUPPORT_WIN_FIREFOX)) { $NOTSUPPORT_FIREFOX: true; }
// IEに対応する必要が無い場合
@if ((not $SUPPORT_WIN_IE6)     and (not $SUPPORT_WIN_IE7)
 and (not $SUPPORT_WIN_IE8)     and (not $SUPPORT_WIN_IE9))     { $NOTSUPPORT_IE: true; }
// Operaに対応する必要が無い場合
@if ((not $SUPPORT_MAC_OPERA)   and (not $SUPPORT_WIN_OPERA))   { $NOTSUPPORT_OPERA: true; }

$NOTSUPPORT_WEBKIT: false;
$NOTSUPPORT_MOZ:    false;
$NOTSUPPORT_O:      false;
$NOTSUPPORT_MS:     false;

// webkitに対応する必要が無い場合
@if ($NOTSUPPORT_SAFARI and $NOTSUPPORT_CHROME) { $NOTSUPPORT_WEBKIT: true; }
// mozに対応する必要が無い場合
@if ($NOTSUPPORT_FIREFOX)                       { $NOTSUPPORT_MOZ: true; }
// oに対応する必要が無い場合
@if ($NOTSUPPORT_OPERA)                         { $NOTSUPPORT_O: true; }
// msに対応する必要がない場合
@if ($NOTSUPPORT_IE)                            { $NOTSUPPORT_MS: true; }

$USE_WEBKIT: (not $NOTSUPPORT_WEBKIT) !default; // CSS3利用時に-webkit-を使用するかどうか
$USE_MOZ:    (not $NOTSUPPORT_MOZ)    !default; // CSS3利用時に-mox-   を使用するかどうか
$USE_MS:     (not $NOTSUPPORT_MS)     !default; // CSS3利用時に-ms-    を使用するかどうか
$USE_O:      (not $NOTSUPPORT_O)      !default; // CSS3利用時に-o-     を使用するかどうか

/*----------------------------------------------------------
使用するベンダープレフィックスをリストにする
 - join関数を利用している理由について
     joinを使用しなかった場合、リストをさらにリスト化して
     変数を作成してしまうため、each文で取り出せなくなる
----------------------------------------------------------*/
$VENDER_PREFIX: "" !default;
@if ($USE_O) {
    $VENDER_PREFIX: join(-o-, $VENDER_PREFIX);
}
@if ($USE_MS) {
    $VENDER_PREFIX: join(-ms-, $VENDER_PREFIX);
}
@if ($USE_MOZ) {
    $VENDER_PREFIX: join(-moz-, $VENDER_PREFIX);
}
@if ($USE_WEBKIT) {
    $VENDER_PREFIX: join(-webkit-, $VENDER_PREFIX);
}

/*----------------------------------------------------------
使用するベンダープレフィックスだけを使ってプロパティを作成する
----------------------------------------------------------*/
@mixin createVenderPrefix($property, $value...) {
    @each $prefix in $VENDER_PREFIX {
        #{$prefix}#{$property}: $value;
    }
}

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

Leave a Reply Cancel reply