ブラウザ間の互換性の確保:すべてのブラウザでシームレスに機能する Web サイトを構築する

Web 用に構築する場合、トンネル ビジョンを開発し、自分だけのために構築するのは簡単です。視聴者の多様なニーズを無視して、自分の好みや好みのブラウザでの見え方だけに集中してしまう可能性があります。これにより、重要な機能面が失われ、他のブラウザーで将来の互換性の問題が発生する可能性があります。

この記事では、フォーム要素、スクロールバー、フォントなどの特定の UI コンポーネントに焦点を当て、ブラウザ間の互換性を実現するための実践的な戦略について詳しく説明します。次に、すべての Web 開発者が採用すべき一般的なベスト プラクティスについて説明します。

「あなたはあなたのユーザーではないことを忘れないでください。あなたのサイトが MacBook Pro やハイエンドの Galaxy Nexus で動作するからといって、それがすべてのユーザーにとって動作するとは限りません。」 – MDN ウェブ ドキュメント

目次

• ブラウザ間の互換性とは何ですか?
• ブラウザ間でよくある問題と解決策
• ブラウザ間の互換性に関するベスト プラクティス
• 結論

簡単に言えば、ブラウザ間の互換性とは、ブラウザの選択に関係なく、Web サイトがすべてのユーザーに一貫した最高のエクスペリエンスを提供することを保証することです。

ブラウザーは異なるエンジンを使用するため、デフォルトでは Web サイトを異なる方法でレンダリングします。ユーザーのブラウザに関係なく、Web サイトの外観と動作を同じにするには、ブラウザ固有の機能を理解する必要があります。

ブラウザ間の互換性では、Web サイトは、Chrome、Microsoft Edge、Opera (Blink エンジンを搭載)、Firefox (Gecko エンジンを搭載)、さらには Safari (WebKit エンジンを搭載) で閲覧しているかどうかに関係なく、Web サイトの見た目や機能が同じであることが理想的です。

ブラウザ間の互換性の利点:

<オル>

リーチの拡大 - 使用しているブラウザに関係なく、より多くのユーザーがウェブサイトにアクセスできるようになります。

一貫したユーザー エクスペリエンス – ウェブサイトの外観と機能はプラットフォーム全体で統一されています。

検索エンジン最適化 (SEO) の向上 – ウェブサイトがよりユーザーフレンドリーになることで、より高いランキングが得られます。

ブラウザ間でよくある問題と解決策

さまざまなブラウザでの Web ページのテスト結果を示すインフォグラフィック。画像クレジット ブラウザスタック

フォーム要素

<input> などのフォーム要素の外観と動作 、<select> 、<textarea> 、および <button> ブラウザによって大きく異なる場合があります。これは、ユーザーによるフォームの操作方法 (クリック、フォーカス、入力など) を含め、フォームの視覚的側面と使いやすさの両方に影響します。

たとえば、<input> のプレースホルダー テキスト フィールドは、あるブラウザでは薄く表示され、別のブラウザではよりはっきりと表示され、読みやすさの問題につながる可能性があります。

これを解決するには:

• CSS を使用して、フォーム要素の外観を可能な限り標準化します。
• プレースホルダの場合、ブラウザ間でコントラストと読みやすさを確保します。

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
 color: #909090;
 opacity: 1; /* Firefox */
}
input.studentid:-ms-input-placeholder { /* Microsoft Edge */
 color: #909090;
}

上記の CSS コードは、ブラウザ全体の入力フィールドのプレースホルダー テキストをターゲットにし、その色を #909090 に設定し、完全な不透明度を確保して一貫した表示を確保します (Microsoft Edge の特定のルールを使用)。

フォント

フォントとタイポグラフィは、デフォルトのフォント サイズの違いからフォント レンダリング エンジンの違いまで、ブラウザ間の互換性に関するいくつかの問題に直面しています。これは、テキストの太さ、間隔、全体的な外観に影響を与える可能性があります。

Edge に比べて Chrome ではフォントが細く、間隔が広く表示される場合があり、読みやすさとデザインの一貫性に影響します。

これを解決するには:

• CSS で基本フォント サイズを定義し、相対単位 (em など) を使用します。 または rem ) 以下のコードに示すように、テキストのサイズを変更します。これにより、スケーラビリティと一貫性を維持できます。

html {
 font-size: 16px; /* Define a base font size */
}
body {
 font-family: 'Open Sans', sans-serif;
 line-height: 1.6;
 color: #333;
}
h1, h2, h3, p {
 margin: 2rem;;
 padding: 1.5rem;
}

• ウェブ フォントを使用する場合は、ブラウザ間で互換性のあるフォントの読み込みを提供する Google Fonts などのサービスを使用して、フォントがすべてのブラウザで適切に読み込まれるようにしてください。

<link href="<https://fonts.googleapis.com/css?family=Open+Sans&display=swap>" rel="stylesheet">

• 以下のコードは、ブラウザに関係なく、Web サイト上で「Open Sans」フォントが同じに見えるようにします。これは、読み込みを高速化するために、コンピューター上に既に存在している可能性のあるフォントのバージョンを使用して最初に行われます。それ以外の場合は、インターネットからフォントを取得しますが、デフォルトのフォントがロードされるまで待機している間にデフォルトのフォントに置き換えます。

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: local('Open Sans Regular'), local('OpenSans-Regular'), url(<https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2>) format('woff2');
}

スクロールバー

スクロールバーのスタイル設定は、ブラウザーごとにサポートが一貫していないため、Web 開発者にとって長年の課題でした。 Chrome、Safari、Edge などのブラウザでは、CSS を使用してスクロールバーをカスタマイズする方法が提供されていますが、サポートのレベルや実装方法は異なります。

