Firefox 1.5でのCSSスタイル指定向上

2004年11月8日にリリースされたFirefox 1.0は、2004年4月12日にMOZILLA_1_7_BRANCHとして開発サイクルからブランチ（枝分かれ）して以降、開発の本流からは分かれて専ら安定化作業が行われてきました。これに対してTrunk（開発木の幹）と呼ばれている開発の本流では引き続き16ヶ月以上に渡り意欲的な開発が進められました。

2005年11月30日にリリースされたFirefox 1.5は、2005年8月13日にMOZILLA_1_8_BRANCHとして開発サイクルからブランチするまでの、長期間の開発の結果が反映されているため、Firefox 1.0で知られている様々なバグが修正されています。その中でもここでは特に、ブラウザとしての基本性能であるウェブページの描画機能、その根本であるCSSへの対応がどれだけ進んだかを取り上げたいと思います。

また、motohiko氏のCSSメモ: Firefox 1.5での新機能でも詳しい情報が得られます。

見出し

エラー表示
CSS, level 1
- 均等割付text-align: justify
CSS, level 2
CSS, level 3
独自CSS
- サイト別CSS（URL完全一致 / URL先方一致 / ドメイン一致）
- 角丸アウトラインoutline-radius

エラー表示

JavaScript Console画面

JavaScript ConsoleにJavaScriptだけでなくCSSのエラーも表示されるようになりました。なおここで言うエラーとは「Firefoxが解釈できなかったもの」という意味です。標準規格であってもFirefoxでは対応していないものはエラーとして表示されます。またエラーとして表示されていなくてもFirefoxで効果を得られないものもあるかもしれません。

CSS, level 1

均等割付`text-align: justify`

text-alignプロパティは行内での文字の割付を指定します。text-align: justifyを指定すると行の両端が揃い、きれいに表示されます。けれども従来は、どのブラウザでも日本語では効果が得られませんでした。というのも英語などでは単語の間にあるスペースの幅で調整できるのですが、日本語などは単語の間にスペースが無いためでした。なおInternet Explorer 6ではtext-align: justifyとは別にtext-justifyプロパティで均等割付方法を指定すれば可能ですが、デフォルトのautoでは日本語をきれいに均等割付できません。

Firefox 1.5ではtext-align: justifyと指定するだけで、日本語をきれいに均等割付することが出来るようになりました。

サンプルソース

<div style="border: solid 1px blue; width: 20em; text-align: justify;">
あいうえお、かきくけこさしすせそたちつてと、なにぬねの。はひふへほまみむめもやゆ
よらりるれろいうえお、かきくけこさしすせそたちつてとなにぬねのはひふへほ。まみむ
めもやゆよらりるれろあいうえおかきくけこさしすせそ漢字たちつてと一一なにぬねのは
ひふへほまみむめもEnglishやゆよThe quick brown fox jumps over the lazy dog.らり
るれろあいうえおかきくけこさしすせそたちつてとなにぬねの</div>

サンプル表示

あいうえお、かきくけこさしすせそたちつてと、なにぬねの。はひふへほまみむめもやゆよらりるれろいうえお、かきくけこさしすせそたちつてとなにぬねのはひふへほ。まみむめもやゆよらりるれろあいうえおかきくけこさしすせそ漢字たちつてと一一なにぬねのはひふへほまみむめもEnglishやゆよThe quick brown fox jumps over the lazy dog.らりるれろあいうえおかきくけこさしすせそたちつてとなにぬねの

表示結果

Firefox 1.0 (Windows)での表示結果

Firefox 1.5 (Windows)での表示結果

Internet Explorer 6 (Windows)での表示結果

サンプル表示そのまま

Internet Explorer 6 (Windows)での表示結果

text-justify: inter-ideographの指定を追加

CSS, level 2

自動連番`content: <counter>`

カウンタは見出しなどを自動的に生成するためのものです。なお、Firefox 1.5の実装はCSS2.1CRやCSS3WDとも異なります。この件に関しては仕様が改訂されることに対応した、とコメントがついています。

