CSSメモ: Firefox 1.5での新機能

擬似要素に対しては、CSS3仕様書で用いられているコロン2つ (::) という表記を用いています。

コメントなどについては日記のコメント欄 (返信するボタンかコメントのリンク「返信する」で、入力フォームが表示されます) へどうぞ。

目次

セレクタ

親要素の:activeへ継承するようになった

子要素に:activeが指定されている時、その親要素に対して:activeが継承されなかった問題 (65917) が修正されています。

サンプル

HTMLソース

<p><a href="#">リンクです。「<code>:active</code>」の鉤括弧のところをマウスのボタンで押してみて下さい。押しっぱなしが判りやすいです。</a></p>

CSSソース

a:active { background: transparent; color: red; }
code:active { font-weight: bold; }

テスト

リンクです。「:active」の鉤括弧のところをマウスのボタンで押してみて下さい。押しっぱなしが判りやすいです。

スクリーンショット

Firefox 1.5

Firefox 1.5では、code要素をactiveにしても、親要素であるリンク (a要素) もactiveになります。リンク内のどこをプレスしても、リンクであるように描画されます。

Firefox 1.0.7

Firefox 1.0では、リンク内をプレスしているのにも関わらず、リンクがactiveになりません。


擬似要素::first-letterを含む行の行間を修正

::first-letter擬似要素指定を含む行と次の行の行間が広くなっていた問題 (21616) が修正されています。

テストコード

CSSソース

p::first-letter { font-size: 3em; }

テスト

天地玄黄宇宙洪荒日月盈昃辰宿列張寒来暑往秋収冬蔵閏余成歳律呂調陽雲謄致雨露結為霜金生麗水玉出崑崗剣号巨闕珠称夜光菓珍李奈菜重芥薑海鹹河淡鱗潜羽翔竜師火帝鳥官人皇始制文字

スクリーンショット

Firefox 1.5

Firefox 1.5では正常に表示されます。

Firefox 1.0.7

Firefox 1.0では、first-letter擬似要素がある行の下の行間が広がってしまっています。


擬似クラス:only-childに対応

同じレベルに要素が一つしか含まれない場合に該当する擬似クラスに対応しました (237568)。CSS3 selectors (CR) で追加予定のものです。


擬似クラス:enabled, :disabledに対応

要素の有効・無効の状態に該当する擬似クラスに対応しました (84400)。主にフォーム要素に対して利用できます。CSS3 selectors (CR) で追加予定のものです。


擬似クラス:valid, :invalid, :in-range, :out-of-range, :required, :optional, :-moz-read-only, :-moz-read-writeに対応

XFormsで利用される幾つかの擬似クラスに対応しました (302462, 302608, 302188)。これらは何れも、CSS3 Basic User Interface Module (CR) で追加予定のものです。:read-only:read-write-moz接頭辞付きの、先行実装となっています (312971)。

テストを参照して下さい。XForms拡張のインストールが必要です。


プロパティ

border: 1px doubleを実線として描画

幅1pxの枠線で、形状に二重線を指定すると全く描画されなかった問題 (1781) が修正されています。

テストコード

HTMLソース

<p><span></span></p>

CSSソース

span { width: 5em; border: 1px double black; }

テスト

スクリーンショット

Firefox 1.5

Firefox 1.5ではsolidと同様に線が描画されます。

Firefox 1.0.7

Firefox 1.0では全く描画されません。


空要素に指定されたclear: bothが機能しない

空要素に対してclear: bothを指定しても機能しなかった問題 (224057) が修正されています。

テストコード

HTMLソース

<p class="kisuke">黄鬼: 聞いて驚け!</p>
<p class="aobee">青鬼: 見て笑え!</p>
<p></p>
<p class="akane">赤鬼: 我らエンマ大王様の一の子分!</p>

CSSソース

p { float: left; }
p:empty { float: none; clear: both }

テスト

黄鬼: 聞いて驚け!

青鬼: 見て笑え!

赤鬼: 我らエンマ大王様の一の子分!

スクリーンショット

Firefox 1.5

