CSS Lintの警告 < ウェブ

2011年08月26日

CSS Lintの警告 @ ウェブ

CSSの文法や対応状況のチェックをしてくれるCSS Lint。LESSでちょっとしたスニペットを書いている途中でチェックしてみたら、ベンダープレフィックスが足りないと警告されて、修正していたら、何だかファイルサイズがデカく成って仕舞った。どうやらWebkitの場合、古い記述があると、新しい方の記述を要求されるようです。互換性の問題を考えると、古い方を優先して欲しい気もしますが、そうは成ってないようです。

それぞれ対応を書いていたら、linear-gradientの記述だけで、多数のの記述になって仕舞い、ファイルサイズが思いっきり増えました。使いどころを限定しないと、無駄に読み込みに時間が掛かりそうで怖い。

ちなみにLESSの記述はこんな感じ。

background: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
background: -ms-linear-gradient(@startColor 0%, @endColor 100%); // IE10
background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));// Webkit ( Safari 4+, Chrome 2+)
background: -webkit-linear-gradient(@startColor 0%, @endColor 100%); // Webkit (Chrome 11+)
background: -moz-linear-gradient(@startColor, @endColor);// Mozilla Firefox 3.6+
background: -o-linear-gradient(top, @startColor, @endColor);// Opera
background: linear-gradient( @startColor 0%, @endColor 100%); // The standard
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startColor}', endColorstr='@{endColor}')";// IE 5.5+
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+

CSS Lint
>>関連リンク