Net Applications による、2013年8月のブラウザシェア。
desktop share (%) IE8 21.6 IE10 18.6 FireFox4+ 18.3 Chrome+ 16.0 IE9 9.0 IE6 6.1 Safari+ 5.6
mobile share (%) Safari 6.0 39.8 Android Browser 4.0 21.9 Safari 5.1 5.1 Safari 5.36 5.0
元資料はもっと小さなものも載っていたのだが、5%未満は省略。 よって Opera も省略。
こうして見ると、世間はやっぱりまだまだIEなんだね。
モバイル端末では Safari が圧倒しているが、全体に対する比率は、マイナビニュースによると2013年7月時点で
Webトラフィックにおけるモバイル端末の比率は17.4%
ということだから、Safari の比率を7%程度押し上げるぐらい。
大勢は変わらない。
そのIEもIE10がほとんどなら特に問題にはならないのだが、IE8とIE10が20%前後と同じぐらいでIE6がずっと6%ぐらいとか、もう嫌がらせとしか思えないバラケ方。 IEの6と8って、きっとそのほとんどが企業のものなのだ。 「社内のシステムが対応していないので、バージョンアップは当面しない」 なんて言うのだ。 その程度の変化にも追随できないから駄目なのだと、声を大にして言いたい。
これが作る立場に立った途端に 「IEの6と8限定で、その他は動作保証の対応外です」 なんて言うんだけどさ。 そんな連中が今の状況を招いてるんだろうと言われたら、返す言葉も無いんだけどさ。 なので、声を小にして言ってみる。
それはそれ。 これはこれ。
さて、いわゆるモダンブラウザが7割ぐらいになれば、個人で細々とやってる分にはもう古いのは切り捨ててもいいだろう。 ということで、久しぶりにサイトを色々弄ってみた。
大きい所では、一昨年ぐらいから流行っているらしい Responsive Web Design を取り入れて、共通のHTMLに画面の幅によって適用するCSSの定義を切り替えることにした。 以前、iPhone4 を買った時に、アクセスしてきたUAが iPhone かどうかを判定して、デスクトップ向けと iPhone 向けに違うページを返すようにしていたのだが、その切り分けは廃止。 nexsu7 も買ったことだし、特定の機種かどうかで判別するのではなく、表示の仕様で切り替える。
まあ、Responsive Web Design とは言っても、取り入れたのは画面の幅によるCSSの切り替えのみなんだけど。 Flow Grid とか、まるで無視。 そもそも、幅（つまりは表示するデバイス）が変わっても雰囲気をなるべく変えない、なんて思ってないし。 なので俺がやっているのは、信者が言う所の Adaptive Web Design 相当なんだろう。 あと、Mobile First も、PC向けでわざわざモバイル向けに設定した属性をキャンセルするのが無駄っぽいので、共通部以外は最初から別定義。 いわば Mobile Parallel。 メディア・クエリーが効かないと意図とは全く違う見た目になってしまうのだが、そんなブラウザのことなんて気にしない。
小さい所もいろいろ。 写真を画面の幅に合わせて縮小できるように、width と height ではなく max-width と max-height を使ったりとか。 幅の広いテーブルを横スクロールにして、幅が狭いときのレイアウトが崩れないようにしたりとか。
Web Font も使ってみたかったのだが、と言うかちょっと使ってみたのだが、そこだけ表示が遅くなることがあるので止めた。
しかし、久しぶりにあれこれ弄って改めて思うのだけど、色々便利になったよなぁ。 特にCSSの進化は素晴らしい。 以前なら JavaScript を使わなければ実現できなかったことが、割と簡単にCSSで実現できて、ちょっと感動したりする。
面倒なのはベンダー・プレフィックス。 これはいつまで付けなきゃいけないのかね。