今回は自作テーマの対象ブラウザをどこまでの範囲とするかについて考えてみます。
具体的には自作テーマでIE11対応を切っていくことができるのかどうかについて調査して分かったことを書きます。
なぜInternet Explorer 11サポートが問題になるかというと、IE11には様々なバグがあり、最新のCSS3を工夫なしで使用すると表示崩れが発生してしまう可能性があるからです。
ブラウザシェアを確認する
2018年夏のブラウザシェアを見てみましょう。
こちらの記事によれば2018年7月時点でシェアは次のようになっています。
| 順位 | ブラウザ | バージョン | シェア |
|---|---|---|---|
| 1 | Chrome | 67.0 | 41.13% |
| 2 | IE | 11.0 | 17.51% |
| 3 | Firefox | 61.0 | 6.92% |
| 4 | Edge | 17 | 5.83% |
| 5 | Safari | 11.1 | 5.36% |
IE11のシェアが17%以上もあるということです。ホントでしょうか？
Googleアナリティクスで自分のサイトのブラウザシェアを確認
念のためGoogleアナリティクスを使って自サイトのブラウザシェアも見てみることにしました。自作テーマを適用するのは、まず自分のサイトですからね。
はるなぴログの場合IE11のシェアはここ3か月間で2％ちょっとでした。
代わりにSafariがもっとたくさんあります。これはiPhoneで見ている読者が多いからですね。
はるなぴログでIE11のシェアが低いのは、はてなの読者のITリテラシーが高めなことと関係があるのかもしれないと考えています。
一般的にはIE11のシェアは結構高いようですね。これは「会社の中で利用している人が多いからではないか」と推測しています。
一般企業ではさまざまな社内システムに対応するために古いブラウザを標準ブラウザにしたままであることが多いです。これがいまだにIE11のシェアが高い原因だと思います。
browserl.istを利用してブラウザシェアを調べる
こちらのサイトを使うとブラウザシェアを調べることが可能です。やってみましょう。
例えば、日本において1％以上のシェアがあるブラウザを調査したい場合はフォームに次のように入力します。
> 1% in JP結果はIE11シェアが2.8％となりました。はるなぴログのシェアと似たかんじのシェアとなっています。
レガシーブラウザ対応
ついでながら、このサイトを利用して気になるのはシェア1％以上のブラウザ全てに対応しても全体の88％ほどにしかならないことです。
0.5%にしてみてもカバー率は90％にしかなりません。0.1％にすると95.4％になりますが、リストの中にはIE9やIE8まで含まれてきてしまいます。
プログレッシブエンハンスメントと言って、モダンブラウザにはリッチなコンテンツを提供し、レガシーブラウザにはそれなりのコンテンツを見せるという工夫も大企業のサイトなどでは必要です。
ですが個人のブログでは「とてもそこまで対応してられない」という感じです。簡単にレガシーブラウザ対応できる方法があったら知りたいと思っていますが探しても見つかりませんでした。
新しい技術を諦めるか、あるいは工夫をしない限り、全体の10％前後のブラウザには対応が保証できないということも併せ考えておくことが必要ですね。
自作テーマで何故IE11対応が問題となるのか
次に、なぜ自作テーマを制作するにあたってIE11対応が問題となるのかについて説明します。
flexbox対応のバグ
flexboxを使用するとレスポンシブ対応が楽になるという話は何年前に聞いたでしょうか。
その時は救世主のように思えたものでした。
floatとclearfixでレイアウトを何とかしていたものがtablecellで楽になるとか、イヤやっぱりうまくいかないとかいろいろとやったような記憶があります。
それがflexboxの登場ですべてうまく解決してくれるように思えた…
ところが久しぶりに舞い戻ったCSSの状況はと言えば…やっぱりダメみたい。
自作テーマはflexboxの使用でレイアウトをすっきり解決したい。そう思っていましたが…IE11がバグだらけ？？
caniuseでflexboxの対応状況を確認する
flexboxがどの程度ブラウザで対応可能なのか、これを調べるにはcaniuseというサイトを使います。
Can I use... Support tables for HTML5, CSS3, etc
Settingsをいじると地域を日本にしたり対象となるブラウザシェアを設定したりすることが可能です。
結果は…IE系はflexbox対応がキツそうですね。
「Known issues」のところにもたくさんの記述があります。Google検索してみてもIE11とflexboxに関するたくさんのバグ情報がみつかります。
いやよく考えるとIE11ってそんなに新しいブラウザじゃないし。仕方ない面はあると思いますけどね。
自作テーマを制作するにあたりIE11対応が問題になるのは実はflexboxだけではありません。一事が万事です。他のCSSについてもIE11ではお行儀の悪い振る舞いとなってしまうものがいくつもあります。
ときどきCSSの新しい機能を紹介していたりする記事を見つけて「便利だな、使ってみたいな」と思うことがあります。
でもよく調べてみるとブラウザ対応がキツイことがあります。うまくバグを回避していけばいいんでしょうけど、たくさんあると「そんなのとても全部潰していられないな」と思います。
ジレンマですね。
IE11を切れるか
難しいですね。
IE11の延長サポート終了日は2025年10月15日だそうです。まだまだ残存期間ありますね。
はるなぴのサイトではシェア2％ですが、一般的にはやはりまだ10％以上もシェアがあるようです。
どうしよう？？
flexboxだけは何とか対応を工夫することにして他のCSSは新しいものを追いかけ過ぎないようにしようかな？
それともfloatとclearfixで従来通りレイアウトを組んでいくか…
わざわざ危険を冒す必要はないような、でもflexbox使ってみたいし…
思い切ってIE切るか！
いや、やっぱり無理。
と、堂々巡りです。
しかし根幹に関わることなので、ここを決めないことには自作テーマ制作は進みませんよね。
うん、flexbox勉強しなおします！IE11も切らずに頑張る！（IE8とIE9はさすがにゴメンナサイさせてもらいます。シェアもコンマ以下だし。）
ということで本でも買おうと思います！
P.S.プロの人ってホント尊敬します！
browserlistは> 1% in JPで行きます。
