CSS3仕様の更新：Backgrounds & Bordersの勧告候補とImage Values草案
CSS WG BlogのNew CSS3 Publications: Backgrounds and Borders CR, Text WD, Image Values and Replaced Content WDという記事でも紹介されていますが、CSS3の仕様が3つ更新されました。今回はそのうちの2つ、Backgrounds & BordersとImage Values & Replaced Contentについて紹介します。
Backgrounds & Bordersの勧告候補
2月15日付で、CSS Backgrounds and Borders Module Level 3が再び勧告候補になりました。
昨年より翻訳を進めていましたが、ひと通り終わりましたので公開します。
勧告候補から先に進むためには実装が必要になります。このモジュールに関しては多くのプロパティが接頭辞付きで実装されていましたが、それらを省く実装が進められています。
border-radiusについては、正式なプロパティには現時点でOpera 10.5以降、Safari 5以降, Chrome 4以降が対応しており、これにIE9, Firefox 4が加わります。
box-shadowについては、正式なプロパティの対応が現時点でOpera 10.5以降のみとなっています。しかし、IE9やFirefox 4でも対応しますし、WebKitでも先日正式なプロパティに対応し、Chrome 10から使えるようになります。Safariの次期バージョンでもおそらく対応するでしょう。
どちらも、まず正式なプロパティを書いて、その上でサポート環境にあわせ接頭辞付きプロパティを併記するというやり方が望ましいでしょう。
さて、border-imageについてですが、正式なプロパティに対応したブラウザーはまだありません。border-image短縮形プロパティは接頭辞付きでGecko, Presto, WebKitが対応していますが、border-image-*といったサブプロパティの対応は行われていません。また、他のベンダーの対応状況とプロパティの安定度をふまえたのか、IE9ではborder-image関連プロパティの対応は行われていないようです。このモジュールがどれだけ早く勧告されるかは、border-imageの対応状況に左右されそうです。
他にも、以前紹介したbackground-positionの拡張の対応状況にはばらつきがあります。Gecko, WebkitのCSS3 B&B関連バグはそれぞれBug 631373, Bug 27569でトラックされています。
グラデーションが追加されたImage Values
CSS Image Values and Replaced Content Module Level 3は、background-imageなど値に画像を取るプロパティで使われる<image>という値を定義するモジュールです。新しい機能が追加されたからか、今回の草案から名前に「Replaced Content」が加わっています。
2009年に初めて公開された草案からの変更点は多岐に渡りますが、大きな変更のひとつにグラデーションを定義するlinear-gradient()やradial-gradient()といった関数の追加があります。
グラデーションはWebKitが拡張として実装したものに端を発します。その後Geckoでも別の構文で実装され、標準化の必要性が生じ議論が進められてきました。
標準化にあたり、Geckoの実装に倣った構文が採用されました。WebKitは先日CSS3の構文を接頭辞付きで実装しており、開発中のChrome 10で利用できます。
Image Valuesには他にも、アスペクト比を保ちながら画像を拡大縮小するobject-fitプロパティなどが定義されています。object-fitはOpera 11で実装されており、dev.Operaで説明記事も公開されています。