モバイル端末の普及によって、回線速度が十分でない3GでもWebを快適に利用する為には様々な対策を講じる必要になってきました。テキスト量の制限からCSS, HTML, JS の最適化も重要な対策事項です。
このツールは、CSSの記述方法についてのパフォーマンスの側面から検証ができます。
チェックボックスで検証したい項目を自由に選択できますので自分で意図して検証にひっかかるCSSの記述を利用している項目があれば、予めチェックを外しておくことをオススメします。
下記にCSS LINT のドキュメントを翻訳しました。パフォーマンスの為のCSSの記述方法
下記にCSS LINT のドキュメントを翻訳しました。パフォーマンスの為のCSSの記述方法
Parsing errors should be fixed - パースエラーを修正しよう
CSS Lint はデフォルトでパースエラーを表示します。パースエラーは通常はミスタイプによるブラウザがCSSの適用をしなかったプロパティやルールを意味します。パースエラーは、CSS Lint によってエラーとして表示されます。修正するべき最も大切な事項です。
Don't use adjoining classes - 隣接クラスを使わないようにしよう。
.foo.bar のような隣接クラスはCSSで利用は可能です。これらは、IE6以下では利用ですることができません。- ID: adjoining-classes
Remove empty rules - 空ルールを削除しよう。
ルールを含まないプロパティ、たとえば：.foo {}CSSソースの整理をしない結果として、空のルールが何度も表示されるのを見かける。空ルールを抹消して、ファイルサイズを小さくしてブラウザが処理するスタイル情報を削除しよう。
- ID: empty-rules
Use correct properties for a display - Display プロパティには正しいものを
たとえ CSSルールがグループできることが出来たとしても、display プロパティで無視される指定があるでしょう。このような手法は、CSSファイルに余計なゴミデーターになります。CSS Lint は 下記のプロパティのリストをチェックします。display: inlineはwidth,height,margin(他の派生も),padding(ほかの派生も), もしくは floatを利用するべきではない。display: inline-blockはfloatを利用してはならない。display: blockはvertical-alignを利用してはならない。display: table-* はmargin(他の派生も) もしくはfloat利用してならない。
無視されている、もしくは問題となるプロパティは削除してファイルサイズを削減しよう。そしてパフォーマンスをアップさせよう。
- ID: display-property-grouping
Don't use too many floats - float を沢山利用しない
floatプロパティは使わなければならないとしても良い考えとはいえない。CSS Lintは floatを10回以上利用されているかをチェックして、もし利用されていれば警告を表示します。floatを沢山利用するというのは、レイアウトに対して何らかの引き算的アプローチが必要。- ID: floats
Don't use too many web fonts - Webフォントをたくさん利用しない。
Webフォントは@font-face を利用して人気があります。しかしながら、ウェブフォンとの利用は 幾つかのブラウザはフォントのダウンロード中はレンダリングをストップしてしまいます。この理由から、CSS Lintは5つ以上のウェブフォントが１つのスタイルシートで利用されていると警告を表示します。- ID: font-faces
Don't use too may font-size declarations - font-sizeの指定はしすぎないようにしよう。
典型的なウェブサイトはfont-sizeの指定も含めて限定的でしょう。もし、１０以上の font-size の指定があるようであれば、マークアップの中でフォントサイズのクラスのテンプレートを再設定できるでしょう。- ID: font-sizes
Don't use IDs in selectors - セレクタにIDは使わないようにしましょう。
IDはセレクタで使うべきではありません、なぜならこれらのルールはHTMLと完全に紐付けされています。再利用する可能性がありません。ページでclassをセレクタに利用することの方が好ましいのです。- ID: ids
Don't qualify headings - 見出しは修飾しすぎないようにしよう。
h1-h6の見出し要素はスタイルシートの最初で設定されるべきでしょう。ページの途中で特定の部分で指定されるべきではありません。例えば、これは必要以上に修飾された見出し要素の例です。.foo h1 {
font-size: 110%;
}
見出しは、ウェブサイトを通して同じようなサイズやデザインであるべきです。
- ID: qualified-headings
Heading styles should only be defined once - 見出しのスタイルシートは一度だけ指定されるべきです。
Heading elements (h1-h6) should have exactly one rule on a site. CSS Lint warns if it finds more than one.
- ID: unique-headings
Zero values don't need units - ゼロの値は単位は省きましょう。
簡単にバイト数を減らす方法として、CSSでは0には単位を省くようにしましょう。簡単にいうと、0pxと0は完全に同じです、なので単位は省くようにしましょう。- ID: zero-units
Vendor prefixed properties should also have the standard - ベンダープリフィックスプロパティはウェブ標準のバージョンも記述しましょう。
-moz-border-radiusのように、ベンダープリフィックス付きのプロパティを利用する時は、ウェブ標準での指定を忘れないようにしましょう。ウェブ標準での記述は、ベンダープリフィックス付きのプロパティの後に来るのが好ましいです。.foo {
-moz-border-radius: 5px;
border-radius: 5px;
}
- ID: vendor-prefix
CSS gradients require all browser prefixes - CSSのグラデーションの記述は全てのブラウザでベンダープリフィックスが必要です。
現在、標準でCSS gradient の採用はありません。つまり、CSS gradients をクロスブラウザで利用するには、ベンダープリフィクス付きのバージョンが多種必要になります。CSS Lintでは、グラデーションをサポートしている全てのブラウザへグラデーションが一様に指定されていない場合に警告をします。- ID: gradients
Avoid selectors that look like regular expressions - 正規表現を利用したセレクターを避けよう。
CSS3 複雑な属性セレクターを追加していますが、~=は遅くなります。属性セレクターを利用するときは、複雑な正規表現を利用したセレクタの 利用をさけて、パフォーマンスの負担を減らしましょう。- ID: regex-selectors
Beware of broken box models - 壊れたボックスモデルには注意しよう。
ボーダーとパディング は要素のコンテントの外にスペースを追加します。width と height の指定をpaddingとborderと一緒におこなうことは通常は間違いです。なぜなら、貴方が望んでいるような結果にはなりません。CSS Lint はwidth か height が padding もしくはborderを一緒に利用されている場合に警告をだします。- ID: box-model
@import - @import ルールはさけよう@import ルールは、幾つかのブラウザで並行ダウンロードを邪魔します。(see: Don't use @import)
- ID: import
!important は 個別性の仕組みによって導かれた結果をどんな場合でも書き換えてしまいます。CSS Lint は !import を利用された場合、警告を表示します。もし、最低でも10個以上の !import ルールがある場合はエラーを表示します。ID: important
0 件のコメント:
コメントを投稿