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

Firefox 3で新しく対応したwidthプロパティの値
- widthプロパティの値横幅の大きさ
【A】-moz-max-contentコンテンツが取り得る最大幅（Intrinsic preferred width）
【B】-moz-min-contentコンテンツが取り得る最小幅（Intrinsic minimum width）
【C】-moz-available表示に利用可能な幅
【D】-moz-fit-content内容にフィットさせた幅

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

Firefox 3での表示。 Firefox 3での表示。 
.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. こんにちは。
※ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]