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にログインしてコメントする

コメント本文（必須） :
  • 2日前のトップ記事
  • 3日前
  • 4日前
  • 9日前
  • 10日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
OS Firefox 3 Opera Firefox Windows モバイル iPod touch JavaScript WebKit RIA ブラウザ HTML Microsoft 開発環境 PHP Off Topic CSS 小技 Ajax 脆弱性 UI Apple Tips Flash 仮想化 セキュリティ Mozilla Chrome Internet Explorer Webサービス Mac OS X ツール Java Safari Windows 7 アプリケーション Linux Webデザイン リファレンス データベース オープンソース iPhone 3G iPhone SOA Windows Vista Adobe プログラミング言語 Database ソフトウェア開発 Google
  • 話題のタグを見る »