サンプルソース

<style type="text/css">
	h5::before	{ content: counter(first) "章 ";}
	h6::before	{ content: counter(first) "章 " counter(second, cjk-ideographic) "節 ";}
	h5	{ counter-increment: first; counter-reset: second;}
	h6	{ counter-increment: second;}
</style>
<div style="border: solid 1px blue; width: 10em;">
<h5>いちばんめ</h5>
	<h6>いち</h6>
<h5>にばんめ</h5>
	<h6>に</h6>
	<h6>さん</h6>
<h5>さんばんめ</h5>
	<h6>よん</h6>
<h5>よんばんめ</h5>
	<h6>ご</h6>
	<h6>ろく</h6>
	<h6>なな</h6>
<h5>ごばんめ</h5>
	<h6>はち</h6>
</div>

サンプル表示

いちばんめ

いち

にばんめ

に

さん

さんばんめ

よん

よんばんめ

ご

ろく

なな

ごばんめ

はち

表示結果

Firefox 1.0 (Windows)での表示結果	Firefox 1.5 (Windows)での表示結果
Opera 8.01 (Windows)での表示結果: カウンタの表示は算用数字のみ対応

アウトライン`outline:`

アウトラインとはボックスの計算とは関係なく要素を強調するための線を描くものです。これまではバグがあったので公式にはサポートしていませんでしたが、バグが修正されFirefox 1.5から利用できるようになりました。

サンプルソース

<style type="text/css">
	textarea:hover	{outline: 5px solid green;}
</style>
<div style="border: solid 1px blue; width: 15em;">
<p style="outline: 5px solid  green;">あいうえお</p>
<p style="outline: 5px double green;">あいうえお</p>
<p style="outline: 5px groove green;">あいうえお</p>
<p style="outline: 5px ridge  green;">あいうえお</p>
<p style="outline: 5px inset  green;">あいうえお</p>
<p style="outline: 5px outset green;">あいうえお</p>
<p style="outline: 5px dashed green;">あいうえお</p>
<p style="outline: 5px dotted green;">あいうえお</p>
<p><input type="text" value="入力欄" style="outline: 5px solid  green;" /></p>
<p><textarea cols="20" rows="2">マウスをのせる</textarea></p>
</div>

サンプル表示

あいうえお

マウスをのせる

表示結果

Firefox 1.0 (Windows)での表示結果	Firefox 1.5 (Windows)での表示結果
Opera 8.01 (Windows)での表示結果

引用符の入れ子`quotes: [<string> <string>]+`

引用符指定自体はこれまでもすでにサポートされてきましたが、入れ子の指定はサポートされていませんでした。

サンプルソース

<style type="text/css">
	q	{quotes: "「" "」"  "『" "』"  "“" "”"  "〈" "〉";}
</style>
<div style="border: solid 1px blue; width: 20em;">
<p>ここは本文です。ここは本文です。
	<q>引用文の第一階層
		<q>二つ目の階層の引用文
			<q>引用文の第三階層
				<q>四つ目の階層の引用文</q>
			引用文の第三階層</q>
		</q>
	引用文の第一階層</q>
ここは本文です。ここは本文です。</p>
</div>

サンプル表示

ここは本文です。ここは本文です。引用文の第一階層二つ目の階層の引用文引用文の第三階層四つ目の階層の引用文引用文の第三階層引用文の第一階層ここは本文です。ここは本文です。

表示結果

Firefox 1.0 (Windows)での表示結果	Firefox 1.5 (Windows)での表示結果
Opera 8.01 (Windows)での表示結果

CSS, level 3

疑似クラス`:only-child`

[Selectors] :only-child

要素の中に指定された要素が一つしかない場合にマッチする疑似クラスの一つです。

サンプルソース

<style type="text/css">
	li:only-child	{background-color: green; color: white;}
