CSSを徹底解析できるwebサービス「CSS Stats」
CSSを徹底解析できるwebサービス「CSS Stats」を使ってみた
「CSS Stats」は簡単にCSSを徹底的に解析できるwebサイト。まずはサイトへアクセス。
自分で調べたいサイトのURLかCSSのソースを貼り付けして「GO」ボタンをクリック。
解析が終わるとそのサイトで使われているCSSの内容詳細が表示される。下記はTwitterの解析ページの一部。
解析される内容は以下の通り。
- Total Declarations … プロパティ毎の宣言数
- Colors … 色
- Background Colors … 背景色
- Font Sizes … フォントサイズ
- Font Family … フォントファミリー
- Total vs. Unique Declarations … 何て書けばよいかよくわからない。
- Specificity Graph … 詳細度のグラフ
グラフの曲線がなだらかな方が保守性に優れているってことみたい。 - Ruleset Size … ルールセットあたりの宣言数
- Media Queries … メディアクエリー
- Raw CSS … 解析したCSSファイル/ソース
ページ下部にメジャーなサイトの解析結果へのリンクもあるので、なんか色んなサイトを試してみると面白かったです。デザインの参考に、CSSの勉強用に良いサイトだと思います。