CSS3のbackground-positionでより柔軟な配置を

CSS3の新機能といえば、border-radiusやtransform, border-imageなど、新しいプロパティを想像してしまいがちですが、新しい機能は必ずしも新しいプロパティでのみ実装されるわけではありません。CSS3 Colorで追加されたrgba()など、値を拡張して実現する新機能もいくつか存在しています。

こういった拡張は既存プロパティの値として使われるため、ソースを見てもあまり目新しくありません。目立ちにくいのです。そんな目立ちにくい拡張のひとつに、background-positionがあります。

CSS2までは、background-positionに2つの値が指定されても、その基点は「上から、左から」でしかありませんでした。表現によっては「右から○○px、下から○○pxの位置」といった指定のほうが都合の良い場合もありますから、それが出来ないことを面倒と考えていた方も多いのではないでしょうか。

さて、CSS3では、background-positionの値が拡張され、background-position: right 12px bottom 16px 基点を自由に設定できるようになりました。これまでの2つの値指定は左上という定義を残し、キーワードを与えることで基点を自由に設定することができます。

ブラウザーの対応状況ですが、ベータ版以上で今のところ対応しているのはIE9 betaのみとなっています（追記：11月24日に公開されたOpera 11のベータ版で対応を確認しました）。対応状況はMicrosoftが公開しているテストケースで大まかにチェックできます。

FirefoxやChrome, Safariについては、バグは立てられているものの進捗はないようです。