フロントエンドベース05-ブラウザ対応

1.ブラウザ互換性の問題

ブラウザはフロントエンド技術の発展と一致しない

異なるブラウザ参照の標準、実現の方式は異なる

2.関連参考資料

ブラウザ市場シェア

caniuse

browserhacks

3.互換性の問題を扱う考え方

やるかどうか

製品の角度(製品の参加者、参加者のブラウザの割合、効果が限られているか、それとも基本機能が先に

あるか.

コストの観点(何かをする必要があるかどうか)

どこまで

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

の方法

互換ニーズに応じて技術フレームワーク、ライブラリ

を選択する.

互換性ニーズに応じて互換性ツール(html 5 shiv.js,respond.js,css reset,nomalize.css,Modemizr)

を選択

postCSS

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

を行う.

4.漸進的な強化と優雅な降格

漸進強化(progressive enhancement):低バージョンのブラウザに対してページを構築し、最も基本的な機能を保証した後、高級ブラウザに対して効果、インタラクションなどの改善と追加機能を行い、より良いユーザー体験

を達成する.

エレガントダウングレード(graceful degradation):最初から完全な機能を構築し、低バージョンブラウザに対して

互換性を行います.
5.適切なフレームの適切なフレームを選択する

Bootstrap ( >= ie8 )

jQuery 1.~ ( >= ie6 ), jQuery 2.~ ( >= ie9 )

Vue ( >= ie9 )

...

6.条件注記

条件注釈(conditional comment)は、HTMLソースコードにおいてIEによって条件付きで解釈される文である.条件付き注釈は、IEにコード

を提供および非表示にするために使用することができる.

条件注釈はIE 10の以前のバージョンによって解釈することができ、IE 10以降は条件注釈

をサポートしない.
7.CSS hack

IE、Safari、Mozila Firefox、Chromeなど、異なるメーカーのブラウザ、または同じメーカーのブラウザの異なるバージョン、例えばIE 6、IE 10は、CSSに対する解析認識が完全に同じではないため、生成されたページの効果が異なり、私たちが必要とするページの効果が得られない.そのため、異なるブラウザに対して異なるcssを行って、異なるブラウザでも私たちが望むページ効果

を得ることができるようにする必要があります.

CSS Hackには大きく3つの表現形式があり、CSS属性プレフィックス法、セレクタプレフィックス法、IE条件注釈法Hack、実際のプロジェクトではCSS Hackの大部分はIEブラウザの異なるバージョン間の表現の違いに対して導入された(ブラウザのバグを利用して的確な処理を行う)

である.

よくあるhack書き方

.box {
  color: red;   /*          */
  _color: blue; /*    IE 6    */
  *color: pink; /*    IE 6 IE 7    */
  color: yellow\9; /* IE 6~8     */
}

< !--[if IE 7]>

8.一般的な属性の互換性

inline-block: >=ie 8

min-width/min-height: >=ie 8

:before, :after: >=ie 8

div:hover: >=ie 7

inline-block: >=ie8

background-size: >=ie 9

フィレット:>=ie 9

シャドウ:>=ie 9

アニメーション、グラデーション:>=ie 10

9.一般的な互換性処理例

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

.target {
  /*   IE 6，7，8   inline-block   */
  display: inline-block; /* IE 8   */
  /*         IE 6,7    ，    inline-block  */
  *display: inline;
  *zoom: 1;
}

.clearfix {
  /*   ie 7     ，clearfix      */
}
.ie7 .clearfix {
   /*   ie7    ，clearfix        */
}

10.互換性に関する開発ツール

html5shiv.js:Javascriptを使用して、HTML 5をサポートしないブラウザでHTMLラベルをサポートします.

respond.js:css 3 Media QueryをサポートしていないブラウザにIE 6-IE 8などの他のブラウザがクエリーをサポートするようにします.

css reset:スタイルのリセット(Style Reset):ブラウザのデフォルトスタイル

をリセットします.

Normalize.css:デフォルトのHTML要素スタイルでは、ブラウザ間での高度な一貫性が提供されます.従来のCSS resetに比べてNormalize.cssは現代的でHTML 5のために用意された良質な代替案である.

Modernizr:ユーザーブラウザのHTML 5とCSS 3の特性を検出するJavaScriptライブラリ.Modernizrは、ページがロードされるとすぐに特性を検出します.次に、検出結果を含むJavaScriptオブジェクトを作成し、html要素にCSSを調整しやすいclass名を追加します.

PostCSS:JSプラグイン変換スタイルシートのツールです.これらのプラグインは、CSS、サポート変数、ブレンドを検証し、css 3の新しい特性文法、行内画像などを変換することができます.

11.ブラウザ対応の書き方

IE条件注記

    IE 

CSS属性接頭辞法

""IE 6発効"*"IE 6 7発効"9"IE 6/IE 7/IE 8/IE 9/IE 10はいずれも発効"0"IE 8/IE 9/IE 10はいずれも発効し、IE 8/9/10のhack"90"はIE 9/IE 10のみに発効し、IE 9/10のhack

である

.box {
  color: red;   /*          */
  _color: blue; /*    IE 6    */
  *color: pink; /*    IE 6 IE 7    */
  color: yellow\9; /* IE 6~8     */
}

* Trident  ：     IE   ,   -ms

Geckoカーネル:主にFirefox、接頭辞は-moz Prestoカーネル:主にOpera、接頭辞は-o Webkitカーネル:産要はChromeとSafari、接頭辞は-webkit

.box {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

セレクタ接頭辞法

は、一部のページの表現が一致していないか、特別な扱いが必要なブラウザに対して、CSSセレクタの前に特定のブラウザでしか認識できない接頭辞を加えてhackを行う(ブラウザ間の表現の違いに対して導入され、ブラウザのバグを利用して的確な処理を行う)*html*接頭辞はIE 6に対してのみ有効*+html*+接頭辞はIE 7に対してのみ有効@media screen9{...}IE 6/7のみ有効@media0 screen{body{background:red;}}IE 8のみ有効@media0 screen,screen9{body{background:blue;}}IE 6/7/8のみ有効@media screen0{body{background:green;}}IE 8/9/10のみ有効@media screen and(min-width:00){body{background:gray;}}IE 9/10のみ有効@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){body{background:orange;}}IE 10のみ有効

条件注釈法とクラスセレクタを組み合わせた

.clearfix {
  /*   ie 7     ，clearfix      */
}
.ie7 .clearfix {
   /*   ie7    ，clearfix        */
}

Modernizrの使用

ユーザーブラウザのHTML 5とCSS 3の特性を検出するJavaScriptライブラリ.Modernizrは、ページがロードされるとすぐに特性を検出します.次に、検出結果を含むJavaScriptオブジェクトを作成し、html要素にCSSを調整するのに便利なclass名を追加します.これらのclass名は、現在のブラウザでサポートされているプロパティとサポートされていないプロパティをマークし、サポートされているプロパティは、その日のプロパティの名前をclass(例:canvas,websockets)として直接表示します.サポートされていないプロパティに表示されるclassは「no-プロパティ名」です(cssファイルで異なるclassに対して異なるプロパティ値を設定できます).(使用説明)

      
      
     
  
  

...

ページ み み のコード

css resetまたはNormalizeを する.cssは、デフォルトのHTML スタイルでブラウザ での を する