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

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

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

[markdown]
## 状況

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

> * [Compass Images | Compass Documentation](http://compass-style.org/reference/compass/css3/images/)

CSS は下記のとおり。

“`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 がないという警告。

“`prettyprinted
[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/csslint](https://github.com/CSSLint/csslint)

“`prettyprinted
% csslint –version
v0.10.0
“`

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

## Can I use で確認する

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

> * [Can I use… Support tables for HTML5, CSS3, etc](http://caniuse.com/#feat=css-gradients)

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

“`prettyprinted
% compass –version
Compass 1.0.1 (Polaris)
“`

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

> * [Compass History | Compass Documentation](http://compass-style.org/CHANGELOG/)
> * [Compass 1.0 is Released! | Compass Documentation](http://compass-style.org/blog/2014/08/15/omg-compass-1-0/)
> * [Compass 1.0リリースノート和訳 – Qiita](http://qiita.com/ariyo13/items/edb5f40bc51025d1709e)

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

## Autoprefixer CLI を利用する

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

> * [postcss/autoprefixer](https://github.com/postcss/autoprefixer)

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

“`prettyprinted
% 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)
“`

実行します。

“`prettyprinted
% autoprefixer *.css
“`

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

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

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

## Autoprefixer

Autoprefixer は、下記に設定方法が記載されていて、内部的には [ai/browserslist](https://github.com/ai/browserslist) というものが使われているとか。

> * [postcss/autoprefixer](https://github.com/postcss/autoprefixer)

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

“`prettyprinted
% 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 では、下記で設定できるようです。

> * [Compass Cross-Browser Support Configuration | Compass Documentation](http://compass-style.org/reference/compass/support/)

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

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

> * [Compass V1.0 Cross-Browser Support Configuration の書式を確認する – Qiita](http://qiita.com/DriftwoodJP/items/dac0c2dc956348a9a4d2)

## 補遺

> * [Autoprefixerによる、CSS3の管理｜Web Design KOJIKA17](http://kojika17.com/2014/01/autoprefixer.html)
[/markdown]