background-color: #BADA55;
との効率の違いは何background: #BADA55;
ですか? 些細なことだと思いますが、ブラウザがそれぞれの値を抽出する方法に違いはありますか。また、少し関連するメモとして、CSS3Pleaseでは、線形グラデーションの場合、 を使用して指定されていることに気付きましたbackground-image
。単に使用しない理由はありますbackground
か?
2 に答える
この仕様では、ブラウザがプロパティ、特に省略形のプロパティの解析をどのように実装する必要があるかについては言及されていません。そこにあるのは文法だけであり、文法はその実装について何も述べていません。ブラウザが短縮宣言を解析する方法は、完全に実装に依存しており、簡単に答えることはできないと思います(もちろん、ソースコードがない限り)。
実際、IEに特化したCSSハックが多数ある主な理由は、CSSの理解がいかに異なっているか(そして多くの場合不十分であるか)にあります。
単純に使わない理由はあります
background
か?
答えはあなたの前の文にあります:
また、少し関連したメモで、CSS3で線形グラデーションの場合は。を使用して指定していることに気づきました
background-image
。
それはそう; CSSグラデーションは、背景で使用する画像と見なされ、画像値モジュールに記載されています。それらが適用する個々の背景プロパティはですbackground-image
。
省略形プロパティを使用して色のみまたはグラデーションのみを指定すると、残りの値には初期値が使用されます。この使用スタイルの違いが重要な場合、パフォーマンスの違いは完全に問題外になります。これは、もはや公正な比較ではないためです。
この例では、2番目の省略形の宣言が最初の宣言を完全にオーバーライドし、の初期値が次background
のようになるため、単色でグラデーションがなくなります。background-image
none
background: radial-gradient(white, rgba(255, 255, 255, 0)) /* transparent */;
background: /* none */ green;
省略表記の目的は、単一の宣言で複数の関連するプロパティの値を指定することです。したがって、グラデーションと色の両方を適用するには、次のように書き直す必要があります。
background: radial-gradient(black, transparent) green;