Android標準ブラウザが​background短縮プロパティで​background-sizeを​初期化してくれない

公開 / 更新

Android標準ブラウザは、backgroundを短縮形(ショートハンド)で記載してもbackground-sizeを初期化してくれなかったという話。

例えば、下記のようなコード

CSS
.hoge {
  background: #000 url(hoge.png) no-repeat;
  background-size: 25px;
}
.hoge:first-child {
  background: url(bg.gif) repeat;
}

backgroundプロパティを短縮形で書いてやると、既に値が与えられているbackground-**といったプロパティが初期化されます。この時、短縮形で記載できないbackground-sizeも初期化してくれるはずなのですが、何故かAndroid標準ブラウザだけ初期化してくれなくて、背景画像が小さく表示されてしまった。

対策としては、background-sizeも別途記載すると。

CSS
.hoge:first-child {
  background: url(bg.gif) repeat;
  background-size: auto;
}

「CSS Background shorthand coming to mobile WebKit browsers」を読むと昔はwebkit全体が、background-sizeを初期化してなかったのかな？その名残が残っているのかもしれません。

短縮形はCSSがシンプルに記載出来て良いのですが、思わぬことも引き起こすなあと感じていて、最近は、marginとかpaddingとかも、出来る限り短縮形を使わずに書くようにしている。

なのでbackgroundも短縮形使わずに書こうかなと思うんだけど長いよねえ、background

参考