CSS: background要素の正しい書き方

background要素に関する指定はまとめて行うことができるけど、プロパティの並び順は問われないと言うのはどうも間違いらしい。
sDSの Craig Erskine 氏によると正しい書き方、 厳密に言うと、ブラウザによって生じる問題を回避する為の書き方が有るとのこと。

よく使われるのは

[css]background: {color image position-y position-x repeat attachment}[/css]

の順だけど、これだと古いバージョンの Safari で問題がある(具体的なバージョンは不明)。正しくは

[css]background: {color image repeat attachment position-x position-y}[/css]

ポイントは2つ:

  • repeat attachment position の並び順
  • x そして y の順

特に、x y に関しては padding 要素や margin 要素、border 要素のプロパティの場合と違うので注意。バグの症状は、それぞれ y を x 、x を y として処理される。

ちなみにW3Cのページではこの順でリストされている。ただしリスト順が正しいとは書かれていない。