モバイル WebKit ブラウザに CSS 背景の短縮形を追加

Pete LePage

今年の初めに、WebKit は CSS background ショートカット プロパティの動作を更新しました。この変更により、background ショートカット プロパティは、ショートカット宣言で設定されていない場合、background-size をデフォルト値の auto auto にリセットします。この変更により、Chrome などの WebKit ブラウザは仕様に準拠し、Firefox、Opera、Internet Explorer の動作と一致するようになります。

Chrome for Android が WebKit の最新リビジョンに移行するにあたり、この変更が Android にロールアウトされます。これは webkit の修正であるため、複数のブラウザでテストしたサイトは影響を受けない可能性があります。

従来の方法

// background-size is reset to auto auto by the background shorthand
.foo {
    background-size: 50px 40px;
    background: url(foo.png) no-repeat;
}

background ショートカット プロパティにはサイズ プロパティが含まれていないため、background-size はデフォルト値の auto auto にリセットされます。

画像サイズを指定する正しい方法

// background-size is specified after background
.fooA {
    background: url(foo.png) no-repeat;
    background-size: 50px 40px;
}

// background-size is specified inline after position
.fooB {
    background: url(foo.png) 0% / 50px 40px no-repeat;
}

fooB で background の省略形に background-size を指定するには、まず position（0%）を指定し、その後にスラッシュと background-size（50px 40px）を指定する必要があります。

既存のコードの修正

この問題を簡単に解決するには、次の方法があります。

  • background ショートカット プロパティではなく background-image を使用します。
  • background-size は最後に設定し、その要素に background を設定する他の CSS ルールよりも限定性が高いようにします。また、:hover ルールも忘れずに確認してください。
  • !important プロパティを background-size に適用します。
  • サイズ情報は background ショートカット プロパティに移動します。

ボーナス: 背景画像のオフセット

この変更に加えて、背景内に画像を配置する際の柔軟性が向上しました。これまでは、左上の角からの相対的な画像の位置しか指定できませんでしたが、コンテナの端からのオフセットを指定できるようになりました。たとえば background-position: right 5px bottom 5px; を設定すると、画像は右端から 5 ピクセル、下端から 5 ピクセルに配置されます。JSBin のサンプルをご覧ください。