擬似要素に対しては、CSS3仕様書で用いられているコロン2つ (::) という表記を用いています。
コメントなどについては日記のコメント欄 (返信するボタンかコメントのリンク「返信する」で、入力フォームが表示されます) へどうぞ。
:activeへ継承するようになった::first-letterを含む行の行間を修正:only-childに対応:enabled, :disabledに対応:valid, :invalid, :in-range, :out-of-range, :required, :optional, :-moz-read-only, :-moz-read-writeに対応border: 1px doubleを実線として描画clear: bothが機能しないclearプロパティ指定があるとmargin計算が間違っていたcounter-increment, counter-reset, content: <counter>に対応cursorプロパティの対応強化currentColor対応outline及び関連プロパティに対応outlineが実際の要素の大きさを反映するようになったoverflowでスクロールできない場合にはスクロールバーを無効にしたoverflow-x, overflow-yに対応q要素 (quotesプロパティ) に対応text-alignプロパティを反映::first-letterの右マージン指定の問題overflowでスクロールバーが出るときの高さ計算の問題:hoverが正常に機能するように@-moz-documentを実装-moz-column-count, -moz-column-width, -moz-column-gapに対応-moz-outline-radiusに対応:activeへ継承するようになった子要素に:activeが指定されている時、その親要素に対して:activeが継承されなかった問題 (65917) が修正されています。
<p><a href="#">リンクです。「<code>:active</code>」の鉤括弧のところをマウスのボタンで押してみて下さい。押しっぱなしが判りやすいです。</a></p>
a:active { background: transparent; color: red; }
code:active { font-weight: bold; }
::first-letterを含む行の行間を修正::first-letter擬似要素指定を含む行と次の行の行間が広くなっていた問題 (21616) が修正されています。
p::first-letter { font-size: 3em; }
天地玄黄宇宙洪荒日月盈昃辰宿列張寒来暑往秋収冬蔵閏余成歳律呂調陽雲謄致雨露結為霜金生麗水玉出崑崗剣号巨闕珠称夜光菓珍李奈菜重芥薑海鹹河淡鱗潜羽翔竜師火帝鳥官人皇始制文字
: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) が修正されています。
<p><span></span></p>
span { width: 5em; border: 1px double black; }
clear: bothが機能しない空要素に対してclear: bothを指定しても機能しなかった問題 (224057) が修正されています。
<p class="kisuke">黄鬼: 聞いて驚け!</p>
<p class="aobee">青鬼: 見て笑え!</p>
<p></p>
<p class="akane">赤鬼: 我らエンマ大王様の一の子分!</p>
p { float: left; }
p:empty { float: none; clear: both }
黄鬼: 聞いて驚け!
青鬼: 見て笑え!
赤鬼: 我らエンマ大王様の一の子分!
clearプロパティ指定があるとmargin計算が間違っていた所謂Acid2テスト対応の一環で見つかった問題 (292295) です。
テスト及びスクリーンショットについては、Acid2テストのスクリーンショット集のページを参照して下さい。
counter-increment, counter-reset, content: <counter>に対応CSSにより生成されるカウンタに対応しました (3247)。
CSS2勧告のそれではなく、現在作業中のCSS2.1の次期草案の内容に従っている (comment #110) とのことなので注意して下さい。
また現在Firefoxは、CSS2仕様書のdisplay: marker、CSS3 Lists Module (WD) の擬似要素::markerの何れにも対応していません。この為、現在カウンタをリストマーカとして利用すると、後方互換性に関して問題が起こることに注意して下さい。
<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>
ul, ol { counter-reset: ulist; list-style-type: none; }
li::before { content: counters(ulist, ":") ':'; }
li { display: list-item; counter-increment: ulist; }
cursorプロパティの対応強化cursorプロパティのURI値 (38447)、及びCSS3 Basic User Interface Module (CR) への対応を増しました (286303, 163174)。追加されたものについては下のテストを参照して下さい。cursorプロパティの一般的なテストはCursor support in DOM 2 compliant browsersが判りやすいです。
URI値についての注意を挙げます。
cursor: url(ポインタの画像ファイル), default; などとする必要があります。その他キーワードに関する注意です。
context-menuには非対応である旨決定している模様です (258960)。no-dropがnot-allowedと、all-scrollがmoveと同じ為、将来は形状が変更され得ます (275173, 275174)。<URI>: 画像のURI値 (ICO/CUR形式)<URI> <x> <y>: オフセット値付きの画像のURI値 (PNG形式)cell: セル選択可vertical-text: 縦書きのテキストalias: ショートカット作成可copy: コピー可not-allowed: 操作不許可ew-resize: 左右にリサイズ可ns-resize: 上下にリサイズ可nesw-resize: 右上・左下にリサイズ可nwse-resize: 左上・右下にリサイズ可col-resize: 水平方向にリサイズ可row-resize: 垂直方向にリサイズ可no-drop: ドロップ不許可all-scroll: 全方向にスクロール可currentColor対応SVG 1.0で導入され、CSS3 Color Module (CR) に採用予定のcurrentColor値に対応しました (216559)。
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) が修正されました。主に画像を使ったリンクにフォーカスが当たったときに発現していたものです。
<a href="#"><img src="http://images.slashdot.jp/title.gif" alt="slashdot.jpバナー"></a>
a { outline: 1px dotted red; -moz-outline: 1px dotted red; }
overflow-x, overflow-yに対応CSS3 The box model module (WD) に含まれる見込みの、overflow-x, overflow-yに対応しました (72747)。同名のプロパティは、IEが独自に対応しています。
また直接関係はありませんが、overflow, overflow-x, overflow-yが指定されるなどしてスクロール可能な領域がキーボード操作やマウスホイール操作でスクロール可能になっています (97283, 251986)。
<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>
#test-overflow-x { width: 5em; overflow-x: scroll; white-space: nowrap; }
#test-overflow-y { height: 2em; overflow-y: scroll; }
overflowでスクロールできない場合にはスクロールバーを無効にしたoverflow: scrollなどと指定されていても、スクロールできない場合にはスクロールバーを「無効」であるように描画されるようになりました (76197)。
<div>A quick brown fox jumps over lazy dog's back.</div>
div { width: 5em; overflow: scroll; }
q要素 (quotesプロパティ) に対応入れ子になった時、入れ子の部分を無視していました (24861)。
a<q>b<q>c</q>d</q>e
q { quotes: '「' '」' '『' '』'; }
ab
ec
d
text-alignプロパティを反映ボタンのラベルの配置が指定できなかった問題 (138403) が修正されています。
<input type="button" value="Don't click me!">
input { width: 15em; text-align: left; }
text-align: justifyが日本語に対しても作用するようになったtext-align: justifyとしても、日本語の文字が均等割付できなかった問題 (36322) が修正されています。
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 などが利用できるようだ。
::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 (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用のテーマ向けのプロパティであり、草案を含めて何処にも類似のプロパティが存在していないことに注意して下さい。
<p>A quick brown fox jumps over lazy dog's back.</p>
p { outline: medium ridge red; outline-offset: 1ex; -moz-outline-radius: 1ex; }
A quick brown fox jumps over lazy dog's back.
以下に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です。
メディアauralはCSS2.1では削除されています。代わりにメディアspeechが附属書 Aに記述されていますが、こちらも独自のものには全く対応していません。