ブラウザ互換性12

1.CSS hackとは

Internet Explorer、Safari、Mozilla Firefox、Chromeなど、異なるメーカーのブラウザ、または同じメーカーのブラウザの異なるバージョン、例えばIE 6とIE 7では、CSSの解析認識が全く同じではないため、生成されたページの効果が異なり、私たちが必要とするページの効果が得られません.
このとき、異なるブラウザに対して異なるスタイルのCSSを書いて、異なるブラウザでも私たちが望んでいるページ効果を得ることができます.このプロセスがCSS hackです
CSS Hackには大きく3つの表現形式があり,CSS属性接頭辞法,セレクタ接頭辞法およびIE条件注釈法がある.

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

製品を作るかどうかの角度(製品の参加者、参加者のブラウザの割合、効果優先か基本機能優先か)コストの角度(何かをする必要があるかどうか)

.

どのブラウザがどのような効果をサポートするか

のやり方

互換性ニーズに応じてテクノロジーフレームワーク/ライブラリ(jquery)Bootstrap(>=ie 8)jQuery 1.~を選択(>=ie6), jQuery 2.~ (>=ie9) Vue (>= ie9)

互換ニーズに応じる互換ツールhtml 5 shivを選択する.js respond.js css reset normalize.css Modernizr postCSS

条件注釈、CSS Hack、js能力検査はいくつかの補修

を行う.

漸進的な強化と優雅な降格の選択

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

一般的なプロパティの互換性
inline-block:>=ie 8 min-width/min-height:>=ie 8:before,:after:>=ie 8 div:hover:>=ie 7 inline-block:>=ie 8 background-size:>=ie 9フィレット:>=ie 9シャドウ:>=ie 9アニメーション/グラデーション:>=ie 10 caniuse.comはCSS属性の互換性を調べます
IE条件コメント
プロジェクト
例
説明
!
[if !IE]
非IE
lt
[if lt IE 5.5]
IE 5.5未満
lte
[if lte IE 6]
IE 6以下
gt
[if gt IE 5]
IE 5より大きい
gte
[if gte IE 7]
以上IE 7
"|""[if(IE 6)|(IE 7)]:IE 6またはIE 7は以下の例である.

    
    
    alert(1);
    

属性セレクタ

box{
 color: red; 
 _color: blue; /*ie6*/
 *color: pink; /*ie67*/ 
 color: yellow\9; /*ie/edge 6-8*/}

セレクタ接頭辞法

*html *    IE6  
*+html *+    IE7  
@media screen\9{...}  IE6/7  

容器が崩れる

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /*   ie67   */
}

inline-blockプロパティ

.target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

4.以下のツール/名詞は何をしていますか

条件コメント:
htmlソースコードでIEブラウザに条件付きで解釈される文.条件注記はIEにコードを提供して隠すことができる
IE Hack:
IEブラウザに対して書いた異なるCSSはIEを正常にレンダリングすることができる
js能力検査:
js文で現在のブラウザでサポートされているプロパティを検出し、レンダリングを説明することを意味します.
html5shiv.js:
IE 9の次のバージョンのブラウザでHTML 5の新規タグが認識されず、CSSが機能しないという問題を解決するための要素を作成します.
respond.js:
css 3 Media QueryをサポートしていないブラウザにIE 6-IE 8などの他のブラウザを含めてクエリーをサポートさせる.
css reset:
ラベルスタイルの再定義、ブラウザのCSSのデフォルト属性の上書き
normalize.css:
カスタマイズ可能なCSSファイルは、異なるブラウザがWeb要素をレンダリングするときに形式を統一することができます.
Modernizr:
modernizrはJavaScriptライブラリで、ブラウザがhtml 5とcss 3の特性に対してどのようなサポートがあるか、サポートされていないかを検出することができます.
postCSS:
postcssは、JavaScript言語でcss文を処理し、選択したプラグインで処理および表示します.

5.一般的にどのサイトで属性互換性を調べますか?

caniuse.comはCSS属性を調べてbrowserhacksと互換性がある.comチェックハックの書き方