CSS Hackと後方互換性

6756 ワード
css hack 後方互換性
人はいったん何かに慣れたら変えにくいし、いろいろな原因で、新しいブラウザが増えて、古いものは淘汰できません.成長は常に消滅よりも速く、ブラウザの互換性が話題になっています.ブラウザ互換性といえば、CSS HACKは自然と思い出されます.今日、私たちは通常、チームを持っているか、チームを持っている人が会社の中で同じことをしているので、メンテナンスを容易にするために、Codingを行うために統一的な規範が必要です.互換性を解決する方法は、(これが最も問題になりやすいためでなければならない)最も重要な、解決すべき規範の一つである.
  • 互換性の解決方法については、統一された仕様を想定しており、個人的には以下の3点を基本原則とすべきと考えている.
  • コストの比較:ブラウザが淘汰された後、どのようにして不要コードを速やかに整理するか
  • 保守可能:資源コストと完璧なバランスでの後方互換性
  • 読み取り可能:省力、覚えやすい

    • 一、CSSセレクタHack

    /* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}}

    この書き方の長所と短所は、
  • 長所:全面的に、各種のHACKがある;不要コードをクリアして認識しやすい
  • 短所:セレクタ名が覚えにくい;コード量が多い(書き込みセレクタを繰り返す)

    • 二、css属性Hack

    .sofish{
        padding:10px;
        padding:9px9; /* all ie */
        padding:8px0; /* ie8-9 */
        *padding:5px; /* ie6-7 */
        +padding:7px; /* ie7 */
        _padding:6px; /* ie6 */
}

    この書き方の長所と短所は、
  • 長所:覚えやすい;コードが少ない
  • 短所:不完全
    • 注:IEはすべて*標準のブラウザ(例えばFF)を識別することができます*IE 6は*を識別することができなくて、しかし識別することができません!important IE 7は*を識別でき、識別できます!important FFは*を認識できませんが、認識できます!importantはもう一つ、下線「」、IE 6は下線をサポートし、IE 7とfirefoxは下線をサポートしていません.△お勧めです.これだけ有効です. 

    三、IEコメント

    <!--[if IE]>IE only<![endif]-->
<!--[if !IE]>NOT IE<![endif]-->

    この書き方の長所と短所は、
  • 利点:安全;後方互換性が良い;メンテナンス容易
  • 短所:うまく使えないとHTTP要求が増える;コードが上手で多い

    • 四、ブラウザ探知：JS/バックエンドプログラム判断

    //  jQuery  ，     IE6，    class="ie6"
if ($.browser.msie && $.browser.version = 6 ){
     $('div').addClass('ie6');
}

    この書き方の長所と短所は、
  • 長所:全面;メンテナンスしやすい;可読性が高い
  • 欠点:資源を占める;コード量が大きい(セレクタを書き換える必要がある)
    • 上の4つは私たちが最もよく使う方法です.今、心に残っている3つの原則を抽出して、どのように選択するかを見てみましょう.時間をかけて考えますか?ここで私の選択を簡単に説明します.
  • できるだけ単独HACKでメンテナンスするとコストが低く、変更は他のブラウザに影響しないが、一旦ブラウザが淘汰されると、キーワードを検索すれば、これらのコードを一括して削除することができる.例えば、ie 6の単独hack:_padding:6px;；
  • 後方互換の目標:1年間で現在のサイト互換IE 10を考えているか、誰も考えていないが、これは予見性が低すぎて、コストが高すぎると言っても過言ではない.しばらくは必要ありません.ただし、IE 9はリリースされる可能性があるので、padding:8px;のようなIE 8+のhackを選択すると、他のコードを削除しても後方互換性に影響しない上で、より良いです.また、IE 10が出てきたら、このhackをサポートし、このバグがなければ、2つのブラウザにしか影響しない削除が便利になる可能性があります.できる限り省資源
  • ページのロード速度を考慮せず、サーバの耐性を考慮しなければ、後方互換性や淘汰の処理は完璧にできますが(コード上)、ある程度はしないほうがいいです.

    • 五、個人推薦の書き方


    リーズナブルな書き方:独自のHACKを重視.IEのHACKが多く、覚えやすい属性HACKを選択する.他のブラウザではHACKが少なく、ブロック状のセレクタHACKを選択(推奨)
    .sofish{
        padding:10px;
        padding:9px9; /* all ie */
        padding:8px0; /* ie8-9      IE8   hack，      */
        *padding:5px; /* ie6-7 */
        +padding:7px; /* ie7 */
        _padding:6px; /* ie6 */
}
/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
/* firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */

    準完璧主義表記:IEコメントに合わせて、セレクタHACK(選択推薦)を採用
    HTML:   body class
<!--[if IE6]--><body class="ie6"><![endif]-->
<!--[if IE7]--><body class="ie7"><![endif]-->
<!--[if IE8]--><body class="ie8"><![endif]-->
<!--[if IE9]--><body class="ie9"><![endif]-->
<!--[if !IE]--><body class="non-ie"><![endif]-->
    .sofish{padding:10px;}
.non-ie .sofish{padding:12px;}
.ie9 .sofish{padding:9px;}
.ie8 .sofish{padding:8px;}
.ie7 .sofish{padding:7px;}
.ie6 .sofish{padding:6px;}
                         
/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }
                         
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
                         
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
                         
/* firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */

    そして、2つ目の方法から私たちも発見することができます.IEコメントをbody classに使うのは、個別の<link />または@importを追加するのではなく、より良い選択です.ファイルを分割するのも良い選択ですが、ページのロード速度のためにHTTPリクエストは1つも無駄にできません.
    JSやバックエンドプログラムを利用して判断するには、十分なリソースがない限り(90%は発生しません)、お勧めしません.参考までに表(via)を添付します.

    六：全面的なIE 6+/Firefox/Webkit/Opera CSS HACKリスト：

    /***** Selector Hacks ******/
/* IE6 and below */
* html #uno  { color: red }
      
/* IE7 */
*:first-child+html #dos { color: red } 
      
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
      
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
      
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
      
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
      
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
      
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
      
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
        #diez  { color: red  }
}
      
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
        #veintiseis { color: red  }
}
      
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
      
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
      
/* Everything but IE6-8 */
:root *> #quince { color: red  }
      
/* IE7 */
*+html #dieciocho {  color: red }
      
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
      
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
      
      
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
      
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
      
/* Everything but IE6 */
#diecisiete { color/**/: blue }
      
/* IE6, IE7, IE8 */
#diecinueve { color: blue9; }
      
/* IE7, IE8 */
#veinte { color/***/: blue9; }
      
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

    CSS Hackは各ブラウザに対応しやすいが、W 3 C検証には通じないので、自分で使う必要があるかどうかを見極めなければならない.なるべく使わなくてもいいでしょう.
    asp.Net基礎編——Cookie
    cssハイパーリンクスタイルa link visited hover active