1

background-color: #BADA55;との効率の違いは何background: #BADA55;ですか? 些細なことだと思いますが、ブラウザがそれぞれの値を抽出する方法に違いはありますか。また、少し関連するメモとして、CSS3Pleaseでは、線形グラデーションの場合、 を使用して指定されていることに気付きましたbackground-image。単に使用しない理由はありますbackgroundか?

4

2 に答える 2

4

この仕様では、ブラウザがプロパティ、特に省略形のプロパティの解析をどのように実装する必要があるかについては言及されていません。そこにあるのは文法だけであり、文法はその実装について何も述べていません。ブラウザが短縮宣言を解析する方法は、完全に実装に依存しており、簡単に答えることはできないと思います(もちろん、ソースコードがない限り)。

実際、IEに特化したCSSハックが多数ある主な理由は、CSSの理解がいかに異なっているか(そして多くの場合不十分であるか)にあります。

単純に使わない理由はありますbackgroundか?

答えはあなたの前の文にあります:

また、少し関連したメモで、CSS3で線形グラデーションの場合は。を使用して指定していることに気づきましたbackground-image

それはそう; CSSグラデーションは、背景で使用する画像と見なされ、画像値モジュールに記載されています。それらが適用する個々の背景プロパティはですbackground-image

省略形プロパティを使用して色のみまたはグラデーションのみを指定すると、残りの値には初期値が使用されます。この使用スタイルの違いが重要な場合、パフォーマンスの違いは完全に問題外になります。これは、もはや公正な比較ではないためです。

この例では、2番目の省略形の宣言が最初の宣言を完全にオーバーライドし、の初期値が次backgroundのようになるため、単色でグラデーションがなくなります。background-imagenone

background: radial-gradient(white, rgba(255, 255, 255, 0)) /* transparent */;
background: /* none */ green;

省略表記の目的は、単一の宣言で複数の関連するプロパティの値を指定することです。したがって、グラデーションと色の両方を適用するには、次のように書き直す必要があります。

background: radial-gradient(black, transparent) green;
于 2012-07-27T21:09:53.800 に答える
1

2番目の例は次のようになります。background: #BADA55;ただし、どちらの方法でも問題はなく、心配する必要はありません。

ブラウザがCSSをどのように解析するのか知りたい場合は、状況によって異なります(IEで動作したことがありますか?)。Chromeの場合、GitHubでソースを確認でき、Firefoxのソースはここにあります。

于 2012-07-27T21:02:55.840 に答える