目次
ブラウザとレンダリングエンジン
ブラウザは、インターネットを見るための専用のソフトのことです。
Windowsを使っていれば標準でIE（Internet Exploler）がブラウザソフトとして入っていて、
MacであればSafariが入ってますね。
スマホにも同じようにブラウザソフトが入っていて、iPhoneならMobile Safariというもの、最近のAndroidならChromeが入っています。
他にもOperaやFirefoxというブラウザソフトも有名です。昔であればNetscapeというものも有名でした。
こういったブラウザソフトを使うことで私たちはインターネット上のHPを見ることができるってことです。
HPを見る側の人はブラウザというものをあまり気にする必要はりませんが、HPを作る側はこのブラウザの種類やバージョンを気にする必要があります。
なぜかというと
ブラウザの種類やバージョンによって、書いたプログラム（ソース）が思った通りに表示されないから
なんです。
ブラウザは私達が書いたHTMLのファイルを読み込み、そのソースを理解（解釈）して、画面に表示しています。
その理解する部分（コアな部分）のことをレンダリングエンジンといいます。
このレンダリングエンジンの種類によってHTMLやCSSの解釈が微妙に違っていたりするんですね。
そのため、Chromeブラウザでは思い通りに表示されているけどIEでは表示が崩れているなんてこともあるんです。
逆に違う種類のブラウザだけど同じレンダリングエンジンを使っていれば基本的には同じ見た目になるってことです。
（ブラウザの開発会社によって同じレンダリングエンジンをカスタマイズして出している場合もあるので、同じレンダリングエンジンだから絶対に同じというわけでもありません）
個人で作るレベルであれば気にするほどではないかもしれませんが、お金をもらって仕事としてやるとなれば各ブラウザできちんと表示できるよう、それぞれのブラウザごとに対応したコードを書いていく必要があります。
なぜブラウザとレンダリングエンジンが分かれているの？
ブラウザとレンダリングが分けられている理由は HTML でどんどん高機能なものが求められるようになり、 HTML の表示機能を作るのが大変になっているというところにあります。
例えば、 ブラウザとメーラーを作っていて、 ブラウザだけでなく、メーラーにも HTML の表示機能を付けたいという時、 個々のアプリで実装するよりもブラウザからレンダリングエンジンを分けられるようにして、 それを共有した方が開発はやりやすくなります。
LINEで送られてきた記事からHPを開いて見られるのも、Facebookでそのまま開いてHPが見られるのも、このブラウザとは別個になったレンダリングエンジン部分を入れているからなんですね。
レンダリングエンジンの種類
１．Trident
IE（Internet Exploler） のレンダリングエンジンは Trident と呼ばれています。
ブラウザとしてよく使われているのは IE ぐらいですが、 Windows アプリを開発する時に使われる HTML 表示用のコンポーネント（システムパーツの一部的なイメージ）としても提供されているので、 Windows では意外といろいろなアプリでこのレンダリングエンジンが使用されています。
２．Gecko
Firefoxに使われているものです。
Gecko は Mozilla Foundation で開発されているオープンソース（誰でも好きにシステムそのものをカスタマイズしていい）なレンダリングエンジンです。
こちらも Trident のように他のアプリからも利用できるのですが、 少し使い方が特異なせいか、使用されているのは Firefox や Thunderbird といった Mozilla 製品ぐらいです。
３．WebKit
Google Chrome, Safari のどちらもレンダリングエンジンは WebKit を使用しています。
これは Apple, Nokia, Adobe といった企業が中心となっている WebKit Foundation でオープンソースとして開発されています。 また、WebKit は iOS, Android の標準エンジンですので、モバイル用ブラウザではほとんど WebKit が採用されています。
また、Windowsが開発を行っているIEブラウザもIE11の次にEdgeという最新ブラウザを出しましたが、EdgeからこのWebKitを使ったことによって、ほとんどのPCで使われているブラウザは同じレンダリングエンジンを使っていることになります。
４．Presto
Opera のレンダリングエンジンは Presto という名前です。
任天堂 DS などにも使われているらしいですが、 モジュールとして公開されていないため、 ほぼ Opera だけで使われているレンダリングエンジンです。
プラットフォーム
Tridentを除いたレンダリングエンジンのほとんどは多様なプラットフォームで動きます。
プラットフォームというのは土台といった意味です。要はソフトを動かす土台＝機種 のことですね。
PCでも動くし、スマホでも動くってことです。
なので、iPhoneに使われているMobile SafariもレンダリングエンジンはWebKitのモバイル版が使われています。
CSSのベンダープレフィックス
CSS言語もバージョンがあり、今はCSS３というものになっています。
CSS３になったことで、単に色を塗りつぶしたりだけでなく、グラデーションやシャドウなど色々な表現ができるようになりました。
しかし、そういったCSS言語を読み込んで理解するのもこのレンダリングエンジンの役割。
CSS３の中にはまだ本決まりじゃないけどとりあえず試しで使えるようになっている表現がいくつもあります。
そして、レンダリングエンジンによってはそういった表現を理解するために「ベンダープレフィックス」というものをCSSを書くときに
プロパティの頭につけてやる必要があります。
そういったものは各レンダリングエンジンに対応したベンダープレフィックスをつけていないと読み込まれないので注意してください。
| レンダリングエンジン | プレフィックス |
|---|---|
| Trident | -ms- |
| Gecko | -moz- |
| WebKit | -webkit- |
| Presto | -o- |
使用例：
|
1 2 3 4 5 6 7 |
#button{ -webkit-box-shadow: 1px 1px 1px black; -ms-box-shadow: 1px 1px 1px black; } |
ブラウザとCSSの対応状況
使おうとしているCSSのプロパティが、どのブラウザのどのバージョンで対応しているのかは、下記サイトを見てください。
全部覚える必要はありません。実際の現場のエンジニア達も覚えちゃいないので。使うときに逐一下記サイトでみんなチェックしています。
また、Can I use というサイトもとても有名です。
CSSプロパティ名で検索すると各ブラウザとバージョンで対応できるのかどうかが一覧で出てきます。
カオスなAndroid
最近はスマホファーストと言われ、スマホで見る前提のサイトやWEBサービスが増えています。
なので、各スマホの対応は必須な状況。
しかし、そこで立ちはだかるのがAndroid端末です。
スマホにはiPhone（iOS）とAndroidという２大OS（オペレーティングシステム）があります。（PCでいえば、MacとWindowsですね）
iPhoneの場合はiPhone5s,iPhone6,iPhone6Plus,iPhone7,iPad,iPad Miniなどすべての機種が同じAppleが作っているため、iOSというOSを使用し、同じMobile Safariというブラウザが標準ブラウザ（最初に入っているブラウザ）になっています。
しかし、Androidの場合は作っている会社がみんな違います。
東芝が作っていたり、SHARPが作っていたり。
そして、やっかいなことに各社で同じAndroidというOSを使ってはいるものの肝心のブラウザは各社独自のブラウザ（各社が独自にレンダリングエンジンをカスタマイズしている）が標準で入っていたりします。
今でこそAndroid端末はみんなChromeというブラウザが標準で当たり前になってきましたが、数年前の端末などはまだまだ使っているユーザーもいるのが現状です。
さらには同じChromeブラウザを使っていたとしても端末（機種）が違うことによって、ボタンが上手く押せなかったりJSがちゃんと動かないなんてこともあります。
なので、一つ一つ個別にテストしてバグをみつけ、ネットで調べながら対応せざる負えないのが現状といったところです。
（深みにはまると１つの不具合を修正するのに何日もかかったりします）
Androidほどカオスなものはありません。
