タスク12-ブラウザ互換性

1、CSS hackとは

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

2、ブラウザの互換性について話す

第一に、製品の参加者、および参加者が使用する各ブラウザの割合は、効果が優先されるか、基本機能が優先されるか.第二に、コストの考慮、投入産出比.第三に、どのブラウザと互換性があり、どのバージョンに互換性があり、どのブラウザがどの効果をサポートするか.第四に、漸進的な強化と優雅な劣化の選択第五に、互換性のニーズに応じて技術フレームワークを選択する.例えば、Bootstrap(>=ie 8)jQuery 1.~(>=ie6), jQuery 2.~ (>=ie 9)Vue(>=ie 9)第6に、互換性のニーズに応じる互換性ツールhtml 5 shivを選択する.js、respond.js、css reset、Modernizr、postCSS第七、条件注釈、CSS Hack、js能力検査はいくつかの補修を行う.

3、ブラウザ対応の書き方を5種類以上挙げる

1)、条件注記

                    
！   [if !IE]            IE
lt  [if lt IE 5.5]     IE 5.5
lte   [if lte IE 6]       IE6
gt  [if gt IE 5]          IE5
gte   [if gte IE 7]       IE7
|     [if (IE 6)|(IE 7)] IE6  IE7

2)、属性選択器

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

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)、条件注記とクラスセレクタを組み合わせて全体的に最適化する.

5)、Modernizrツールを使用して実行すると、html要素にCSSのclass名が追加されます.これらのclass名は、現在のブラウザでサポートされているプロパティとサポートされていないプロパティをマークし、サポートされているプロパティは、その日のプロパティの名前をclass(例:canvas,websockets)として直接表示し、サポートされていないプロパティが表示されるclassは「no-プロパティ名」です.以下に、IE 9で生成されるフィーチャータイプを示す.

Modernizrが要素で生成したclass名を直接使用して、現在のブラウザをサポートするためにcssファイルに適切なプロパティを定義できます.たとえば、次のコードは、shadowシャドウをサポートするブラウザにshadowを表示し、サポートされていないブラウザに標準の枠線を表示する属性を持つことができます.

.boxshadow #MyContainer { 
border: none;
 -webkit-box-shadow: #666 1px 1px 1px;
 -moz-box-shadow: #666 1px 1px 1px;
} 
.no-boxshadow #MyContainer {
 border: 2px solid black;
}

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

条件注釈条件注釈は、HTMLソースコードにおいてIEによって条件付きで解釈される文である.条件注釈は、IEにコードを提供および非表示にするために使用され得る.条件注記は、MicrosoftのInternet Explorer 5ブラウザで最初に表示され、Internet Explorer 9がサポートされるまで表示されます.マイクロソフトはすでにIE 10でサポートを停止すると発表した.IE Hackは、IEブラウザに対して異なるCSSを記述し、IEを正常にレンダリングするプロセス
jsコンピテンシー検出ブラウザのコンピテンシー検出ターゲットは、特定のブラウザを検出するのではなく、ブラウザのコンピテンシーを検出する.これにより、ブラウザが特定のコンピテンシーをサポートしているかどうかを検出するだけで、特定のソリューションを提供することができます.この部分の検出は、ブラウザの互換性の問題を解決する主な検出です.
html5shiv.jsは、IE 9の次のバージョンのブラウザがHTML 5の新規タグを認識せず、CSSが機能しないという問題を解決するために使用されます.そこで、低バージョンのブラウザ、すなわちIE 9以下のブラウザをサポートするには、このhtml 5 shivを使用します.jsはとても良い選択です!respond.js Respond.jsは、IE 6-8およびCSS 3メディアクエリー機能をサポートしていない他のブラウザにメディアクエリーのmin-widthおよびmax-width特性を提供し、応答型ウェブデザインを実現するための小さなスクリプトです.css resetはブラウザのデフォルトスタイルをすべて削除し、より正確にはラベルスタイルを再定義します.ブラウザのCSSのデフォルト属性を上書きします.最も簡単な言い方は、ブラウザが提供するデフォルトのスタイルを上書きすることです.これがCSS resetです.normalize.css Normalize.cssはカスタマイズ可能なCSSファイルで、異なるブラウザがWeb要素をレンダリングするときに形式をより統一します. ， CSS reset 。 ， 。 。 ， 。 。 Modernizr Modernizrは、ブラウザがこれらの機能をサポートしているかどうかにかかわらず、さまざまな状況のJavaScriptとCSSを簡単に作成できます.これは漸進的な強化を処理する完璧な案です.Modernizrは、ページがロードされるとすぐに特性を検出します.次に、検出結果を含むJavaScriptオブジェクトを作成し、html要素にCSSを調整しやすいclass名を追加します.
postCSSはプラットフォームとして理解でき、いくつかのプラグインを上に走らせることができ、CSSを抽象文法ツリーに解析することができ、PostCSSというプラットフォームを通じて、私たちはいくつかのプラグインを開発して、CSSを処理することができます.人気のあるプラグインはautoprefixerのように、互換性の問題を処理することができます.CSSを正常に書くだけで、autoprefixerは互換性コードを自動的に生成することができます.

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

http://caniuse.com/