</style>
<div style="border: solid 1px blue; width: 20em;">
<ul>
	<li>この下には項目が二つあるため何も起こりません<ul>
		<li>二つのリスト</li>
		<li>二つのリスト</li>
	</ul></li>
	<li>この下には項目が一つしかないため色が変わります<ul>
		<li>一つだけのリスト</li>
	</ul></li>
</ul>
</div>

サンプル表示

この下には項目が二つあるため何も起こりません
- 二つのリスト
- 二つのリスト
この下には項目が一つしかないため色が変わります
- 一つだけのリスト

表示結果

Firefox 1.0 (Windows)での表示結果

Firefox 1.5 (Windows)での表示結果

マウスカーソルの形状`cursor:`

[CSS3 Basic User Interface Module]cursor

カーソルの指定方法への対応も大幅に改善しました。Firefox 1.5ではcursor: [<uri> [<x> <y>]?,]*を除くCSS3までのすべての指定方法に対応しました。

cursor: [<uri> [<x> <y>]?,]*指定にも対応しました。ただ、指定した数値は反映されないようです。

サンプルソース

<div style="border: solid 1px blue; width: 15em;">
<table xml:lang="en" lang="en" style="width: 15em;">
<tr><th>CSS level 2</th></tr>
<tr><td style="cursor: url(hyper.cur), pointer;">cursor: url(hyper.cur), pointer</td></tr>
<tr><th>CSS level 3</th></tr>
<tr><td style="cursor: url(hyper.cur) 20 40, pointer;">cursor: url(hyper.cur), pointer</td></tr>
<tr><td style="cursor: copy;">cursor: copy</td></tr>
<tr><td style="cursor: alias;">cursor: alias</td></tr>
<tr><td style="cursor: context-menu;">cursor: context-menu</td></tr>
<tr><td style="cursor: cell;">cursor: cell</td></tr>
<tr><td style="cursor: not-allowed;">cursor: not-allowed</td></tr>
<tr><td style="cursor: col-resize;">cursor: col-resize</td></tr>
<tr><td style="cursor: row-resize;">cursor: row-resize</td></tr>
<tr><td style="cursor: no-drop;">cursor: no-drop</td></tr>
<tr><td style="cursor: vertical-text;">cursor: vertical-text</td></tr>
<tr><td style="cursor: all-scroll;">cursor: all-scroll</td></tr>
<tr><td style="cursor: nesw-resize;">cursor: nesw-resize</td></tr>
<tr><td style="cursor: nwse-resize;">cursor: nwse-resize</td></tr>
<tr><td style="cursor: ns-resize;">cursor: ns-resize</td></tr>
<tr><td style="cursor: ew-resize;">cursor: ew-resize</td></tr>
</table>
</div>

サンプル表示

CSS level 2
cursor: url(hyper.cur), pointer
CSS level 3
cursor: url(hyper.cur) 20 40, pointer
cursor: copy
cursor: alias
cursor: context-menu
cursor: cell
cursor: not-allowed
cursor: col-resize
cursor: row-resize
cursor: no-drop
cursor: vertical-text
cursor: all-scroll
cursor: nesw-resize
cursor: nwse-resize
cursor: ns-resize
cursor: ew-resize
Vendor Specific
grab
grabbing
zoom-in
zoom-out

表示結果

Firefox 1.0 (Windows)での表示結果	Firefox 1.5 (Windows)での表示結果
Internet Explorer 6 (Windows)での表示結果

アウトライン間隔`outline-offset:`

[CSS3 Basic User Interface Module]outline-offset

通常outlineはborderのすぐ外側に表示されますがこのoutline-offsetを使用すると、その間隔を指定することが出来ます。

サンプルソース

<div style="border: solid 1px blue; width: 10em;">
<p style="border: 5px solid red; outline: 5px solid  blue; outline-offset: 0;">あいうえお</p>
<p style="border: 5px solid red; outline: 5px dashed  blue; outline-offset: 5px;">あいうえお</p>
<p style="border: 5px solid red; outline: 5px dotted  blue; outline-offset: -5px;">あいうえお</p>
</div>

