最近の主要ブラウザのレンダリングエンジンや、ベンダープレフィックス事情がどうなってるのか調べてみた

先日、「この世界からようやく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-」の４つが使われていたけど、OperaのレンダリングエンジンがBlinkになり、Opera用のベンダープレフィックス「-o-」は不要となっている。

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

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

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

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