ブラウザはどのようにWebページを表示し、なぜ同じように見えないのですか？
ウェブを閲覧しているときに、デバイスごとに外観が異なるサイトに出くわすことは珍しくありません。おそらく、一部の機能はまったく機能しません。
多くの場合、これはWebサイトの問題ではありません。それはあなたのブラウザです。 5つのメインデスクトップブラウザは、4つの異なる「レンダリングエンジン」を使用してWebページを表示します（Windows10用の新しいMicrosoftEdgeブラウザは5つ目を導入します）。それぞれの動作は異なります。
つまり、使用しているブラウザ、さらにはそのブラウザのバージョンによって、Webのエクスペリエンスが変わる可能性があります。
レンダリングエンジンとは何ですか？
Webページは、一度に1ピクセルずつダウンロードされ、画面に表示される単一のエンティティではありません。代わりに、基本的には、HTML、CSS、JavaScript、PHPなどのさまざまなタイプのコードで記述された一連の命令であり、ブラウザに何を、どこで、どのように実行するかを指示します。
各ブラウザは、レンダリングエンジン（レイアウトエンジンとも呼ばれる）を使用して、コードに含まれるコンテンツとスタイル情報を取得し、完全にフォーマットされた形式で画面に表示します。
問題は、すべてのブラウザで使用される単一のレンダリングエンジンがないことです。また、各言語は詳細な仕様によって定義されていますが、エンジンはその仕様の解釈しか提供できません。
特にCSS（スタイリング情報を提供するコード）では、まったく同じ結果を生成するエンジンはありません。違いは、あちこちで奇妙なずれたピクセルにすぎない場合もありますが、根本的に異なる場合もあります。
最も人気のあるブラウザが使用する主なレンダリングエンジンは4つあります。
- WebKit： OS XおよびiOS上のSafari、およびネイティブAndroidブラウザーを含むモバイルデバイス上の他の多くのブラウザーで使用されるオープンソースエンジン。
- 点滅： WebKitに基づくオープンソースエンジンであり、Chrome、Opera、Amazon Silk、AndroidのWebView（アプリ内で開くブラウザー）を強化します。
- Gecko： Mozilla Foundationによって開発されたオープンソースエンジンであり、Firefoxで使用されています。
- トライデント： Microsoftによって開発され、InternetExplorerで使用される独自のエンジン。 Microsoft Edgeブラウザは、EdgeHTMLと呼ばれる新しいバージョンを使用します。
Web標準
異なるレンダリングエンジン間のギャップは、InternetExplorerが主要なブラウザであったときよりもはるかに小さくなっています。
acid3などのテストは、ブラウザーがページをどれだけ正確にレンダリングするかを示しており、最新のブラウザーのほとんどはスコアが高くなっています。ただし、標準に準拠することは非常に複雑な作業です。
HTML、CSSなどの仕様は膨大です。新しい要素が追加されます。古い、未使用、または古いものは削除されます。レンダリングエンジンがこれらの変更を反映するまでに長い時間がかかる場合があります。
HTML5およびCSS仕様の一部の要素は、メインストリームブラウザーでまだサポートされておらず、一部しかサポートされていないものもあれば、一部のブラウザーでサポートされているものもありますが、すべてではありません。
ウェブサイトhtml5test.comを使用すると、ブラウザと実行している特定のバージョンをテストして、HTML5の公式機能と実験的機能の両方をどの程度サポートしているかを確認できます。執筆時点では、Chromeは主要なブラウザの中で最高にランク付けされており、Internet Explorer（v11）は最低にランク付けされています。
Web開発者が、あるブラウザでサポートされているが別のブラウザではサポートされていない機能を使用している場合、サポートされていないブラウザは、ほぼ同等の機能を採用するか、機能を完全に無視する必要があります（たとえば、透明なボックスは不透明としてレンダリングされる可能性があります）。
これにより、Webページのレンダリング作業が見た目よりもはるかに複雑になります。より頻繁に更新されるブラウザは、そうでないブラウザよりも標準に準拠している可能性があります。これは、はるかにまばらなIEの更新と比較して、Chromeの定期的な自動更新によって強調されています。
また、他の要因も関係しています。
- エンジンのバグ： レンダリングエンジンはソフトウェアであり、すべてのソフトウェアにバグが含まれています。重大なバグはすぐに発見されて解消されますが、Webページ上のコードの特定の組み合わせが、レンダリング時に予期しない結果を生成しないことを保証することは不可能です。
- Webページのバグ： ブラウザにはある程度のエラー耐性が組み込まれていますが、これはエンジンごとに異なります。コードにエラーがあるWebページは、あるブラウザでは完全にレンダリングされる可能性がありますが、別のブラウザではひどく壊れます。
- フォント： 書体の表示方法は、ブラウザではなくオペレーティングシステムによって処理されます。 WindowsとOSXはフォントのレンダリングが異なるため、同じブラウザで同じフォントを使用しても、異なるプラットフォームで表示すると見た目が異なる場合があります。
- レガシー： ブラウザは、公式仕様の一部になる前に、特にCSSの新機能を採用することがよくあります。機能の実装が採用時に変更された場合、ブラウザ開発者はその変更を採用して、古いバージョン用に設計された何千ものWebサイトとの互換性を損なうリスクを冒すか、新しいバージョンを完全に無視するかを決定する必要があります。
- 独自の機能： 一部のブラウザは、他の場所では利用できない独自のテクノロジを使用している場合があります。これは、Internet ExplorerのMicrosoftのActiveXフレームワークで最も有名に見られましたが、同社は新しいMicrosoftEdgeブラウザでは使用しません。
まとめ
非常に多くの問題が関係しているため、ブラウザがWebページを処理する方法の違いが続くのは当然のことです。
状況は改善していますが、完全に解決される可能性は低いです。誰もが選択したブラウザの最新バージョンを実行した場合に役立ちますが、6年前のInternet Explorer 8は依然として4.5％の市場シェアを維持しているため、それは遠い道のりです。
どのブラウザを使用していますか。また、最新の状態に保っていますか？選択したブラウザで動作しないWebサイトを見つけましたか？コメントでお知らせください。
画像クレジット：Jeremy Keith経由のデバイス、DuncanHill経由のサポートされていないブラウザ
-
UbuntuでデフォルトのWebブラウザを変更する方法
このガイドでは、Ubuntu LinuxでデフォルトのWebブラウザーを変更する2つの異なる方法（コマンドラインまたはUbuntu設定の使用）について説明します。 Ubuntuマシンに複数のブラウザがインストールされていますか？デフォルトのWebブラウザを別のブラウザに変更したい場合は、少し混乱することがあります。コマンドラインまたはUbuntu設定を使用した2つの簡単な方法を次に示します。 コマンドラインからUbuntuのデフォルトブラウザを変更する Chromiumが現在コンピュータのデフォルトのWebブラウザであり、Firefoxに変更したいとします。 Ubuntuツールのupd
-
iPhoneとiPadでデフォルトのWebブラウザを変更する方法
Appleは、iOS 14でサードパーティのブラウザをデフォルトのアプリとして使用できるようにする新機能を導入しました。つまり、AppleのデフォルトのSafariブラウザのファンでない場合は、代わりのブラウザ（Google Chromeなど）を選択できます。リンクをタップすると自動的に開きます。 iOS14でデフォルトのウェブブラウザを変更する方法は次のとおりです。 1.iPhoneで設定アプリを起動します。 2. [アプリ]セクションまで下にスクロールして、デフォルトのブラウザとして設定するブラウザをタップします。新しいデフォルトのブラウザとしてChromeを使用しています。 3.