Compass のベンダープレフィックス
2016年5月22日
目次
久しぶりに Compass を 1.0.3 (Polaris) にアップデートしたら、コンパイル時に以下のような警告がコマンドプロンプトに表示されるようになりました。
C:\xampp\htdocs\compass>compass w >>> Compass is watching for changes. Press Ctrl-C to Stop. modified sass/_setting.scss WARNING: Compass has changed how browser support is configured. The following co nfiguration variables are no longer supported: $experimental-support-for-mozilla , $experimental-support-for-webkit, $experimental-support-for-opera, $experiment al-support-for-microsoft, $experimental-support-for-khtml.Details: http://compas s-style.org/help/documentation/tuning-vendor-prefixes/ ....
ブラウザサポートの設定が変更になっているようです。
以前はベンダーのプレフィックスの制御は以下のような設定でできましたが、新しいバージョンではサポートされていないようです。
例えば、Opera と Konquerer のベンダープレフィックスが不要な場合は以下のように設定を記述していました。
$experimental-support-for-opera:false; $experimental-support-for-khtml:false;
以下の設定変数を記述しているとコマンドプロンプトに警告が出るようです。
- $legacy-support-for-ie
- $legacy-support-for-ie6
- $legacy-support-for-ie7
- $legacy-support-for-ie8
- $legacy-support-for-mozilla
- $experimental-support-for-mozilla
- $experimental-support-for-webkit
- $experimental-support-for-opera
- $experimental-support-for-microsoft,
- $experimental-support-for-khtml
- $experimental-support-for-svg
- $experimental-support-for-pie
Compass のベンダープレフィックスの制御
警告の最後に「Details: http://compass-style.org/help/documentation/tuning-vendor-prefixes/」とあるので確認すると、以下の記述がありました。
Allowing Graceful Degradation in Legacy Browsers
CSS features that can degrade gracefully (E.g. border-radius) are set by default to adhere to the $graceful-usage-threshold variable. This variable defaults to 0.1 which means that when 0.1% of users (1 in 1,000) would be affected by removing the prefix for that feature, it will be removed.
「$graceful-usage-threshold」という設定変数を使うとベンダープレフィックスの制御ができるようで、デフォルトの値は「0.1」になっています。
これは、対象のブラウザのユーザーが 0.1% より少なくなると、そのベンダープレフィックスは削除されるようです。使用率は caniuse.com で使用しているデータと同じとのこと。
Underneath the covers of Compass’s vendor prefixing and legacy browser support is the very same data that drives the website caniuse.com.
This data allows Compass to correlate browser support with browser usage statistics and browser versions for you. By telling Compass the user thresholds where you’re comfortable letting a user’s experience degrade gracefully or break Compass will automatically add or remove vendor prefixes for particular features according to the browser statistics corresponding to them.
$graceful-usage-threshold の値
$graceful-usage-threshold の値を変更することで、ベンダープレフィックスの出力を制御できるようです。
値を大きくすれば、ベンダープレフィックスが付かなくなり、値を小さくすればより多くのベンダープレフィックスが付くようになっています。
デフォルトのまま、Compass の border-radius() のミックスインを記述すると、以下のベンダープレフィックスが付きます。
//SASS (.scss)
.foo a {
@include border-radius(4px);
}
/* CSS コンパイル後*/
.foo a {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
$graceful-usage-threshold: 0.2; とすると、「-webkit」が出力されなくなります。
//SASS (.scss)
$graceful-usage-threshold: 0.2;
.foo a {
@include border-radius(4px);
}
/* CSS コンパイル後*/
.foo a {
-moz-border-radius: 4px;
border-radius: 4px;
}
$graceful-usage-threshold: 0.3; とすると、「-moz」も出力されなくなります。
$graceful-usage-threshold: 0.1;（デフォルト）でも rotate() の場合は、以下のように多くのベンダープレフィックスが付きます。
/* CSS コンパイル後*/
.bar {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
$graceful-usage-threshold: 0.01; とすると、「-o」も付きます。
/* CSS コンパイル後*/
.bar {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
逆に、$graceful-usage-threshold: 90; とするとベンダープレフィックスは全く付きません。
※但し、この設定変数は Compass のインポートの前に設定しておく必要があります。
//SASS (.scss) $graceful-usage-threshold: 99; @import "compass";
または、「_setting.scss」などのパーシャルに設定変数を記述しておき、そのパーシャルの後に Compass をインポートします。
//_setting.scss $graceful-usage-threshold: 5;
//SASS (.scss) @import "setting"; @import "compass";
モジュールごとの閾値
$graceful-usage-threshold:はシステム全体の閾値の設定のようで、モジュールごとに個別に閾値を設定できるようです。
例えば、border-radius() の場合は以下の設定変数で閾値を設定できます。
//SASS (.scss)
$border-radius-threshold: 0.01;
.foo {
@include border-radius(5px);
}
モジュールごとの閾値（例えば $border-radius-threshold）は基本的には $graceful-usage-threshold （の値）が設定されているようです。
The the user threshold for border-radius support. Defaults to $graceful-usage-threshold
with-prefix() で個別にベンダープレフィックスを
with-prefix() を使うと個別にベンダープレフィックスをつけることができます。
//SASS (.scss)
.bar a {
@include with-prefix(-moz) {
@include border-radius(4px);
}
}
/* CSS コンパイル後*/
.bar a {
-moz-border-radius: 4px;
border-radius: 4px;
}
with-prefix() の引数には１つのベンダープレフィックスしか指定できないようです。また、他の設定変数の影響も受けるようですが、詳細は確認していません。
$debug-browser-support
$debug-browser-support を「true」に指定すると、何故そのブラウザサポートがされているのか、またはされていないかの理由がコメントで表示されます。
//SASS (.scss) $graceful-usage-threshold: 0.1; $debug-browser-support: true;
以下のようなコメントが表示されます。
/* CSS コンパイル後*/
bar {
/* Capability transforms2d is prefixed with -moz because 0.77252% of users need it which is more than the threshold of 0.1%. */
/* Creating new -moz context. */
-moz-transform: rotate(15deg);
/* Capability transforms2d is prefixed with -ms because 2.6001% of users need it which is more than the threshold of 0.1%. */
/* Creating new -ms context. */
-ms-transform: rotate(15deg);
/* Capability transforms2d is not prefixed with -o because 0.08196% of users are affected which is less than the threshold of 0.1. */
/* Capability transforms2d is prefixed with -webkit because 52.08628% of users need it which is more than the threshold of 0.1%. */
/* Creating new -webkit context. */
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
ブラウザサポートの停止
ブラウザサポートを停止するには、以下のように「$supported-browsers」に「reject(browsers())」を使って対象のブラウザを記述します。以下の例は全てのブラウザを対象にしているので、ベンダープレフィックスは出力されなくなります。
//SASS (.scss) $supported-browsers: reject(browsers(), android, blackberry, chrome, android-chrome, firefox, android-firefox, ie, ie-mobile, safari, ios-safari, opera, opera-mini, opera-mobile );
Compass Cross-Browser Support Configuration
$graceful-usage-threshold, $debug-browser-support, $supported-browsers の設定変数は、例えば _settings.scss などのパーシャルに記述しておいてメインのファイルで読み込めば各ファイルに記述する必要はなくなります。
New Web 制作リファレンス