Firefox 1.5では充分な幅があっても、赤鬼のセリフが下に配置されます。

Firefox 1.0.7

Firefox 1.0では充分な幅がある時は三人の台詞が一列に描画されます。


親要素にclearプロパティ指定があるとmargin計算が間違っていた

所謂Acid2テスト対応の一環で見つかった問題 (292295) です。

テスト及びスクリーンショットについては、Acid2テストのスクリーンショット集のページを参照して下さい。


counter-increment, counter-reset, content: <counter>に対応

CSSにより生成されるカウンタに対応しました (3247)。

CSS2勧告のそれではなく、現在作業中のCSS2.1の次期草案の内容に従っている (comment #110) とのことなので注意して下さい。

また現在Firefoxは、CSS2仕様書のdisplay: markerCSS3 Lists Module (WD) の擬似要素::markerの何れにも対応していません。この為、現在カウンタをリストマーカとして利用すると、後方互換性に関して問題が起こることに注意して下さい。

テストコード

HTMLソース
<ul>
<li>This line should begin with '1:'.</li>
<li>This line should begin with '2:'.
<ol>
<li>This line should begin with '2:1:'.</li>
<li>This line should begin with '2:2:'.</li>
</ol>
</li>
<li>This line should begin with '3:'.</li>
</ul>
CSSソース

ul, ol { counter-reset: ulist; list-style-type: none; }
li::before { content: counters(ulist, ":") ':'; }
li { display: list-item; counter-increment: ulist; }

テスト

スクリーンショット

Firefox 1.5

Firefox 1.5ではリストマーカの代わりに数字が表示されます。

Firefox 1.0.7

Firefox 1.0ではリストマーカが全く表示されません。


cursorプロパティの対応強化

cursorプロパティのURI値 (38447)、及びCSS3 Basic User Interface Module (CR) への対応を増しました (286303, 163174)。追加されたものについては下のテストを参照して下さい。cursorプロパティの一般的なテストはCursor support in DOM 2 compliant browsersが判りやすいです。

URI値についての注意を挙げます。

その他キーワードに関する注意です。

テスト


[SVG1][CSS3] キーワードcurrentColor対応

SVG 1.0で導入されCSS3 Color Module (CR) に採用予定currentColor値に対応しました (216559)。


[CSS2] outline及び関連プロパティに対応

outline-color, outline-style, outline-width, outline-offset, outlineに対応しました (281972)。以前から-moz-outline-color, -moz-outline-style, -moz-outline-width, -moz-outline-offset, -moz-outlineが利用可能でしたが、Firefox 1.5ではCSS2.1 (WD) に沿ったプロパティが利用できるようになりました。


outlineが実際の要素の大きさを反映するようになった

子要素が要素の大きさを拡張するとき、輪郭線がそれを反映しなかった問題 (133165) が修正されました。主に画像を使ったリンクにフォーカスが当たったときに発現していたものです。

テストコード

HTMLソース

<a href="#"><img src="http://images.slashdot.jp/title.gif" alt="slashdot.jpバナー"></a>

CSSソース

a { outline: 1px dotted red; -moz-outline: 1px dotted red; }

テスト

slashdot.jpバナー

スクリーンショット

Firefox 1.5

Firefox 1.5では輪郭線が画像を囲んで表示されます。

Firefox 1.0.7

Firefox 1.0では画像の大きさを無視して表示されてしまっています。


[CSS3] overflow-x, overflow-yに対応

CSS3 The box model module (WD) に含まれる見込みの、overflow-x, overflow-yに対応しました (72747)。同名のプロパティは、IEが独自に対応しています。

また直接関係はありませんが、overflow, overflow-x, overflow-yが指定されるなどしてスクロール可能な領域がキーボード操作やマウスホイール操作でスクロール可能になっています (97283, 251986)。

テストコード

HTMLソース

<div id="test-overflow-x">A quick brown fox jumps over lazy dog's back.</div>
<div id="test-overflow-y">A<br>quick<br>brown<br>fox<br>jumps<br>over<br>lazy<br>dog's<br>back.</div>

CSSソース

#test-overflow-x { width: 5em; overflow-x: scroll; white-space: nowrap; }
#test-overflow-y { height: 2em; overflow-y: scroll; }

テスト

A quick brown fox jumps over lazy dog's back.
A
quick
brown
fox
jumps
over
lazy
dog's
back.

スクリーンショット

Firefox 1.5

Firefox 1.5ではスクロールバーが指定された方向 (overflow-xでは水平方向、overflow-yでは垂直方向) のみに描画されます。

Firefox 1.0.7

Firefox 1.0ではスクロールバーが表示されず、「溢れ」て描画されています。


overflowでスクロールできない場合にはスクロールバーを無効にした

overflow: scrollなどと指定されていても、スクロールできない場合にはスクロールバーを「無効」であるように描画されるようになりました (76197)。

テストコード

HTMLソース

<div>A quick brown fox jumps over lazy dog's back.</div>

CSSソース

div { width: 5em; overflow: scroll; }

テスト

A quick brown fox jumps over lazy dog's back.

スクリーンショット

Firefox 1.5

Firefox 1.5ではスクロールボックス、ボタンが無効であるように描画され、操作不可能であることが明示されます。

Firefox 1.0.7

Firefox 1.0では動かせないスクロールバーが描画されてしまっています。


入れ子になったq要素 (quotesプロパティ) に対応

入れ子になった時、入れ子の部分を無視していました (24861)。

テストコード

HTMLソース

a<q>b<q>c</q>d</q>e

CSSソース

q { quotes: '「' '」' '『' '』'; }

テスト

abcde

スクリーンショット

Firefox 1.5

Firefox 1.5では正常に、a「b『c』d」e のように表示されます。

Firefox 1.0.7

Firefox 1.0では入れ子の部分が無視され、a「b「c」d」e のように表示されます。


フォームのボタンに指定されたtext-alignプロパティを反映

ボタンのラベルの配置が指定できなかった問題 (138403) が修正されています。

テストコード

HTMLソース

<input type="button" value="Don't click me!">

CSSソース

input { width: 15em; text-align: left; }

テスト

スクリーンショット

Firefox 1.5

Firefox 1.5ではラベルの位置が左に寄っています。

Firefox 1.0.7

Firefox 1.0では中央寄せされています。


text-align: justifyが日本語に対しても作用するようになった

text-align: justifyとしても、日本語の文字が均等割付できなかった問題 (36322) が修正されています。

テストコード

CSSソース

p { width: 5em; text-align: justify; }

テスト

先日のスラッシュドットの記事にあったとおり、WILLCOM はシャープ製 Windows Mobile 5.0 搭載スマートフォン「W-ZERO3」を発表した(WILLCOMの製品ページ, シャープの発表, MSの発表)。 3.7型 VGA(640x480)液晶と QWERTYフルキーボード、130万画素のカメラを搭載しており、CPU は Intel PXA270 416MHz, 128MBのフラッシュメモリと64MBのRAM を搭載する。 通信・通話はW-SIMを差し込んで行うようになっており、また802.11bの無線LANを内蔵している。 サイズは W70×H130×D26mm で約 220g 。 ソフトウェアとしては IE, Outlook, MS Office Mobile や Media Player 10 、Java などが利用できるようだ。

スクリーンショット

Firefox 1.5

Firefox 1.5では均等に割り付けられ、左右両端がそろって表示されます。

Firefox 1.0.7

Firefox 1.0すべての行で詰まって表示されます。右端が揃っていないのが判ると思います。


擬似要素::first-letterの右マージン指定の問題

サイト「CSSバグリスト@CSSバグ辞典スレッド」でMozilla 044として挙げられていた、擬似要素::first-letterの右マージン指定が無視されていた問題 (60289) が修正されています。


overflowでスクロールバーが出るときの高さ計算の問題

サイト「CSSバグリスト@CSSバグ辞典スレッド」でMozilla 058として挙げられていた、overflowプロパティを指定した要素の高さ計算が間違うことがあった問題 (47710) が一部修正されています。


内容領域とスクロールバーの境界部で:hoverが正常に機能するように

サイト「CSSバグリスト@CSSバグ辞典スレッド」でMozilla 081として挙げられていた、overflowプロパティと擬似クラス:hoverの組み合わせで正常に機能しないことがあった問題が修正されています。多分240276で修正されたものと思われます。


Gecko独自拡張

この節に挙げるのはGecko (Firefoxのレンダリングエンジン) が独自に拡張した、CSSの@規則、セレクタ、プロパティ及びそれらのキーワードで、新たに追加されたものについて言及しています。この文法はCSS2.1 草案に盛り込まれているもので、Gecko以外では無視されるものです。

@-moz-documentを実装

単一のCSSドキュメントにURI毎の規則を記述できるようにする、@-moz-documentが実装されました 238099)。

