CSS中!importantの役割--ブラウザの互換性

4293 ワード

import

{*rule!important}というcssルールは現在、ウェブページ作成時の普及が非常に流行しており、以前は「ブラウザが認識しているかどうか」の段階にとどまり、本当に研究したことがなかったが、今は変化している.周知のように!importantこの規則はIe 6に対して.0,Ie7.0とFirefoxはhackを書くことができます.これはどんな原理なのか説明します.
*Ieシリーズブラウザでは認識できますが、firefoxブラウザでは認識できません.
　　!importantはIe 7のみである.0とfirefoxは認識できるが、Ie 6.0は正常に適用できません.
(1)ieとfirefoxを区別するhackはborder:2 px solid#f 00;border:1px solid #f00;
(2)Ie 6を区別する.0とIe 7.0、firefoxのhackはborder:1 px solid#f 00!important;border:2px solid #f00;
(1)では,*を後ろに置くのはffが*を認識しないためborderを1回だけ設定したためである.ieシリーズはborder設定を2回行った後、後の属性が前の属性を上書きしたため、1画素の枠線となる.
(2)では、なぜ!importantが最初のborder設定に置かれたのは、今回のborderの優先度を向上させたためであり、後に1回でもN回でもborderを設定しても無効であるが、Ie 6.0このルールを受け入れず、2回目のborder設定を適用した.つまり、2回目が1回目をカバーしたという原理は、認識しないわけではない.important;そのborderは2画素の赤枠である.
これは簡単な応用です.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>
<style type="text/css">
div{
width:800px;
height:250px;
background-color:yellow!important;/*              */
background-color:red;
border:3px solid #000!important;/*firefox*/
*border:5px solid #f00!important;/*Ie7.0*/
border:1px solid #000;/*Ie6.0*/
}
</style>
</head>
</html>

例1:

#Box {
      color:red !important;
      color:blue;
 }

HTML

<div id="Box">         ，         ！</div>

この例は皆さんがよく見かけるimportantの使い方のはずですが、IE環境では、この行の字は青で、firefoxでは赤で、その使い方はもう言わないで、次の例を見てください.
例2:

#Box div{
     color:red;
}
.important_false{
     color:blue;
}
3.important_true{
     color:blue !important;
}

HTML

<div id="Box">
    <div class="important_false">      important</div>
    <div class="important_true">      important</div>
</div>

例2では、CSSコードの1行目はboxの中のすべてのdivの中の字体色を赤に設定し、2行目と3行目はclassで自分のdivのフォント色を青に再定義したが、異なるのは、2行目の最後にimportantを使用し、3行目に使用したことだ.
デフォルトではclassの優先度はidより小さいため、2行目でclassを使用して独自のスタイルを再定義しても有効にならないため、親属性を継承します.この行は赤です.しかし、3行目ではimportantで優先度を上げる(または強制再定義と見なす)ので、ここのcssが有効になり、この行の字が青になります!この例から、ieがimportantをサポートしていないわけではないことが証明された.では、なぜieがそれを知らないと言っている人が多いのでしょうか.皆さんの実戦では例のない状況に遭遇したのではないかと思います.classの優先度を上げたいときはどうしますか.つまり、この役割は無視されているかもしれませんが、同じ要素と命名されたCSSコードブロックで、配列順が比較的前のコードの優先度を高めるために使用されていることを知っています(例1)!
上の2つの例でまとめられています.
importantは良い(または標準)ブラウザにとって、コードの優先度を順番から上げるだけでなく、classの優先度(例えばfirefox)を上げるためにも使用できますが、IEの前者へのサポートがないことから、これはIEの大きなBUGにすぎず、「認識していない、サポートしていない」とは言えません.
しかし、いずれにしても、IEのこの大きなBUGは私たちに多くの互換性の問題を解決するのに役立ちました.これは明らかに悪いことではありません.
IEにおけるボックスモデル(box-model)の解釈にはBUGがある,IE 6.0以前のバージョンでは、エレメントの枠線値と塗りつぶし値が幅に含まれます(幅値に加算されません).たとえば、次のcssを使用して、コンテナのサイズを指定することができます.

#box
 　　{
　　 　width:100px;
 　　　border:5px;
 　　　padding:20px;
 　　}

次にhtmlに適用する:ボックスの総幅は、ほとんどのブラウザで150ピクセル(100ピクセル幅+5ピクセルの枠線2本+20ピクセルの充填)であり、IE 6以前のバージョンのブラウザでのみ100ピクセル(枠線値と充填値が幅値に含まれる)であり、ボックスモデルのhackを使用してこの問題を解決することができます.

#box 
　　{ 
　　　width:150px;　　　　　　  //      width，         
　　　voice-family: \}\; 　　　　 //IE5.X/win   \}\    
　　　voice-family:inherit;
　　　width:100px; 　　　　　　//  IE6/win            ，    (300px)      
　　} 
                 ：
　　CSS:
　　#box { width:150px; }
　　#box div { border:5px; padding:20px; }
　　HTML:
　　...

これにより、どのブラウザでもボックスの総幅は150ピクセルになります.
でも最新のIE 6に着いても0は依然としてフローティングモデル(Float-model)の問題が存在し、幸いなことに(それとも悲しいのか?)のは私达がIEの中でずっとすべて支持しないことができるのです!importantはこの問題を解決します.　　!importantはCSS 1で定義された構文であり、指定されたスタイルルールの適用優先度を高める役割を果たす(W 3.orgの解釈を参照).構文フォーマット{sRule!important}は、定義の一番後ろに書かれています.
例:

box{color:red !important;}

このようなスタイルを定義すると、

#box{background-color: #ffffff !important; background-color: #000000;}

では、この構文をサポートするブラウザ、例えばFirefox、Operaでは、理解できます!importantの優先度は、背景にffff色が表示する、IEには00000が表示される.

Asp.Netフレームワーク(IHttpHandlerFactory紹介)-Part.4

MVCのAppendTrailingSlashおよびLowercaseUrls