2016年を振り返って、 HTML, CSS, JavaScript の書き方を変えたところ

公開日:

2016年のブラウザ事情の進展に伴い、実務で HTML, CSS, JavaScript の書き方が変化した部分を列挙してみます。あくまで代表的なもののみです。

ブラウザのサポートバージョン変化

IE 8 サポート終了

2016年1月に IE 8 のサポートが終了しました。

  • html5shiv.js の読み込みが不要になった
  • SVGが(PNGによる代替画像を用意することなく)使えるようになった
  • video要素、audio要素が使えるようになった
  • ::before, ::after 擬似要素をダブルコロンで書けるようになった
  • :not 擬似クラスが使えるようになり、例えば一行テキストエリアのセレクターが input:not([type]), input[type="text"] で正確に表せるようになった
  • addEventListener(), getElementsByClassName(), String.prototype.trim, Array.prototype.indexOf, Date.now(), Node.textContent など多数のポリフィルが不要になった
  • その他、主に JavaScript において IE 8 特有のバグ対応記述が大幅に削減された

15年ほど前は、いずれ XHTML(application/xhtml+xml)の時代になるだろうと思っていましたが、その MIME を認識しない最後のブラウザである IE 8 が消え去ったものの、そういう未来は来ませんでしたね。

IE 9 ほぼ無視

IE 9 は Windows Vista との組み合わせにおいて2017年4月まで延長サポートが続いていますが、シェアが少なくなってきていることから、サイトのフルリニューアルにあたり対応を求められることは少なくなりました。

  • Flexbox が使えるようになった
  • それに伴い、 JavaScript での「高さ揃え」は複雑なケースを除きほぼ不要になった
  • transform の -ms- 接頭辞が不要になった
  • Element.classList のポリフィルが不要になった

IE 10 サポート終了

IE 9 対応を求められる一部のサイトを除き、 IE は 11 だけサポートできれば済むようになりました。

  • template要素やpicture要素が、ポリフィル併用で使えるようになった(自分が使っているポリフィルは IE 10 以下未対応なので)
  • Flexbox 関係の -ms- 接頭辞が不要になった
  • HTMLElement.dataset のポリフィルが不要になった

Android 4.3 以下ほぼ無視

シェア低下に伴い、 Android 4.3 以下の対応を求められることは少なくなりました。「あの『Pokémon GO』ですら Android 4.4 以上ですよ」と説得できるようになった面も大きいようです(ディレクター談)。

  • linear-gradient() や transition の -webkit- 接頭辞が不要になった
  • Flexbox関係の旧仕様記述(display: -webkit-box とか)が不要になった

環境面の変化

高解像度

Retina ディスプレイといえば、一昔前はスマートフォン、タブレット端末と一部のノートPCのものでしたが、今や24型前後の4Kディスプレイが3万円台から買えるようになりました。統計を取ったわけではありませんが、PC用の大型ディスプレイでも Retina 環境が増えてきていると思います。(私も自宅マシンにDellの4Kディスプレイを導入しました。)

幅の広い画面向け表示においても、高解像度環境は当たり前に考慮すべき時代になってきたと言えるのではないでしょうか。

HTTPS

常時 SSL/TLS 対応が Google や Twitter などの著名サービスだけでなく、一般企業や個人サイトでも珍しくなくなってきました。またそういう世間の動きに対応してか、 API や iframe による埋め込みサービスも HTTPS 対応が増えてきたのは嬉しいところですね。

一方で、「何のために SSL/TLS が必要なのか」という本質的な理解は未だ充分でないと感じます。「ログインフォームをポップアップで開き、アドレスバーは邪魔なので非表示」とか「フォームの送信先は HTTPS だが、フォーム自体のページは HTTP」といったマズい実装が蔓延っていた時代よりはマシになったものの、「実在証明型の SSL/TLS 導入サイトにおいて、初めて訪れた場合など正確なドメイン名が分からない場合は証明書を開いて組織名を確認する必要がある」ことを知らずに「暗号化さえすれば(されていれば)安全」という誤解をしている人はまだまだ残っているように感じます。

スマートフォンで証明書の確認がまともにできる環境が少ないのも、誤解が解消されない要因の一つだと思いますが、PCブラウザも面倒で分かりにくいUIが昔からあまり変わっていないわけで、結局は正しい確認方法の啓蒙活動に勤しむより EV SSL の導入が進むことを期待するしかないのかな、という気がしています。

まとめ

IE 10 以下をほぼ無視できるようになった関係で、 Flexbox を使えるようになったのは大きな変化です。横並びといえば inline-block や table-cell を駆使して無理やり行っていたのが、やっとスマートなやり方でできるようになりました。それどころか、あと Android 4.4 さえ消え去れば、接頭辞が不要になるところまで来ているのですよね。

また、 <template> や <picture> などの新しい要素を使えるようになったのも、マークアップのやり方に影響が出た部分です。RWDサイトの画像切り替えにあたり、 class="sp-hidden" で display: none するという、へんちくりんな切り替え手法に頼る必要はなくなったのも嬉しいところです。

2017年はどうなるのでしょうね。 Grid Layout Module が使えるようになるのはもう少し時間がかかりそうですが、とりあえずは-moz-columns の接頭辞解消(www.fxsitecompat.com)が目前に迫っていますね。

当記事内に掲載している写真は、一部例外を除き自由に転載することができます。詳細は写真や図の転載についてを参照ください。