主にユーザスタイルシート (usercontent.css) で利用され得るもので、ウェブページでは無用のものです。今までは同様のことをする為にURI idなどの拡張の別途インストールが必要でしたが、Firefox 1.5では簡単に記述出来るようになります。

コード例・解説

@-moz-document domain(example.com) {
/* ここに記述されるスタイルシートが、example.comで終わるドメインに適用される
 (例:www.example.com, test.example.com, example.com)。
スキーマ (httpやhttpsなど) は問わない模様。 */
}

@-moz-document url(http://www.example.com/) {
/* ここに記述されるスタイルシートが、http://www.example.com/に適用される。
http://www.example.com/index.html には適用されない。*/
}

@-moz-document url-prefix(http://www.example.com/foo/bar/) {
/* ここに記述されるスタイルシートが、
http://www.example.com/foo/bar/で始まるURIに適用される。 */
}

@-moz-documentの引数 (domain(), url(), url-prefix()) はコンマで区切って複数指定出来ます。


-moz-column-count, -moz-column-width, -moz-column-gapに対応

これらプロパティはCSS3 Multi-column layout Module (WD) に採用されるかも知れないものの先行実装となっています (251162)。HTML+CSSで、ある程度簡単に段組が出来る様になります。


-moz-outline-radiusに対応

