ブラウザー間の互換性をデザインに組み込む場合、何を考慮すべきですか？

通常、ウェブサイトのデザインを作成するときは、1つのブラウザー（Chrome）に焦点を当て、別のブラウザーを開く前にそれを完全に構築します。完了したら、他のブラウザでテストして、指を交差させ、すべてが正常に見えることを期待します。

ブラウザー間で一貫性を保つのに役立つ利用可能なCSSノーマライザを知っていますが、不必要な肥大化を防ぐために、CSSノーマライザを使用しないこともあります。

私は最新のブラウザのみに関心があり、ピクセルパーフェクトなデザインは必須ではありません。ブラウザー間の互換性の問題による潜在的な頭痛や「CSSハック」を防ぐために、どのような設計（視覚的と内部の両方）に関する考慮事項に注意する必要がありますか？

最新のブラウザーのみを対象としていることを考えると（Chrome 37.x、Firefox 32.xを記述している時点では、Internet Explorer 11は主要な最新のレンダリングエンジンをカバーしているはずです）、クロスブラウザー互換性をかなり簡単に、ほとんどの場合に達成できます-ハック上記のすべてのブラウザが最新のHTMLおよびCSSプロパティのほとんどをサポートしているため、無料です。

始める前に自問すべきいくつかの質問：

1.）私のウェブサイトを同じクロスブラウザに見せるために費やした時間/お金からどのように利益を得ますか？

Webサイトを最適化し、すべてのブラウザーで同じように見せるために費やした何時間も、妥当な時間で効果が得られない場合、ブラウザー間の互換性を実現するために時間を浪費していることは明らかです（例： Chrome / Firefox向けにイントラネットWebサイトを最適化するために感知/支払いを行います（対象のライブラリがMicrosoftと10年契約でソフトウェアを実行している場合）。

2.）私のウェブサイトのコンテンツがすべてのブラウザで同じに見えることが重要ですか（ピクセルパーフェクト）？

すべてのブラウザーで同じように見えるように破線が必要であるという特定の理由がない場合は、それを気にする必要はありません。レンダリングルールによってレンダリングする場合は、ブラウザーに任せてください。すべてのブラウザで同じように見えるわけではありませんが、FirefoxまたはIEでWebサイトが破線を同じようにレンダリングしたかどうかを確認する一般的なユーザーはいないでしょう。ユーザーは1つのブラウザーを使用してコンテンツを閲覧する傾向があります。Webサイトのすべての機能が機能し、視覚的に魅力があるように見えれば、問題ありません。ピクセル完璧なデザインが必要になることは非常にまれです（特に、個人の開発者ポートフォリオWebサイトでは、自分のスキルを披露するためにそれらを実現したい場合があります）。

3.）Webサイトの機能はどのブラウザでも機能しますか？

最新のHTML / CSS（/ JavaScript）技術の多くは、すべてのブラウザーで機能するとは限りません。最新のHTML / CSS仕様はまだ完成しておらず、ブラウザーベンダーは、仕様に従わずに仕様を変更するか、仕様を変更することを決定することがよくあります。 、ベンダーはまだ彼らのブラウザの新しいバージョンをリリースしていませんでしたが。その場合は、2つのオプションがあります。

• サポートされていない機能を模倣するポリフィルを実装する
• フォールバックを提供します。フォールバックは通常、機能が制限されていますが、最小限のサポートが提供されるため、機能がサポートされていない場合でもウェブサイトは崩壊しません（「ブラウザがこの機能をサポートしていません」というメッセージが表示される方が、空白のページを表示するよりも優れています）。

ウェブサイトを構築する際の考慮事項：

• あなたのウェブサイトをモジュールと考えてください。1つのモジュール（Webサイトのナビゲーションなど）の設計を完了したら、同時にサポートする予定のすべてのブラウザーでテストします。問題が発生した場合は、次のモジュールに進む前に修正を試みてください。完成したデザインをデバッグし、問題の原因となっている部分を正確に把握していないよりも、コードの小さなチャンクをデバッグする方が簡単です。
• コードは最小限に抑えてください。divの表示/非表示のみが必要な場合、それを達成するためにサードパーティのフレームワークを実装する必要はありません（「jQueryが不十分」）-単純なJavaScriptで完全に実行できます。
• 早期にリファクタリングし、頻繁にリファクタリングします。もっと簡単な方法で作成できるCSSルールが多すぎると気づく場合があります。コードをリファクタリングすることを恐れないでください。読み取るコードが少なくなり、エラーのマージンが少なくなるので、あなたの人生と、後でコードで作業する潜在的な開発者の人生がはるかに簡単になります。
• ベンダープレフィックスを使用します。最新のCSS機能の多くは、最新バージョンでも実行するために特定のブラウザープレフィックスを必要とします。通常のCSSプロパティ名の前にベンダー接頭辞付きのプロパティ名を指定して、目的のブラウザーで機能させるようにします。

これらは、作業を開始する前に考慮すべき私の主な考慮事項になります。

注意する必要があるのは、HTML、CSSなどの特定の要素がさまざまなブラウザーとどの程度互換性があるかです。新しいHTML5要素（およびCSS3の一部のビット）は一部のブラウザーでは機能せず、デザインの領域で問題が発生します。

これは、考えられる多くの参照（Mozilla Developer Network、CSStricks、CanIUse、w3schools（w3foolsも参照））を調べることで確認できます。これらには通常、ブラウザ互換性セクションがあり、要素がどのブラウザで機能するか、互換性を支援するために代替またはプレフィックスを使用できるかどうかが示されます。次に例を示します。

条件付きコードを使用して、特定のブラウザーで機能するように追加することもできます。たとえば、バージョン5以下のIEでHTML5shivを使用する（HTML5要素を機能させる）には、次のようにします。

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></sc/>
<![endif]-->

そもそもきちんと動くものを作るのもいいのですが。

私は最新のブラウザのみに関心があり、ピクセルパーフェクトなデザインは必須ではありません。

そうすれば、大丈夫でしょう。標準に準拠している限り、最新かつ最高のものをターゲットにしているだけであれば、ブラウザー全体に大きな驚きはありません。フォールバック計画がなければ、まだ広くサポートされていないCSS機能に完全に依存しないでください。