3

私が理解しているように、省略形のプロパティを使用するbackgroundと、ブラウザは最初にすべての背景プロパティをデフォルト値に設定し、次に宣言している値を入力します。それなら、使用する方が良いですかbackground-color:white; background:white？の代わりに 背景の位置や背景画像など、より多くの値を入力すると、これは変わりますか？それとも、属性を個別に宣言するのが常に最善ですか？

バイト単位の節約で、属性を個別に指定することで得られる処理時間のバランスをとる、ある種の転換点があるはずだと思います。しかし、私は完全に間違っている可能性があります-それが私がここで尋ねている理由です。

4

2 に答える 2

4

I hear you about best practices, but as mentioned the differences in processing and even load time are negligible. There is no best practice for when to use these rules, aside from what makes sense in your stylesheet. The real difference is that they effect inherited properties differently. Setting background-color: white; will only overwrite the background-color rule (whether or not it was originally set with background or background-color) but background will overwrite the any/all background rules set, thus potentially killing background images and associated background-repeat, etc. Here's an example:

.box {
    background: url(star.png); // set with just background instead of background-image
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
}
.box1 {
    background-color: blue;
}
.box2 {
    background: green;
}

With HTML like: 

<div class="box1 box"></div>
<div class="box2 box"></div>

.box1 will show the star.png image (with a blue background if the image is transparent), while .box2 will only show a green background, no image. The best practices lesson with these two rules is to evaluate CSS authoring and inheritance in general — not rendering performance. That in mind, it's generally best to apply background to the most general/abstracted rule of an element, and then overwrite properties on more specific instances, using classes or IDs, with background-color, background-image, etc.

于 2010-08-07T19:30:50.097 に答える
2

CSSの処理時間は無視できるはずです。それだけで使用を制限しているのなら、もう自分を制限しないでください。

色だけを使用する場合background: color、background-color: color同じ結果が得られるはずです。

最後に、個々の宣言よりも速記を好むかどうかに要約します。通常、速記は賢明なデフォルト値を使用するので、大丈夫です。私は通常、それらの正しい順序（特に速記）を覚えていませんfontが、それ以外はかなり大丈夫だと思います。

とにかく、予想よりもはるかに多くの短縮プロパティを使用している可能性があります。たとえば、marginおよびpaddingは、、、-topおよびコンポーネントの省略形であり、、および-right、の省略形です。これらはすべて、それらのプロパティの省略形です。すべての非短縮プロパティの代わりに使用 することで、11行の節約になります。-bottom-leftborderborder-widthborder-colorborder-styleborder-[direction]-[attribute]border

于 2010-08-07T19:04:46.800 に答える