サンプル表示

あいうえお

表示結果

Firefox 1.0 (Windows)での表示結果

Firefox 1.5 (Windows)での表示結果

あふれ処理（方向限定）`overflow-x, overflow-y`

[CSS3 The box model]overflow-x, overflow-y

overflowプロパティのうち、縦方向のみ、横方向のみに効果を持たせるプロパティです。IEの独自拡張でしたが、CSS3WD（草案）に含まれました。

サンプルソース

<style type="text/css">
	#overflow p	{width: 10em; height: 3em; border: 3px solid green; background-color: lime; color: black;}
	#overflow p+p	{margin-top: 2em;}
</style>
<div style="border: solid 1px blue; width: 12em;" id="overflow">
<p style="overflow-x: visible;">ここでは、あふれた内容は横方向には領域をはみ出て表示されます。</p>
<p style="overflow-x: hidden;">ここでは、あふれた内容は横方向には切り取られて表示されません。</p>
<p style="overflow-x: scroll;">ここでは、あふれた内容は横方向にはスクロールすれば表示できるようにスクロールバーをつけて表示されます。</p>
<p style="overflow-x: auto;">ここでは、あふれた内容は横方向には処理系によって自動的に処理されます。</p>
<p style="overflow-y: visible;">ここでは、あふれた内容は縦方向には領域をはみ出て表示されます。</p>
<p style="overflow-y: hidden;">ここでは、あふれた内容は縦方向には切り取られて表示されません。</p>
<p style="overflow-y: scroll;">ここでは、あふれた内容は縦方向にはスクロールすれば表示できるようにスクロールバーをつけて表示されます。</p>
<p style="overflow-y: auto;">ここでは、あふれた内容は縦方向には処理系によって自動的に処理されます。</p>
</div>

サンプル表示

ここでは、あふれた内容は横方向には領域からはみ出て表示されます。

ここでは、あふれた内容は横方向には切り取られて表示されません。

ここでは、あふれた内容は横方向にはスクロールすれば表示できるようにスクロールバーをつけて表示されます。

ここでは、あふれた内容は横方向には処理系によって自動的に処理されます。

ここでは、あふれた内容は縦方向には領域からはみ出て表示されます。

ここでは、あふれた内容は縦方向には切り取られて表示されません。

ここでは、あふれた内容は縦方向にはスクロールすれば表示できるようにスクロールバーをつけて表示されます。

ここでは、あふれた内容は縦方向には処理系によって自動的に処理されます。

表示結果

Firefox 1.0 (Windows)での表示結果

Firefox 1.5 (Windows)での表示結果

Internet Explorer 6 (Windows)での表示結果

ボックスサイズが内容物に合わせた大きさへ強制的に調整されるも参照

段組レイアウトMulti-column

[CSS3 Multi-column layout]

擬似的なものではなく、本当のマルチカラムレイアウトをCSSで実現するものです。なお、この機能はFirefox 1.5でも試験的に実装した段階ですので、一般にはまだ使用できません。

サンプル表示

ここでは三段組のコラムを設定しています。 Firefox 1.5では文字が自動的に段組されていることが確認できます。 TABLEなどを使用して擬似的にマルチカラムデザインを行った場合は、文字の配置を人が指定する必要がありますが、これを使用すると文章を足したり減らしたりしても自動的に計算されて文字列の配置が決定されていきます。画面の大きさを変えても、同じように動的に文字列の再配置が行われます。 Netscape 4までサポートされていたMULTICOLタグがついに復活したと言えます。

表示結果

Firefox 1.0 (Windows)での表示結果

Firefox 1.5 (Windows)での表示結果

xForms向け疑似クラス

[CSS3 Basic User Interface Module]New user interface state pseudo-classes

FirefoxでのxFormsサポートに伴い、xFormsで使用するCSSもサポートされるようになりました。Firefox 1.5では、:valid, :invalid, :in-range, :out-of-range, :required, :optionalがサポートされています。また:read-only, :read-writeに関しては、先行実装となっています。

