1-12.ブラウザ互換性

参照1.史上最も完全なCSSハック方式一覧2.先端のスイス軍刀:Modernizr.js 3.CSS hack-wikipedia 4.CSS hack-baidu 5.CSS Resetのあれらの事(一)の歴史の発展とNormalizeについて.css

一、CSS hackとは何ですか。

ブラウザはタイプ、バージョンによってCSSに対するサポートの程度、解析が一致しない.これにより、同じCSSで異なるブラウザでのページ効果が異なる.統一されたページ効果を得るために、異なるブラウザまたは異なるバージョンに対して特定のCSSスタイルを記述するプロセスをCSS hackと呼ぶ.

二、ブラウザ互換の考え方

が必要かどうか

製品の角度:製品の参加者とその使用ブラウザの割合、効果が優先されるか、機能が優先されるか.

コストの観点:必要かどうか.

互換度

最低互換ブラウザタイプまたはバージョンは、どのような効果を達成する必要があります.

はどのように

を実現します

適切な技術フレームワークまたはライブラリ;

は、漸進的に強化するか、それとも優雅に降格するかを明確にしている.

適切な互換ツールを選択します.(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)

CSS hack(条件コメントなど)、js能力検出.

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

条件注記(IE 9及び以下)

IE 6の場合、

You are using Internet Explorer 6.

が有効です.

IE 9および以下のバージョンを除く他のブラウザは有効です.

IE 8の場合、ie 8 onlyをロードする.css.

    
    
    alert(1);
    
    

属性接頭辞法

.box{
  color: red;
  color: yellow\9;  /*ie 6~10*/
  *color: pink; /*ie 6~7*/ 
  -color: blue; /*ie 6*/ 
}

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

/*for Chrome/Safari*/  
@media screen and (-webkit-min-device-pixel-ratio:0){ 
  .hacktest {
    background-color:gray;               
  }
}  

jsを利用してブラウザUAに従って属性値

を追加する.

//js html           UA
var htmlObj = document.documentElement;
htmlObj.setAttribute('data-useragent',navigator.userAgent);
htmlObj.setAttribute('data-platform', navigator.platform );

/*   CSS             */
html[data-useragent*='MSIE 10.0'] #id {
    color: #F00;
}

利用ツール例えばModernizr応用modernizr.js後、実行時に現在のブラウザでサポートされているプロパティとサポートされていないプロパティ

が生成されます.

次にbox-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;
}

四、以下のツール/名詞は何をしていますか。

条件注釈条件注釈はIEでのみ有効であり、IEブラウザのプライベートコードであり、if判定のような構文注釈ブロックである.

IE Hackは、低バージョンのIEブラウザに対して作成された識別されたスタイルなどであり、ページ効果と他のブラウザとの整合性を保つ.

jsコンピテンシー検出jsを使用して、現在のブラウザがいくつかの特性または方法をサポートしているかどうかを検出します.

html5shiv.jsは、IE 9および以下のブラウザで利用可能なhtml 5の新しいラベルを生成する.

respond.jsは高速で軽量なpolyfillであり、IE 6-8およびCSS 3 Media Queriesをサポートしない他のブラウザにメディアクエリーのmin-widthおよびmax-width特性を提供し、応答型ウェブデザインを実現する.

css resetは、ラベルスタイルを再定義することによって、ブラウザのデフォルトスタイルを上書きします.

normalize.cssは有用なブラウザのデフォルトスタイルを保持し、html要素のデフォルトスタイルにブラウザ間での高度な一貫性を提供します.ブラウザのバグも修正されました.

Modernizrは、ブラウザがCSSまたはjsの機能をサポートしているかどうかを検出します.サポートすれば、開発者はこれらの特性を十分に利用していくつかの仕事をすることができ、逆に、開発者も安定した劣化の代替案を提供することができます.

postCSS postCSSはjsプラグイン変換スタイルシートのツールです.これらのプラグインはあなたのCSSを検査することができて、変数と混合を支持して、CSS 3の新しい特性の文法、行内のピクチャーなどを転化します.

五、互換性クエリー

Can I Use