CSS Property Advent Calendar 2013の3日目の記事です。昨日は越智さんのもっと広まって欲しい CSSでした。明日も越智さんです。

CSSじゃなくてCSSプロパティのAdvent Calendarです。CSSには大量のプロパティが定義されており、それを組み合わせて様々なデザインを作るわけですが、ああ何と言うか、もう前置きも面倒ですね、はいじゃあ本題に入ります。

順位発表

現在世界中の閲覧されたウェブページでのCSSプロパティの使用率の統計、こんなんになりました。(2013-12-04 02:07現在。あと適当に数値を丸めています。)

# プロパティ 使用率
1 width 94%
2 padding-top 92%
3 margin-top 92%
4 display 92%
5 height 92%
6 padding 91%
7 border-top-width 91%
8 margin 91%
9 border-width 91%
10 border 91%
11 position 90%
12 top 90%
13 border-top-style 88%
14 color 87%
15 border-style 87%
16 float 87%
17 font-size 86%
18 border-top-color 86%
19 opacity 86%
20 border-color 86%
21 background-color 85%
22 left 85%
23 text-align 85%
24 overflow-y 84%
25 overflow 84%
26 padding-right 83%
27 visibility 83%
28 font-weight 82%
29 font-family 81%
30 margin-right 81%
31 background 81%
32 margin-bottom 80%
33 margin-left 80%
34 text-decoration 80%
35 padding-left 79%
36 cursor 78%
37 padding-bottom 78%
38 line-height 77%
39 z-index 77%
40 background-image 77%
41 vertical-align 75%
42 border-bottom-width 75%
43 right 74%
44 border-bottom 74%
45 border-bottom-style 74%
46 border-bottom-color 73%
47 background-position 73%
48 border-top 72%
49 white-space 71%
50 background-repeat 70%

元ネタ

Googleが出している統計を利用しています。

自動収集される膨大な情報を即時解析し、直近二十四時間分のCSSプロパティ利用統計を見せてくれる。

Google Chromeには使用統計を自動的に送信する仕組みが組み込まれています。

「設定>機能>詳細設定を表示…>プライバシー>使用統計データや障害レポートを自動的に Google に送信する」がそれです。たぶん。

で、この機能で送信されてきた統計情報のうち、CSSプロパティの利用状況についての情報が上記のものです。あ、なのでたぶんページ単位ではなく閲覧単位です。よく見られるページで利用されていれば使用率は上がる事でしょう。いずれにしろ人気度という観点で問題ないと考えています。

ちなみにCSS以外の統計情報もありそうなんですが、本記事執筆時点ではまだ公開されていないようです。

第1位はwidth、heightも第5位に

というわけでトップはwidthでした。手元では94%と表示されています。すごい! 使わないサイトは世の中の6%程度なので、だいたい40人クラスに2人いるくらいですね。何のこっちゃ。

相方のheightも92%で五位に入っています。大人気です。名前からして機能がわかりやすいし、実際多くの場面で利用しますね。

そういえばCSSの幅と高さの計算にはちょっと癖があって、見た目的なサイズとCSSプロパティのwidth, heightで設定するものとは差異があります。てな話を去年書いたので、まあ良ければ見てみてください。

第2位padding-top、続いて第3位margin-top

どちらも要素の上側の空間を制御するプロパティです。padding, marginのようなショートハンドや

他の方向より上向きだけが突出して利用頻度が高いようです。

# プロパティ 使用率
2 padding-top 92%
6 padding 91%
26 padding-right 83%
35 padding-left 79%
37 padding-bottom 78%
# プロパティ 使用率
3 margin-top 92%
8 margin 91%
30 margin-right 81%
32 margin-bottom 80%
33 margin-left 80%

padding, marginともにだいたい方向の偏りは似ているようです。余白を取りたいとき、どちらかというと私は前の要素(上に位置する)が下部に余白を持つようにする場合が多かったのですが、逆に後の要素(下に位置する)が上部に余白を持つよう組む方が多いという事なのでしょうか。本記事をお読みになった方はいかがでしょう。

第4位 display

JavaScriptから表示を制御するためdisplay:noneを指定した非表示の要素を事前に配置しておくのはよくある手です。またinline-blockを与えてインラインの要素でも高さを設定する場面も多いでしょう。

テーブルレイアウトから手っ取り早く脱却するためにtableを使う事もあるかもしれません。今後はさらにboxの利用も増えるかもしれません。

第7位からborder類

5位、6位は前述なので省略しました。

第7位にborder-top-width、9位にborder-width、10位にborderと来ました。

その先13位と15位にborder-top-styleとborder-style、18位と20位にborder-top-colorとborder-colorが登場しています。ここでも上側の指定が上位に来ているようです。

第11位にposition、そしてまたtopが同類最上位

JavaScriptでぐりぐり動かす場合にposition:absoliuteは多用しますし、最近はfixedを用いてヘッダーやフッターを表示するレイアウトも多く利用されるようになってきました。(うちもですね。もうちょっと細くしたいなと思ってます。)

また静的配置でも複雑なレイアウトでは位置を数字で指定したり、またその外枠のために位置は動かさないがrelativeの指定をする場面も多いと思います。

またなんと、個別の位置指定でもtopが他の方向を抑えてトップです。トップだけに。ここまで来ると統計上何かあるのではないかと疑いたくもなります。

# プロパティ 使用率
12 top 90%
22 left 85%
43 right 74%
bottom 69%

background系は妥当な順位

背景は色だけ設定するか、画像も合わせる場合はショートハンドで設定する場合が多いかと思います。だいたい順位もそんな感じです。

background-sizeは下位ではありますが、使用率を見ると意外と利用されている様子なのが気になりました。CSS 3で追加されたプロパティで、背景画像を拡縮出来ます。IEも9から対応していますし、8でも独自機能で代用出来るようです。(MDNの「ブラウザ実装状況」の注釈を参照。)

# プロパティ 使用率
21 background-color 85%
31 background 81%
40 background-image 77%
47 background-position 73%
50 background-repeat 70%
background-size 50%
background-clip 36%
-webkit-background-size 12%

font-*は頻出でもfontは使われない

文字の指定はよく使うと思いますが、それらを一括指定出来るfontはあまり使われていないようです。

個人的にもborderなんかはこのショートハンドを使いますが、fontは使わずに個別に指定する方が多く思います。なんとなくわかりづらい気がするんですよね。なんとなく。実は割とシンプルに書けるのですが。

font-weightとfont-styleの格差も気になるところです。欧米だと割とイタリック体もよく使われている印象でしたが、やはり場面は限られているのでしょうか。それとも非アルファベット圏の勢力が意外とあるとか。

# プロパティ 使用率
14 color 87%
17 font-size 86%
28 font-weight 82%
29 font-family 81%
38 line-height 77%
font 63%
font-style 62%

(なおcolorはfont-*ではありませんが、一般に文字の色を指定するのに利用されるので含めました。またline-heightも違いますが、fontで指定出来る値なのでまとめて扱いました。)

てな感じです

まあだから何なの?みたいな意見もあるかと思いますが、例えば新人さんにCSSを教えるとき、どのプロパティから教えてゆくかの指標には使えるんじゃないでしょうか。

以上、CSS Property Advent Calendar 2013の3日目の記事でした。明日の越智さんの記事は間接セレクターの話のようです。