
Firefox 3が対応するwidthプロパティの新しい値
エ・ビスコム・テック・ラボ
2008-04-18 16:12:01
今回は、Firefox 3が新しく対応したwidthプロパティの値を紹介する。まだCSS 3の草案にも掲載されていない値だが、W3Cへの提案は行われており、将来的な草案での採用が考えられる。
widthプロパティに追加された新しい値を使ってみる
widthは横幅を指定するプロパティだ。現行の標準規格であるCSS 2や2.1、CSS 3の草案「Basic box model」では、widthプロパティで指定できる値は、ピクセルなどによる長さか、%による割合、またはブラウザが自動的に横幅を設定する「auto」というキーワードだけとなっている。
これに対して、Firefoxのバージョン3では4種類の新しいキーワードの値をサポートした。指定できるキーワードは以下のようになっており、コンテンツの内容などに応じてブラウザが算出する横幅を指定することが可能だ。
- | widthプロパティの値 | 横幅の大きさ |
---|---|---|
【A】 | -moz-max-content | コンテンツが取り得る最大幅(Intrinsic preferred width) |
【B】 | -moz-min-content | コンテンツが取り得る最小幅(Intrinsic minimum width) |
【C】 | -moz-available | 表示に利用可能な幅 |
【D】 | -moz-fit-content | 内容にフィットさせた幅 |
実際にこれらのキーワードで横幅を指定すると、次のような表示になる。ここでは各要素の横幅をわかりやすくするため、背景色を水色に設定している。
.sample01{ width: -moz-max-content; } .sample02{ width: -moz-min-content; } .sample03{ width: -moz-fit-content; } .sample04{ width: -moz-available; }
Hello world. こんにちは。Hello world. こんにちは。Hello world. こんにちは。Hello world. こんにちは。
※ブラウザで表示を確認する