JavaScriptでCSSを弄る際のメモ その3 Opera9について

このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。

前々回前回同様いい加減な部分もあるので、鵜呑みにしないように。

Changelog

  • Added support for DOM level 2 Style Sheets and associated parts of DOM level 2 CSS. (Yay!!)

Friday once more! – Opera Desktop Team

DOM2CSSが遂に!

早速インストールして色々試してみたけど、基本はFirefoxと一緒でIEの良いとこ取りになってる。コードの書き換えはほとんど必要なし。ありがとう、おぺらたん

スタイルシートルールの追加と無効

基本的な方法は前々回と一緒。3ブラウザ共通。

スタイルシートルールの取得

基本的な使い方は前々回と一緒。

Operaの場合、返ってくる値の自動補完は無効。つまりIEと一緒で、実際に記述したプロパティの値しか返ってこないっぽい。

div.hoge { background : #668 }

getStyleValue( "div.hoge", "background" );
//IE : #668
//Firefox : rgb(136, 102, 102) none repeat scroll 0% 0%
//Opera : #668

要素に適用されているスタイルを取得する

ここでちょいと前々回の修正。

FirefoxはgetComputedStyleを利用して取得するが、この場合得られる値は何が何でもpx換算されてしまう。

仮にemで指定した場合、ブラウザのフォント設定によって結果が変わってしまう。ブラウザ側で18pxと設定してCSSに1emと記述した場合、1em=1文字の大きさ=設定された18pxとなり、18pxが返ってくる。

ブラウザ側でCtrl++でフォントを大きくした場合でもしっかり対応してくれるので、使いようによっては便利かもしれない。上記の例なら、2回フォントを大きくしてから取得すれば、しっかり50%増しの27pxが返ってくる。試していないが、モニタ解像度を96dpiから72dpiに変えたりすれば、pt指定の値も変化するものと思われる。

なお、OperaはgetComputedStyleでもcurrentStyleでも両方イケるので、記述した値をまんま取得したいならcurrentStyleで取得するべきだ。

getComputedStyleで取得する場合、OperaはFirefoxと違ってブラウザ側のフォントサイズ変更には追従してくれないので注意。300%まで拡大してもデフォルトサイズが返ってくる。

それと、OperaのgetPropertyValueはFirefoxと違い、一括指定したプロパティでもIE同様に取得することができる。

#hoge { margin : 1em }

getActiveStyle( $( "hoge" ), "margin" );
//IE : 1em
//Firefox : null
//Opera(currentStyle) : 1em
//Opera(getPropertyValue) : 16px

軽くまとめる

IE : − セレクタ毎に分割登録される : × 擬似要素(:visited等)が取得できない : × 全称セレクタが削除されて登録される

Firefox : − セレクタ毎に分割登録されない : ○ ブラウザに忠実なpxサイズ取得 : △ プロパティの自動補完 : × 一括指定セレクタで取得できない

Opera : − セレクタ毎に分割登録されない : ○ IE/Firefox両方の方法で取得できる

雑感

Operaがいい感じに仕上がってきたので、ボチボチ使い始めてる。

デフォルトでも最低限の機能が揃ってるOperaをライトユーザーに。拡張をブヂュルブヂュル入れてパワーアップ! スワップしてくれるぜー! というコアユーザーはFirefox、という風に住み分けてもいいんじゃないかと思えるようになってきた。

描画周りが速いOperaをwebアプリケーション専用ランチャーにでもしようかなーとか思ってたり。メーラーとして使ってもいいだろうし。

そういやOperaは各種携帯端末だけじゃなく、DSでも使える上にwii標準搭載らしい。実にいいね。

InternetExplorer? dataスキーム未実装でスクリプト処理速度が亀でAcid2が血の海でまともにCSSが使えないブラウザなんて存在しませんよ。ファンタジーやメルヘンじゃあるまいし。