Webフロントエンド-ブラウザ互換性

1.CSS hackとは?

Internet Explorer、Safari、Mozilla Firefox、Chromeなど、異なるメーカーのブラウザ、または同じメーカーのブラウザの異なるバージョン、例えばIE 6とIE 7では、CSSの解析認識が全く同じではないため、生成されたページの効果が異なり、私たちが必要とするページの効果が得られません.CSS hackはこの場合、異なるブラウザに対して異なるCSSを書く過程であり、異なるブラウザと同時に互換性を持ち、異なるブラウザでも私たちが望んでいるページ効果を得ることができます.
CSS Hackには大きく3つの表現があります

CSS属性接頭辞法

_color:red;  /*ie6*/
*color:blue; /*ie6,ie7*/
color:yellow\9; /*ie6-ie8*/

セレクタプレフィックス法

IE条件注釈法(すなわちHTMLヘッダ参照if IE)Hackは、実際のプロジェクトではCSS Hackの大部分がIEブラウザの異なるバージョン間の表現の違いに対して導入されている.注意:IE条件注釈法(HTML条件注釈Hack):すべてのIE(注:IE 10+は条件注釈をサポートしていません)に対して:、IE 6および以下のバージョンに対して:.このようなHackはCSSだけでなく、判断文に書かれたすべてのコードに対しても有効になります.

                       /*  IE7      */


    /*  IE6      */

2.ブラウザ互換性の考え方について

はしますか?まず、あなたの製品の視聴者、コストと収益に基づいて、ブラウザの互換性が必要かどうかを考えなければなりません.次に、ブラウザの互換性に代わる他のスキームがあるかどうかを考慮し、同じ効果を他の方法でシミュレートします.

はどこまでできますか?どこまで互換性があるか、インターネットExplorer、Safari、Mozilla Firefox、Chromeで互換性があるか、IEブラウザでどのバージョンがサポートされているか.

どうしますか?互換性のニーズに応じてbootstrap(>=ie 8)jquery 1.~などのテクノロジーライブラリとフレームワークを選択します.(>=ie6),jquery 2.~(>=ie 9)vue(>=ie 9)互換性のニーズに応じて互換性ツールを選択するには、html 5 shivなどが含まれる.js、respond.js、など.条件注記、CSS Hack、js能力検査はいくつかの補修を行う.

3.ブラウザ対応の書き方を5つ以上挙げる

(1)条件注記:

                       /*  IE7      */

(2)属性接頭辞法:

.box{
color: red;
_color: blue; /ie6/
color: pink; /ie6,7/
color: yellow\9; /ie/edge 6-10/
}

(3)セレクタ接頭辞法

*html *    IE6  
*+html *+    IE7  
@media screen\9{...}  IE6/7  
@media \0screen {body { background: red; }}  IE8  
@media \0screen\,screen\9{body { background: blue; }}  IE6/7/8  
@media screen\0 {body { background: green; }}   IE8/9/10  
@media screen and (min-width:0\0) {body { background: gray; }}   IE9/10  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }}   IE10  

(4)条件注記と互換ツールの組み合わせ

4. /

コメント
HTMLソースコードにおいてIE(IE<=9)で きで される に づく. は、IEにコードを および にするために され る.
IE Hack
IEブラウザに して なるCSS( 、セレクタ 、IE )を し、ページ を なるバージョンのIEブラウザで させる.
js
JSを して、ブラウザがどのブラウザであるかを するのではなく、ブラウザが つ を します.これにより、ブラウザが らかの を っている はシナリオが され、 がない は のシナリオが されます.
html5shiv.js
HTML 5タグがサポートされていないブラウザでは、HTML 5タグの を してシミュレーションし、 するCSSを にします.
respond.js
CSS 3メディアクエリをサポートしないブラウザ(IE 6-8)のためにCSS 3のメディアクエリをシミュレートする.
css reset
ブラウザのデフォルトの スタイルをクリアします.
normalize.css
なブラウザのデフォルトスタイルを します. されたスタイルは、ブラウザ のバグを し、 ブラウザの を します.CSSの を します.
Modernizr
ブラウザのCSS 3とHTML 5の を し、ブラウザの の を するJSクラスライブラリです.
postCSS
JSカードでCSSを します.CSSを ツリーに できます.

5. ？

http://caniuse.com/
(mission12)