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

エ・ビスコム・テック・ラボ
2008/02/29 08:00

CSS 3とFirefox、Safari 3の背景に関するプロパティを、まずは表でまとめてみる。

　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について見ていきたい。

記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
ブラウザ Firefox イロハ Firefox 3 PHP 小技 XHTML Database Linux Adobe IDE JavaScript Off Topic C/C++ 仮想化 Leopard Flash Mozilla Eclipse Java iPhone Apple ライブラリ 開発環境 Ruby Webアプリケーション開発 iPod touch Mac OS X リファレンス 入門 Ajax Google HTML SOA Python Tips Apache Oracle CSS Microsoft Windows MySQL Webデザイン RIA フレームワーク Safari まとめ オープンソース Ruby on Rails server
  • 話題のタグを見る »