先日、「この世界からようやく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だけレイアウトがおかしいな、動作がおかしいな』という場合は、そこらへんを念頭に、原因を探すといいかもしれない。