- 快適なブラウジングを -
（これよりインターネットチャンネルをWii Operaと表記します）
とはいっても、Opera 9とほぼ同じなのです。
レンダリングに関しては、某ブラウザよりもよっぽど優秀なのです！
さらに、Wii Operaでは、いくつかのCSS3のセレクタにも対応します。
さらに、Wii Operaでは、いくつかのCSS3のセレクタにも対応します。
と思ったのですが、検証したら対応していませんでした...。
同じopera 9でも、Buildナンバーが違うからでしょうか。
ちなみに、Win版Opera 9では、以下のセレクタに対応しています。
また、Opera 8以降のみに適用させるCSSハックも、Wii Operaに適用されます。
*+html>/**/bodyE {
color: red;
}
こんな感じで適用すると...
Hackが適用されていれば文字色が赤くなる。
なにはともあれ、ここまで実装がしっかりしていると、
が、実現するわけなのです。
現に、ほとんどの(Web標準な)サイトはレイアウト崩れもなく、PCと同等に表示されています。
「PCと同等ならそのままのスタイルを流用できる」
さらに、PCと同等のフォントサイズでは、文字の輪郭が滲んでしまい、とても読みにくくなってしまいます。
ご覧ください!この「Macに憧れてWindowsにosakaフォントを入れてみたら、輪郭が滲んでしまって使い物にならない」のと同じ感じを！
上ではfont-size: 13px;で表示させています。
これでは使い物にならないので、Wii用に新しくスタイルを作るわけなのですが...
Win Operaには、通常表示の他に、Small Screen Modeと、Full Screen Modeの2種類の表示方法があります。
それぞれの表示に切り替えると、以下のようにメディアタイプが変化されます。
一方、Wii Operaにも Small Screen Modeなるものが存在します。しかし...
さらには、TVで表示されることを前提としているはず + メディアタイプにわざわざ"tv"があるのに、
これは...マジですか＞＜
結果、すべての定義されているメディアタイプを試すも、"screen"にしか対応していませんでした。
ここは他の方法を取らざるを得ません...
一つめに思いつくのがUAでの振り分けです。Wii Operaでは
Opera/9.00 (Nintendo Wii; U; ; 1309-9; ja)
となっていますので、これを利用してWii用のスタイルと振り分けるか、上書きすることになります。
Media QueryとはCSS3にて定義中の、Media Typeの拡張版です。たとえば...
といったものを指定し、ユーザーの環境を詳しく指定してスタイルを当てることができます。
このMedia Queryを、Opera 9は(一部)サポートしています。これを使えば、
と指定するだけで、Wiiと、限りなくWiiに近い環境にスタイルを当てることができます。
指定方法は下のような感じで書くだけなのです。
CSS内に、
@import url("wii.css") screen
and (device-width: 800px)
and (device-height: 600px)
and (device-aspect-ratio: 4/3);
Media Queryが適用されていれば、ここの文字色が赤くなる
Wiiにのみスタイルを適用できれば、その環境にあった最適なコンテントをつくることが可能でしょう。
現時点で実装されている機能は、本当に微々たるものなので正式版では今よりも魅力的になるでしょう。
本当はフォントサイズとカラム幅を変更するブックマークレットとかも作りたかったのですが…
紹介し忘れましたが、Wii OperaはAcid 2にも合格しています。
Windows 機で初めて合格したのもOperaですし、すごいですね。
また、この資料はW3C謹製のHTMLプレゼンテーションツール HTML Slidy で作成されています。