ブラウザの互換性の問題を軽減

フロントエンドエンジニアとして、ブラウザの互換性の問題を処理する時間が少なくありません.ブラウザの互換性の問題を減らす方法についてまとめました.
実行環境の決定
開発前に、ページの実行環境を決定します.どのブラウザと互換性を持つか、画面解像度を決定します.
私たちの運用環境を理解していないと、互換性も言えません.実行環境を決定してから、適切な方法を選択することもできます.HTML 5とCSS 3技術の応用評価を利用して、どの技術を使用するかを選択することができます.
クエリのプロパティの互換性
プロパティを使用する前に、CanI Useを使用して、各ブラウザでのプロパティの互換性を問い合わせることができます.コードでModernizrで特性検出を行うこともできます.
次は互換性のあるWebサイトです.

es 5仕様ブラウザ互換性テーブル

es 6仕様ブラウザ互換性テーブル

html 5移動端互換性速報

本当にプロパティを使いたいのですが、互換性のあるブラウザがサポートされていない場合は、サポートするライブラリがあるかどうかを探してください.

HTML5 Cross Browser Polyfills

HTML5 POLYFILLS

互換性の問題が発生する書き方について
互換性の問題が発生するのは、私たちの書き方の問題ではなく、ブラウザ自身のバグ(IE 6の二重距離の問題など)や、ブラウザの標準に対するサポートが一致しないことがあります.互換性の問題が発生する書き方を理解し、そう書かないようにします.
ブラウザの互換性-根本原因のコンテンツリストを真剣に検討することをお勧めします.
十分なテスト
iTestがおすすめです.アリが出したテストツールです.主流ブラウザのスクリーンショット、デッドリンク検出などをサポートします.
現在、いくつかのマルチブラウザ自動化テストのツール、サービス(Sauce LABSなど)も多く、まだあまり研究されていませんが、後で研究して共有することができます.
いくつかのテクニック

IEでページにアクセスさせる場合は、できるだけ最新のIEでエンジンをレンダリングします.HTMLにタグを付けることで.

デュアルコアブラウザ(360、検索犬などの国産ブラウザ)に本ページにアクセスさせる場合は、webkitカーネルでレンダリングします.HTMLにタグを付けることで.(注:現在360ブラウザのみ)

HTML 5でのDocType:。 DocType 。

いくつかのCSS属性はブラウザプレフィックスを付けることを覚えている

ページの要素が変更された場合、再描画されるべきであるが、ブラウザは再描画されず、要素を非表示にして表示することでブラウザを再描画させることができる

拡張読書

W 3 Help-互換性-根本原因内容リスト

フロントエンドエンジニアはどのようにして互換性に関する知識を体系的に整理し蓄積しますか?(知乎)