サンプルソース

<style type="text/css">
	#ui_selectors :disabled {border: 1px dashed red;}
	#ui_selectors :enabled  {border: 1px dashed blue;}
</style>
<div style="border: solid 1px blue; width: 15em;" id="ui_selectors">
<h4>default</h4>
<form action="">
<p><input type="text" value="テキスト" /></p>
<p><input type="checkbox" />checkbox <input type="radio" />radio</p>
<p><input type="button" value="ボタン" /></p>
<p><textarea>textarea</textarea></p>
<p><select><option>option1</option><option>option2</option></select></p>
</form>
<h4>disabled</h4>
<form action="">
<p><input type="text" value="テキスト" disabled="disabled" /></p>
<p><input type="checkbox" disabled="disabled" />checkbox
   <input type="radio" disabled="disabled" />radio</p>
<p><input type="button" value="ボタン" disabled="disabled" /></p>
<p><textarea disabled="disabled">textarea</textarea></p>
<p><select disabled="disabled"><option>option1</option><option>option2</option></select></p>
</form>
</div>

サンプル表示

default

disabled

表示結果

Firefox 1.0 (Windows)での表示結果

Firefox 1.5 (Windows)での表示結果

Vendor Specific CSS

サイト別CSS

サイト毎にスタイルシートを適用し分けることが出来るようになりました。この機能は主としてユーザスタイルシートでの調整を目的としたものと考えられます。

サンプルソース

/* URLが一致すれば適用する。 */
@-moz-document url(http://www.mozilla.org/products/firefox/)	{
	* {background-color: white; color: black;}
}

/* URLが先方一致すれば適用する。 */
@-moz-document url-prefix(http://www.mozilla.org)	{
	* {background-color: white; color: black;}
}

/* 指定ドメインに適用する。 */
@-moz-document domain(mozilla.org)	{
	* {background-color: white; color: black;}
}

角丸アウトラインoutline-radius

outlineをborderと同じように角を丸めるものです。これもまだ試験的に実装した段階ですので、一般にはまだ使用できません。

サンプル表示

ボーダーとアウトラインを共に丸める

表示結果

Firefox 1.0 (Windows)での表示結果

Firefox 1.5 (Windows)での表示結果

ここに挙げたほかの、実験中の実装に関する情報はMozillaスタイルシート実装状況テストページを参照して下さい。

作成：2005-04-02

Firefox 1.5でのCSSスタイル指定向上

見出し

エラー表示

CSS, level 1

均等割付text-align: justify

サンプルソース

サンプル表示

表示結果

CSS, level 2

自動連番content: <counter>

サンプルソース

サンプル表示

いちばんめ

いち

にばんめ

に

さん

さんばんめ

よん

よんばんめ

ご

ろく

なな

ごばんめ

はち

表示結果

アウトラインoutline:

サンプルソース

サンプル表示

表示結果

引用符の入れ子quotes: [<string> <string>]+

サンプルソース

サンプル表示

表示結果

CSS, level 3

疑似クラス:only-child

サンプルソース

サンプル表示

表示結果

マウスカーソルの形状cursor:

サンプルソース

サンプル表示

表示結果

アウトライン間隔outline-offset:

サンプルソース

サンプル表示

表示結果

あふれ処理（方向限定）overflow-x, overflow-y

サンプルソース

サンプル表示

表示結果

段組レイアウトMulti-column

サンプル表示

表示結果

xForms向け疑似クラス

サンプルソース

サンプル表示

default

disabled

表示結果

Vendor Specific CSS

サイト別CSS

サンプルソース

角丸アウトラインoutline-radius

サンプル表示

表示結果

均等割付`text-align: justify`

自動連番`content: <counter>`

アウトライン`outline:`

引用符の入れ子`quotes: [<string> <string>]+`

疑似クラス`:only-child`

マウスカーソルの形状`cursor:`

アウトライン間隔`outline-offset:`

あふれ処理（方向限定）`overflow-x, overflow-y`