CSS 3で追加された背景に関するプロパティ:FirefoxとSafariのCSS対応

エ・ビスコム・テック・ラボ
2008-02-29 08:00:00
  • このエントリーをはてなブックマークに追加

 CSS 3の草案「CSS3 Backgrounds and Borders Module」では、次のような背景に関するプロパティが新しく追加されており、背景の範囲や表示位置などをより細かく指定できるようになっている。

CSS 3で追加された背景に関するプロパティ
プロパティ機能
background-clip背景の表示範囲を指定する
background-origin背景画像の表示位置の基点を指定する
background-size背景画像の大きさを指定する
background-breakインライン要素の背景画像の繰り返し方を指定する

 Firefoxは、バージョン3以前からbackground-size以外のプロパティをサポートしており、「-moz-」を付けたプロパティ名で利用することができる。ただし、background-breakは「-moz-background-break」ではなく「-moz-background-inline-policy」となっているので、注意したい。

 一方、Safariはバージョン3からbackground-break以外の3つのプロパティをサポートし、「-webkit-」を付けたプロパティ名で利用することができる。

CSS 3のプロパティと各ブラウザで利用できるプロパティ
CSS 3FirefoxSafari
background-clip-moz-background-clip-webkit-background-clip
background-origin-moz-background-origin-webkit-background-origin
background-size未対応-webkit-background-size
background-break-moz-background-inline-policy未対応

 今回は、background-clipとbackground-originについて見ていきたい。

  • 新着記事
  • 特集
  • ブログ