outlineで描画される輪郭線の角を丸める、-moz-outline-radiusに対応しました 24676)。

主にMac OS X用のテーマ向けのプロパティであり、草案を含めて何処にも類似のプロパティが存在していないことに注意して下さい。

テストコード

HTMLソース

<p>A quick brown fox jumps over lazy dog's back.</p>

CSSソース

p { outline: medium ridge red; outline-offset: 1ex; -moz-outline-radius: 1ex; }

テスト

A quick brown fox jumps over lazy dog's back.

スクリーンショット

Firefox 1.5

Firefox 1.5では枠線 (border) の外に輪郭線 (outline) が描画され、その角が丸まって描画されます。

Firefox 1.0.7

Firefox 1.0ではoutlineが描画されません。輪郭線の場所が間違っているのもバグと思われます。


CSS2.1でGeckoが非対応のもの

以下にCSS2.1の、@規則、セレクタ、プロパティ及びそれらのキーワードの内Firefox 1.5 (Gecko 1.8) で対応していないものを挙げます。

この節の一覧は飽く迄参考に留めて下さい。CSS2.1は草案 (Working Draft) 段階であり、これからも変更が有り得ます。以下に載っていないものが、完全に実装されている訳ではありません。また、前述の一覧には各CSS3モジュールについても言及していますが、ここには含めません。同様にCSS2勧告はここでは対象としていません。

display [2.1]
inline-block (9458) (2.1で追加)
inline-table (18217)
run-in (2056)
font-weight [2.1]
bolder, lighter (93725)
white-space [2.1]
pre-line (230555) (2.1で追加)
pre-wrap (261081) (2.1で追加)

メディアグループpaged独自のものには殆ど対応していません。例外はpage-break-after: always, page-break-before: alwaysです。

メディアauralCSS2.1では削除されています。代わりにメディアspeechが附属書 Aに記述されていますが、こちらも独自のものには全く対応していません。