Mozilla Flux

Mozilla関係の情報に特化したブログです。

Firefox 3.5で新たにサポートされるCSS機能

Mozilla Developer Centerの『Firefox 3.5 for developers』と、Mozilla Wikiの『Evangelism/Firefox3.5』を参照して、Firefox 3.5で新たにサポートされるCSS機能について簡単にまとめてみた。

@font-face

Web開発者とサイトデザイナーは、ユーザーがたまたまインストールしていたフォントに頼る代わりに、ダウンロード可能なTrueTypeとOpenTypeのフォントをデザインに取り入れることで、どのプラットフォームでも一貫した見た目にできる。

メディアクエリー

CSS3のメディアクエリーをサポートしたことで、コンテンツがレンダリングされるデバイスに特有の詳細な情報を見ることによって、スタイルシートはコンテンツの外観をより正確にコントロールすることができる。たとえば、カラープリンタで印刷するときと、白黒プリンタで印刷するときでサイトのレンダリングを変えるといったように。

追加/更新されたCSSプロパティ

Firefox 3.5で追加または更新されたCSSプロパティは、20個以上ある。


CSS 2.1へとアップデートされた::beforeと::after
position、float、list-style-*の各プロパティと、一部のdisplayプロパティを::beforeセレクタと::afterセレクタで使用可能になった。
text-shadowプロパティ
text-shadowプロパティを使うと、テキストとテキスト装飾に影のエフェクトをかけることができる。
opacityのサポート
独自拡張の-moz-opacityは削除され、Firefox 1.0で採用済みの正式にopacityプロパティに対応した一本化された。
word-wrapのサポート
新しいword-wrapプロパティは、コンテンツのワードラップのコントロールを強化するもの。つまり、行の末尾に収まりきらない単語があるとき、文字があふれないように改行するかどうかを指定する。
-moz-box-shadow
-moz-box-shadowプロパティを使うと、ほとんどの要素のフレームにドロップシャドウを付けられる。
-moz-border-image
-moz-border-imageプロパティは、画像を指定して要素の周りのボーダーとするときに使う。複雑な外観のウィジェットを以前よりも簡単に描画できる。
-moz-column-rule
-moz-column-ruleプロパティは、マルチカラム(段組)レイアウトのカラム間に引かれる罫線について、スタイル、幅および色をコントロールする。
-moz-column-rule-width
-moz-column-rule-widthプロパティは、マルチカラム(段組)レイアウトのカラム間に引かれる罫線について、その幅をコントロールする。
-moz-column-rule-style
-moz-column-rule-styleプロパティは、マルチカラム(段組)レイアウトのカラム間に引かれる罫線について、そのスタイルを決める。
-moz-column-rule-color
-moz-column-rule-colorプロパティは、マルチカラム(段組)レイアウトのカラム間に引かれる罫線について、その色をセットする。
-moz-column-gap
-moz-column-gapプロパティは、マルチカラム(段組)レイアウトにおけるカラムの間隔をセットする。
-moz-nativehyperlinktextカラー値
-moz-nativehyperlinktextカラー値は、ユーザーが使用するシステムにおけるデフォルトのハイパーリンク色を表す。これによって、ネイティブアプリケーションのようなルック&フィールのWebアプリケーションを作成しやすくなる。
-moz-window-shadow
Mac OS Xでは、-moz-window-shadowプロパティを用いてウィンドウが影をもつかどうか指定できる。一番の使い道はFirefoxのスキン。
:-moz-system-metric(mac-graphite-theme)
:-moz-system-metric(mac-graphite-theme)セレクタは、ユーザーがMac OS Xのシステム設定で「グラファイト」の外観を選んだとき、要素にマッチする。テーマをユーザーのシステムの見た目にうまく合わせることができるようになる。
-moz-appearanceに対する新しい値
Firefoxのスキンを最新のWindowsおよびMac OS Xシステムのテーマにマッチさせるため、Firefoxのスキンは、新しい-moz-win-glassと-moz-mac-unified-toolbarという値を-moz-appearanceに対して使うことができる。
CSS Transforms
Firefox 3.5は、CSS Transformsのサポートを導入した。これによって、WebコンテンツがHTML要素を回転させ、歪め、変形させることが可能になる。コンテンツを逆さまにしたり、横にしたりもできる。
:nth-child,:nth-last-child,:nth-of-type,nth-last-of-type
これらの新しいCSS疑似クラスは、DOMツリーにおけるそれぞれのポジションを基にした要素のマッチングを、より速くかつ簡単に行えるようにするもの。
:first-of-type,:last-of-type,:only-of-type
これらの新しいCSS疑似クラスは、それぞれのタイプを基にした要素のマッチングを簡単にするもの。たとえば、これらの疑似クラスを使えば、テーブルの最初あるいは最後の列を素早くスタイリングできる。

(同日追記)コメント欄の あ さんのご指摘を受けて、必要な個所を訂正した。