Wii Opera のCSSセレクタ対応状況

The Rendering Engine for the Wii という Tim の記事の中に、

New to the rendering engine used on the Wii is support for more CSS 3 selectors, partial text-shadow support (colors aren't correct),...

The Rendering Engine for the Wii | Stranger, yet...

とあったので、具体的に何が対応したのかを調べてみた。

Opera CSSセレクタチェック

ついでに、Opera 7.54，8.54，9.00，9.10，9.20 も調べて一覧表にした。

1. CSS3.info の CSS Selectors testsuite を利用した。
2. 対象は、Opera 7.54u2（build3929），8.54（build7730），9.00（build8501），9.10（build8679），9.20（build8771），Wii（Opera 9.10 build1621）
   1. Opera 6 は CSS3.info に行った途端クラッシュするので対象から外した。
   2. Mobile Opera は持ってない。
   3. DS Opera は無くした。
   4. ちなみに、Opera videoは 9.20 と同じ結果だった。
3. 微妙に結果が異なることがあったのでそれぞれ4～5回チェックを行い、前後の対応から見てそれっぽいのを採用した。
4. 結果は CSS3.info のそれに準じた。
   1. ただし、順番は W3C Working Draft - Selectors と同じように並び替えた。
   2. OK だの n out of n failed だのから詳細ページへのリンクを張った。
   3. E:active，E:hover，E:focus，E::selection はテストできないので、自分で作ったテストページでチェックした。
      1. これらの結果については斜体の小文字になっており、当然 CSS3.info へのリンクも張っていない。
      2. Wii の E::selection についてはチェックのしようがなかったが、とりあえず no としておいた。

チェック結果について

Opera 9.20 のチェック結果において、Opera 9 の CSS サポートでは"Yes"であるはずの E[foo="bar"]，E[foo^="bar"]，E[foo$="bar"]，E:first-child，E:empty，E:lang(fr) が、failed となっている。詳細は、

failed BE[foo="bar"]

<div align="hogebar">

<div align="bar hoge">

<div align=" bar ">

failed AE[foo^="bar"]

<div foo="hogebar">

<div foo="hoge bar">

<div foo="hoge-bar">

<div foo=" bar ">

failed AE[foo$="bar"]

<div foo="barhoge">

<div foo="bar hoge">

<div foo="bar-hoge">

<div foo=" bar ">

failed BE:first-child

<div> <div id="insertBefore"></div> </div>

var ib = document.getElementById('insertBefore'); ib.parentElement.insertBefore(document.createElement("div"), ib);

failed AE:empty

<div></div>

<div><!-- Just a comment --></div>

failed BE:lang(fr)

<div align="enUS">

とあり、failed Aが未対応、failed Bがバグとのこと。Opera，CSS3.info 双方のチェックの妥当性については僕の知るところではないが、とりあえずそういうことらしい。

Wii Opera

さて、Tim の言うNew to the rendering engine used on the Wii is support for more CSS 3 selectorsとは何か。

Opera の公式文書を全てとする場合

即ち、failed AE[foo^="bar"]，failed AE[foo$="bar"] 及びfailed Bを対応と見なす場合は以下の5つ。

E:root，E:target，E:not(s)，E:nth-child(n)，E:nth-of-type(n)

CSS3.info の結果を全てとする場合

即ち、failed Aが未対応、failed Bがバグと見なす場合は以下の5つ。

E[foo^="bar"]，E[foo$="bar"]，E:root，E:target，E:not(s)

共通するのは E:root，E:target，E:not(s) の3つか。ややこしい。

単純に、CSS3.info のチェックを全てと考え、Wii Opera で修正・追加されたセレクタ（CSS1～3）を見た方がわかりやすいかもしれない。

1. E[foo="bar"]
2. E[foo^="bar"]
3. E[foo$="bar"]
4. E:root
5. E:first-child
6. E:target
7. E:lang(fr)
8. E:not(s)

合計8つということで、The rendering engine used by the Internet Channel is the most advanced rendering engine publicly available from Opera Software.という一文にも頷ける。この分だと、今後のデスクトップ版にも期待できそうだ。

参考リンク

• Opera for Wiiリリース - ノヴム・オペラヌム - by Satoru Watanabe
• Opera 9 でサポートされるウェブ仕様 - CSS
• CSS3 . info - Everything you need to know about CSS3
• W3C Working Draft - Selectors
• CSS セレクタに関するおさらい | WWW WATCH
• CSS セレクタに関するおさらい 2 | WWW WATCH
• CSS セレクタに関するおさらい 3 | WWW WATCH