CSS統計を使用して任意のCSSスタイルシートを視覚化する

スタイルシートにはCSSのルールがいくつあるか疑問に思ったことはありませんか。またはあなたが今まで見たかったことはありますか 視覚的表現 の すべての色 1つのCSSファイルで使用されている？あり CSS統計, どのWebサイトにも接続できます 生のCSSデータを大量に引き出す あなたの好奇心を満たすために.

そしてこのWebアプリは、スタイルシートのすべての色を表示するだけではなく、はるかに深くなっています。あなたは視覚化することができます すべてのZインデックス値, すべてのフォントサイズ, すべてのメディアクエリ そしてさらに見て 視覚特異度グラフ.

このアプリは非常に多くをカバーしているので、一度にすべてを消費することは事実上不可能です。それはあなたによってあらゆるウェブサイトの途方もない概観をあなたに与えるでしょう。 スタイルシートの内容を紹介する.

はじめに、CSS StatsのWebサイトにアクセスして 任意のURLを差し込む あなたが望むFacebook、Apple、Pinterestなどのおすすめサイトから選ぶこともできます。.

結果ページには、 CSSファイルの合計サイズ のリストとともに、キロバイト単位で 最も一般的に使用されるプロパティと宣言. これはすべて1つの長い数字のリストとして表示されるため、最初に読むのは混乱します。.

しかし、このアプリを使用するほど楽しくなります。これが すべてのリスト あなたは統計ページにあります。

の合計 プロパティ, セレクター, そして規則
すべて フォントの色 例付き＆16進コード
すべて 背景色 例付き＆16進コード
すべて フォントサイズ 例で
のリスト フォントファミリー
すべてのリスト zインデックス値
の棒グラフ 合計/一意のCSS宣言
特異性グラフ
合計 ルールセットサイズ
すべて メディアクエリ
の 生のCSSコード に加えて URLリンク に 個々のCSSファイル

CSS StatsはすべてのCSSファイルを取得するのに十分スマートです。 そのデータを結合する. 開発者はこれをうまく機能させるために多くの努力を注いでいます。.

そして、追加の素晴らしい部分は完全なGitHubレポジトリです。 プロジェクト全体のソースコード. だから、あなたはこれをダウンロードすることができます 再ホストする 自分のサーバー上で（ローカルでもそうでなくても）コードを詳しく調べたい場合.

あなたはのオプションがあります 個々のCSSファイルを引っ張る または すべてのスタイルシートを解析する 単一ドメイン上。このツールを学ぶことから学ぶことができることはたくさんあります。それは、細かいところまで詳しく知る開発者にとってより深い洞察を提供します。.

自分でテストするには、CSS統計にアクセスしてWebサイトに接続するだけです。利用可能なデータ量と、そのような単純化されたツールからどれだけ学ぶことができるかに驚くでしょう。.