最近の更新では、スクロールバーのカスタマイズの標準化が改善され、ほとんどの最新ブラウザが同様の機能を採用しています。ただし、アプローチにはまだいくつかの違いがあります。

Chrome、Edge、Firefox の場合 、CSS scrollbar-width を使用できます。 と scrollbar-color プロパティを使用してスクロールバーの外観をカスタマイズします。これらは、サポートするブラウザ間でスクロールバーのスタイルをより一貫した方法で提供することを目的とした新しい標準の一部です。

/* For Chrome, Firefox, and Edge */
scrollbar-width: thin;
scrollbar-color: #c0c0c0 #f0f0f0;

サファリの場合 、WebKit レンダリング エンジンを使用する場合、::-webkit-scrollbar を使用する必要があります。 同様のスタイルを実現するための疑似要素。このメソッドは、WebKit ベースのブラウザに固有です。

/* For Safari */
.mostly-customized-scrollbar::-webkit-scrollbar {
 width: 5px;
 height: 8px;
 background-color: #aaa; /* or add it to the track */
}

上記の CSS コードは、サイズと色を調整することで、これらのブラウザのスクロールバーの外観をカスタマイズします。

ただし、すべてのブラウザ間で一貫性を保つには、デフォルトのスクロールバーの外観がデザインに悪影響を及ぼさないように Web ページをデザインする必要があります。

ブラウザ間の互換性に関するベスト プラクティス

測定ツールを示すインフォグラフィック。画像クレジット:Creative Bloq

Doctype を定義する

HTML ドキュメントを <!DOCTYPE> で始めます。 標準モードがアクティブ化されていることを確認するための宣言。

これは、ページがどのバージョンの HTML で記述されているかを Web ブラウザーに伝えるため、重要です。これがないと、ブラウザーは「互換モード」でページを表示する可能性があります。つまり、ブラウザーは、古い非標準コードを記述したものとみなします。最新のウェブ標準が完全には適用されていないため、最終的には予測できないスタイルやレイアウトの問題が発生します。

<!DOCTYPE> HTML5 の宣言は、HTML ファイルの先頭で次のようになります。

<!DOCTYPE html>

CSS リセットを使用する

CSS リセットは基本的に、共通の要素を対象とする一連のルールを追加してデフォルトのスタイルを削除し、ブラウザのデフォルトの不一致を減らします。

さまざまなブラウザーには、マージン、パディング、フォント サイズなど、HTML 要素の固有のスタイルが異なります。したがって、CSS リセットを実装すると、コードに記述したスタイルのみが有効になります。これにより、さまざまなブラウザーで Web ページのスタイルを設定するための一貫したベースラインが得られます。

自分でゼロから開発することを好む開発者もいます。そして、以下のコードに見られるように、私と同じように、Eric Meyer の人気のある無料の CSS リセットを使用している人もいます。

/* http://meyerweb.com/eric/tools/css/reset/ 
 v2.0 | 20110126
 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Normalize.css を使用する別の開発者グループがあり、npm などのパッケージ マネージャーを使用してインストールし、CSS にインポートできます。

npm install normalize.css

CSS プロパティのサポートを確認する

高度な CSS 機能を使用する前に、Can I Use などの Web サイトで互換性を確認してください。ここでは、さまざまなブラウザーやバージョンにわたる HTML、CSS、JavaScript 機能の詳細な互換性表を見つけることができます。これは、どのテクノロジーを使用するか、いつフォールバックを実装するかについて情報に基づいた決定を下すのに役立ちます。

以下のスクリーンショットでは、CSS グリッドを検索すると、それをサポートするさまざまなブラウザーとそのバージョンがすぐに表示されました。そのため、Web ページに CSS グリッドを実装する前に、CSS グリッドが動作するブラウザについて理解しています。

CSS グリッドのブラウザ互換性。

レスポンシブな Web サイトを作成する

私たちが現在住んでいるマルチデバイスの世界では、Web 開発者として応答性を優先することが求められています。

流動的なレイアウト、柔軟な画像、メディア クエリを使用して、Web サイトをあらゆる画面サイズに適応させることができます。適切な応答性を実現することの波及効果は、ブラウザ間の互換性、アクセシビリティ、ユーザー エクスペリエンスの向上です。

ここでは、レスポンシブ デザインのベスト プラクティスとその実装方法について説明した記事を紹介します。

クロスブラウザ テストを行う

最近、プログラミングではテストが非常に流行語になっていますが、それは、作成したコードが期待どおりに動作することを確認することが非常に重要であるためです。

ただし、TypeScript コードがスムーズに実行されるかどうかを確認するだけではありません。単純な Web プロジェクトであっても徹底的なテストが必要です。

クロスブラウザ テストとは、Web ページをさまざまなブラウザやデバイスで試して、全体的に一貫して表示され、動作することを確認することを意味します。

結論

ブラウザ間の互換性を言うのは一口に言っても難しいかもしれません。しかし、これまで見てきたように、Web サイトを構築する際には考慮することが不可欠です。コードをテストして調整し、上で説明した 5 つのベスト プラクティスのいくつかを実装することで、Web サイトの互換性を徐々に高めることができます。

したがって、次のウェブサイトやウェブアプリのカーテンを引く前に、Chrome、Firefox、Safari、その他のブラウザのユーザーが同じものを見たり体験したりしているかどうかを必ず確認してください。

以下に役立つリソースをいくつか示します。

• ブラウザ間の互換性に関する MDN ウェブ ドキュメント
• ブラウザ間の互換性の重要性に関するコードペーパー
• Eric Meyer が CSS リセットについて語る

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう