先日、「この世界からようやくIEがなくなるかもしれない、と感じた2020年に思うこと。」という記事を書いたんだけど、そういえば最近の主要ブラウザの環境ってどうなってるんだろう、ということでまとめてみる。

主要ブラウザについて

主要ブラウザの関係性

ウェブサイト制作界隈において、主要ブラウザと言われると「Chrome」「Safari」「Firefox」「IE」「Edge」「Opera」。これらの構成図は以下の通り。

各ウェブブラウザはそれぞれが独自で開発されているんだけど、「Opera」と「Microsoft Edge」は、Googleがオープンソース・ソフトウェアとして公開しているウェブブラウザ「Chromium」をベースに開発されている。「Google Chrome」も当然これがベース。

Edgeは「ChromiumベースのEdge」と、従来のEdgeの2種類が存在している。従来のEdgeは「レガシーEdge」などと呼ばれていて、最新Edgeへのアップデート時に自動で削除されるようになっている(意図的に削除しないことは可能)。

レンダリングエンジンの採用状況

で、これにHTMLやCSSや画像やその他各種データを解釈するレンダリングエンジンとの関係性を追加すると、こんな感じ。

Chromiumベースのブラウザは、「Blink」というレンダリングエンジンを採用していて、これは元々「Webkit」というエンジンの派生版。その「Webkit」も元々は「KHTML」というエンジンの派生版。

同様に、IEで採用されている「Trident」は、その派生版として「EdgeHTML」というレンダリングエンジンを生み出し、それがEdgeに採用されている。

Firefoxのエンジンは、元々「Gecko」なんだけど、最近は「Servo」というエンジンを開発していて、徐々にこちらへ置き換えを行っている状態。

ベンダープレフィックスの最新事情

これまでは、「-o-」「-ms-」「-moz-」「-webkit-」の4つが使われていたけど、OperaのレンダリングエンジンがBlinkになり、Opera用のベンダープレフィックス「-o-」は不要となっている。

また、BlinkはWebkitからの派生エンジンで「-webkit-」が使えるので、ベンダープレフィックスに関しては、以下の通りとなる。

  • 【-webkit-】Chrome, Opera, Microsoft Edge, Safari
  • 【-moz-】FireFox
  • 【-ms-】IE

ちなみに、iPhoneやiPadなどの「iOS」で動くブラウザは必ずレンダリングエンジンにWebkitを使用しなくてはならないため、「-webkit-」のみ有効となる。

Webkitは、KHTMLからの派生エンジンであるのは先述の通り。で、このWebkit自体がそもそも、「Safari」のレンダリングエンジンとして、Appleが開発をしているもの。

だから、iOS環境で動かすブラウザは全て、このWebkitが使われるというわけ。もしも『iPhoneだけレイアウトがおかしいな、動作がおかしいな』という場合は、そこらへんを念頭に、原因を探すといいかもしれない。