Firefox 3が対応するwidthプロパティの新しい値

　今回は、Firefox 3が新しく対応したwidthプロパティの値を紹介する。まだCSS 3の草案にも掲載されていない値だが、W3Cへの提案は行われており、将来的な草案での採用が考えられる。

widthプロパティに追加された新しい値を使ってみる

　widthは横幅を指定するプロパティだ。現行の標準規格であるCSS 2や2.1、CSS 3の草案「Basic box model」では、widthプロパティで指定できる値は、ピクセルなどによる長さか、％による割合、またはブラウザが自動的に横幅を設定する「auto」というキーワードだけとなっている。

　これに対して、Firefox 3では4種類の新しいキーワードの値をサポートした。指定できるキーワードは以下のようになっており、コンテンツの内容などに応じてブラウザが算出する横幅を指定することが可能だ。

　実際にこれらのキーワードで横幅を指定すると、次のような表示になる。ここでは各要素の横幅をわかりやすくするため、背景色を水色に設定している。

Firefox 3での表示。

.sample01	{
	width: -moz-max-content;
	}

.sample02	{
	width: -moz-min-content;
	}

.sample03	{
	width: -moz-fit-content;
	}

.sample04	{
	width: -moz-available;
	}

<div class="sample01">Hello world. こんにちは。</div>

<div class="sample02">Hello world. こんにちは。</div>

<div class="sample03">Hello world. こんにちは。</div>

<div class="sample04">Hello world. こんにちは。</div>

※ブラウザで表示を確認する