一般的なブラウザ互換性の問題（概要）

ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript)、およびブラウザ ハックに他なりません。

スタイルの互換性 (css)

(1) 歴史的な理由により、ブラウザによってスタイルが異なります。Normalize.css を使用して違いを解消したり、ワイルドカードセレクタを使用してスタイルをグローバルにリセットするなど、独自の reset.css をカスタマイズしたりできます。

* { マージン: 0; パディング: 0; }

（2）CSS3が真の標準になる前に、ブラウザメーカーはこれらのプロパティの使用をサポートし始めました。 CSS3 スタイルの構文がまだ不安定だった頃、ブラウザの製造元はブラウザ プレフィックスを提供していましたが、現在でも一部のプロパティはブラウザ プレフィックスを使用して追加する必要があります。開発プロセスでは、通常、IDE 開発プラグイン、CSS プリプロセッサ、フロントエンドの自動ビルド プロジェクトを使用します。

ブラウザカーネルとプレフィックスの対応は次のとおりです。

相互運用性 (javascript)

（１）イベントの互換性の問題：通常、イベントハンドルのバインディング、削除、バブル防止、およびデフォルトのイベント動作処理をフィルタリングするためのアダプタメソッドをカプセル化する必要がある。

 var ヘルパー = {}

 // イベントのバインド helper.on = function(target, type, handler) {
 	ターゲットにイベントリスナーを追加します
 		target.addEventListener(タイプ、ハンドラー、false);
 	} それ以外 {
 		target.attachEvent("on" + タイプ,
 			関数(イベント) {
 				handler.call(target, event) を返します。
 		    }、 間違い）;
 	}
 };

 //イベントリスニングをキャンセル helper.remove = function(target, type, handler) {
 	ターゲットイベントリスナーを削除する場合
 		target.removeEventListener(タイプ、ハンドラー);
 	} それ以外 {
 		target.detachEvent("on" + タイプ,
 	    関数(イベント) {
 			handler.call(target, event) を返します。
 		}、 真実）;
     }
 };

（２）new Date()コンストラクタを使用する場合、各種ブラウザでnew Date(str)を使用して「2019-12-09」を正しく生成することができません。 正しい使い方は「2019/12/09」です。

（3）Chrome以外のブラウザと互換性のあるdocument.documentElement.scrollTopを介してscrollTopを取得する

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

ブラウザハック

（１）IEブラウザのバージョンを素早く確認する

<!--[IE 8の場合]> ie8 <![endif]-->
 
 <!--[if IE 9]> クールな IE9 ブラウザ<![endif]-->

（２）Safariブラウザかどうか確認する

/* サファリ */
 var isSafari = /a/.__proto__=='//';

（３）Chromeブラウザかどうか確認する

/* クローム */
 var isChrome = Boolean(window.chrome);

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。