ブラウザ互換性に関するいくつかの問題

5510 ワード

一.CSS hackとは?


Internet Explorer、Safari、Mozilla Firefox、Chromeなど、異なるメーカーのブラウザ、または同じメーカーのブラウザの異なるバージョン、例えばIE 6とIE 7は、CSSの解析認識が全く同じではないため、生成されたページの効果が異なり、私たちが必要とするページの効果が得られない.この时、私达は异なるブラウザに対して异なるCSSを书く必要があって、それが同时に异なるブラウザに対応することができて、异なるブラウザの中で私达の望むページの効果を得ることができます.私たちはこの異なるブラウザ/異なるバージョンに対して対応するCSSを書く過程をCSS hackと言います.

二.ブラウザの互換性についてお話しします

  • やるかどうか
  • 製品の角度(製品の参加者、参加者のブラウザ比率、効果優先、または基本機能優先)
    • .
  • コストの観点(何かをする必要があるかどうか)
  • どこまで
  • どのブラウザがどのような効果をサポートするか
  • の方法
  • 互換性要件に基づいて技術フレームワーク/ライブラリ(jquery)
    • を選択する.
  • 互換性ニーズに応じて互換性ツール(html 5 shiv.js、respond.js、css reset、normalize.css、Modernizr)
    • を選択
  • postCSS
  • 条件注釈、CSS Hack、js能力検査はいくつかの補修
    • を行う.
  • 漸進的増強と優雅な降格漸進的増強(progressive enhancement):低バージョンのブラウザに対してページを構築し、最も基本的な機能を保証した後、高級ブラウザに対して効果、インタラクションなどの改善と追加機能を行い、より良いユーザー体験を達成する.優雅なダウングレード(graceful degradation):最初から完全な機能を構築し、低バージョンのブラウザと互換性を備えます.

    • 四.ブラウザ対応の書き方を5つ以上挙げます

  • 適切なフレーム1.Bootstrap (>=ie8) 2.jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9) 3.Vue (>= ie9) 4.…
  • 共通属性の互換性
  • inline-block: >=ie8
  • min-width/min-height: >=ie8
  • :before,:after: >=ie8
  • div:hover: >=ie7
  • inline-block: >=ie8
  • background-size: >=ie9
  • フィレット:>=ie 9
  • シャドウ:>=ie 9
  • アニメーション/グラデーション:>=ie 10

    • CSS hack方式1:条件注釈法この方式はIEブラウザ独自のHack方式であり,マイクロソフトが公式に推奨しているhack方式である.
      ：

 HTML 

  ：
  !       [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

  ：
      IE   
    
    
      IE6      
    
    
      IE8    
    

     IE

    CSS hack方式2:クラス内属性接頭辞法属性接頭辞法は、CSSスタイル属性名に特定のブラウザでしか認識できないhack接頭辞を加えて、所望のページ表示効果を達成する.
    .test {
    background-color:red;                       /* All browsers */  
    background-color:blue !important;           /* All browsers but IE6 */  
   *background-color:black;                     /* IE6, IE7 */  
   +background-color:yellow;                    /* IE6, IE7*/  
    background-color:gray\9;                    /* IE6, IE7, IE8, IE9, IE10 */  
    background-color:purple\0;                  /* IE8, IE9, IE10 */  
    background-color:orange\9\0;                /*IE9, IE10*/  
   _background-color:green;                     /* Only works in IE6 */  
}

    CSS hack方式3:ブラウザプライベートプレフィックス法
      -o    opera    
  -ms    IE    
  -moz    firefox    
  -webkit    safari，chrome    

  ：
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

    CSS hack方式4:セレクタ接頭辞法セレクタ接頭辞法は、一部のページの表現が一致しない、または特別な扱いが必要なブラウザに対して、CSSセレクタの前に特定のブラウザでしか認識できない接頭辞を加えてhackを行う.
           :
*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

    CSS hack方式5:CSS 3セレクタとJavaScriptのHack
    JavaScript  :
   function test() {
   var htmlObj = document.documentElement;
   htmlObj.setAttribute('data-useragent',navigator.userAgent);
   htmlObj.setAttribute('data-platform', navigator.platform );
}
CSS3    ：
html[data-useragent*='MSIE 10.0'] #id {
   color: #F00;
}

    五.以下のツール/名詞は何をしていますか.
  • 条件注釈条件注釈は、IEブラウザのバージョンを安全に区別する構文であり、IE css hackに対する優先方法に取って代わるものと考えられる.
  • IE hackは、IE条件コメント、セレクタプレフィックス、属性プレフィックスなどの互換性CSSスタイルをIEブラウザに対して記述する.
  • jsコンピテンシーは、ブラウザがサポートする属性を検出し、効果
    • を示す.
  • html5shiv.jsはhtml 5を使用する際、h 5の新しい特性やラベルをサポートしていないブラウザもあり、このhtml 5 shivを使用する必要がある.jsはこれらのラベルをシミュレートします.
  • respond.jsは応答型ページを作成する際、一部のブラウザではメディアクエリーなどのcss 3の新しい特性をサポートせず、respondを使用する.jsは互換性があります.
  • css resetは、ラベルスタイル「上書き」ブラウザのCSSデフォルト属性を再定義します.
  • normalize.css Normalize.cssはカスタマイズ可能なCSSファイルで、異なるブラウザがWeb要素をレンダリングするときに形式をより統一します.次のことができます.
  • は、多くのCSS resetの単純で乱暴ではない有用なデフォルト値を保持します.
  • 標準化されたスタイルで、適用範囲の広い要素です.
  • エラーと一般的なブラウザの不一致を修正します.
  • の微細な改良により、使いやすさが向上しました.
  • は、コードを説明するために詳細な注釈を使用する.

  • modernizr Modernizrは、ユーザーブラウザのHTML 5とCSS 3の特性を検出するJavaScriptライブラリです.Modernizrを使用すると、ブラウザがこれらの機能をサポートしているかどうかにかかわらず、JavaScriptとCSSをさまざまな状況に簡単に作成できます.これは、漸進的な強化を処理する完璧な方法です.Modernizrは、ページのロード直後にプロパティを検出し、検出結果を含むJavaScriptオブジェクトを作成します.html要素にCSSを調整するのに便利なclass名を追加します.
  • postCSS PostCSSは、JSプラグインを使用してCSSを変換するツールで、変数、混入、将来のCSS構文、インライン画像などをサポートします.PostCSSは、CSSがJavaScriptになるデータで、操作可能になります.PostCSSは、JavaScriptプラグインに基づいてコード操作を実行します.PostCSS自体はCSSを変えることはなく、プラグインにすぎず、いかなる転換を実行するために道を舗装しています.

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


    http://caniuse.com/
    cssにおけるdisplayプロパティの詳細
    css 3学習の心得