, , , ,

[Sass & Compass] CSS Lint の vendor prefix WARNING から Can I use, Autoprefixer, Compass の確認まで

公開日: 2015/01/31
更新日: 2018/10/26

CSS Lint で怒られたので確認してみます。

Contents

状況

確認すると Compass の background-image mixin が該当箇所でした。

CSS は下記のとおり。

.linear--gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWw...==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #0083f6), color-stop(100%, #5dcdfa));
  background-image: -moz-linear-gradient(left, #0083f6, #5dcdfa);
  background-image: -webkit-linear-gradient(left, #0083f6, #5dcdfa);
  background-image: linear-gradient(to right, #0083f6, #5dcdfa);
}

CSS Lint は、Opera 11.1+ 用の vendor-prefix がないという警告。

[L375:C1]
WARNING: Missing vendor-prefixed CSS gradients for Opera 11.1+. When using a vendor-prefixed gradient, make sure to use them all. (gradients) Browsers: All

out of date と表示されていたりでメンテナンス止まっているんでしょうか。

% csslint --version
v0.10.0

csslint の vendor-prefix は、どうやって判定してるんだろ？

Can I use で確認する

Can I use で確認してみると、今は vendor-prefix は webkit のみのようですね。

プロジェクトには Compass を使っています。

% compass --version
Compass 1.0.1 (Polaris)

Compass も Version 1.0 リリース以降から Can I use のデータを使うようになったようなので、Opera 11.1+ の vendor-prefix が出力されていないのは意図通りです。

但し、他の vendor-prefix は不要かもしれないですね。

Autoprefixer CLI を利用する

Autoprefixer をかけてみます。
CSS の vendor-prefix を Can I use のデータを元に調整してくれます。

CLI 版をインストールします。

% npm install --global autoprefixer
/usr/local/bin/autoprefixer -> /usr/local/lib/node_modules/autoprefixer/autoprefixer
autoprefixer@5.1.0 /usr/local/lib/node_modules/autoprefixer
├── fs-extra@0.16.3 (jsonfile@2.0.0, rimraf@2.2.8, graceful-fs@3.0.5)
├── postcss@4.0.3 (js-base64@2.1.7, source-map@0.2.0)
└── autoprefixer-core@5.1.0 (num2fraction@1.0.1, browserslist@0.2.0, caniuse-db@1.0.30000060)

実行します。

% autoprefixer *.css

CSS を確認すると、やはり -moz- が削除されていました。

  background-image: -moz-linear-gradient(left, #0083f6, #5dcdfa);

Autoprefixer と Compass の -moz- を削除するかしないかという振る舞いの違いは、ディフォルト設定の閾値が違うからのようですね。

Autoprefixer

Autoprefixer は、下記に設定方法が記載されていて、内部的には ai/browserslist というものが使われているとか。

こんなコマンドで状況を確認できました。

% autoprefixer --info
Browsers:
  Chrome for Android: 40
  UC for Android: 9.9
  Android: 4.4.3-4.4.4, 4.4, 4.2-4.3
  Chrome: 40, 39, 38, 37
  Firefox: 35, 34, 33, 31
  IE: 11, 10, 9, 8
  IE Mobile: 11, 10
  iOS: 8.1, 8, 7.0-7.1
  Opera Mini: 5.0-8.0
  Opera: 27, 26, 12.1
  Safari: 8, 7.1
At-Rules:
  @keyframes: webkit
  @viewport: ms, o
  @resolution: webkit
      :

Compass

Compass では、下記で設定できるようです。

$browser-minimum-versions を Autoprefixer に揃えてみたりしたのですが、手元のプロジェクトでうまくコントロールできませんでした。

このあたりは別途確認しました。

補遺