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
>>関連リンク

閲覧数: 1292 / はてなブックマークusers

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト