background-positionでリクエスト数節約?
2006年11月4日時点でのソースを一部転載。
#header { margin: 0 0 32px; height: 64px; line-height: 0; background-image: url(header.png); background-position: bottom; } hr { border: none; padding: 0; background-image: url(hr.png); height: 32px; margin: 0 0 16px; _margin: 0; background-color: #36F; }
このような場合、header.png と hr.png を縦方向に連結した 1枚の画像にして、background-position で表示する部分を調節すれば、リクエスト数の節約になるんじゃないかなぁ、と思った。転送量よりもリクエスト数が気になる場合に。
もうちょっと一般化した説明をしたかったけど、書いてみたら思った以上に面倒でややこしくなってきたので推敲するのはやめました。
とりあえず上の例では、要素の高さがピクセルで指定されているところが大事なところです。そして、一方の要素の高さが不定でもいけます。その場合は高さが不定の方の background-repeat は repeat-x または no-repeat で、background-position の上下方向の値は top にする必要があります。
要素の高さではなくて幅がピクセルで固定されている場合にも使えます。縦方向を横方向に、高さを幅に、repeat-x を repeat-y に、上下方向を左右方向に、top を left に置き換えて考えます。
滅多にないことだと思いますが、3つ以上の要素について考えることもできます。高さあるいは幅が不定の要素が 1つ以下であることが条件です。
WinIE のことを考えなければ、:before擬似要素や:after擬似要素を使うことで、制約が少なくなると思います。