Presto Operaの調教記録

再利用を前提とした俺色・クロスブラウザ html ベ-スのためのメモの Prestro Opera 編。問題に遭遇・解決のたびに追記していきます。

たまに NDS ブラウザで自サイトを表示してうふふってできるようにボチボチやります。

バージョンを調べる

http://help.dottoro.com/ljifbjwf.php

window.opera.buildNumber();
window.opera.version();

スモールスクリーンモード対応

Opera9.64 でスモールスクリーンモードを有効にするとブラウザウィンドウサイズに関わらず、handheld 用スタイルが適用されます。

サイドバーをスクロールに合わせていい感じに固定してくれる、サイドバー fix 系のコードを使用していて、マルチカラム→シングルカラムへの切り替えをブラウザウィンドウサイズを元にしている場合、ハンドヘルド用のシングルカラムでありながらコードが走ってレイアウトを崩してしまう。

ウィンドウサイズではなく、サイドバー要素とその親要素の位置関係などを元にマルチカラムか?シングルカラムか?検出するように修正する。

if( windowW < 800 ){/* single column */}
/* ↓調教 */
if( elmSide.offsetTop === elmSide.parentNode.offsetTop ){/* single column */}

この手の問題は Opera のスモールスクリーンモードに限らず遭遇しそうな上、js での検出も難しくはないのできちっとしておきたいところです。

複雑なセレクタでパースに失敗し以降のcssが全て無視される

Opera10.10, 9.64 で確認、7.0 では発生しなかった。:not 内の属性セレクタにタグ名指定があったところから以降の全ての css が無視されているようだった。

タグ指定は冗長で不要だったため外したところ全ての css 指定が適用された。

問題の起きる Opera の下限と上限がはっきりすれば css ハックとして使えるかもしれない…

.links a[href^="/"]:not(a[href^="//"]):before {
 content     : "+";
}
/* ↓調教 */
.links a[href^="/"]:not([href^="//"]):before {
 content     : "+";
}

ちなみに上の指定はドメイン内のリンクに対してスタイルを指定している。

Background Image の制限

背景画像に 2064px 以上の画像を使用すると、2064px を超える範囲の表示が無視され 2064px の範囲内で端の部分が表示される。Opera 8 未満。NDS ブラウザでも確認。

背景画像に alpha png を使用すると透過情報が無視される。Opera 7 で確認。

アニメーション gif が描画されない。Opera7.2 GIF animation fixes

画像の右と下に 2px づつの余白が必要。Opera7.2

ドキュメントの下に巨大な余白が発生する

Opera 9.64 でドキュメントに2ページ分程度の余白ができてしまう謎現象に遭遇しました。

スクロールバーを一番下(付近)まで下げたのち、リサイズ、リロードすると高さが正しくなります。

まったく見当が付かず、css を半分づつ削除しながら現象の発生を観察していくと次の指定を特定、コメントアウトすると解決しました。

/* ie6- の ,links a:link に以下の指定が当たってしまうので [href]をつける */
 .links a[href]:before {
     content         : ">";
     /* position        : absolute; win + opera9.64 で不可.ページにスクロール位置によって発生する余白が出来てしまう...  */
     /* top             : 0;
     left            : 0;
     display         : block; */
     position        : relative;
     left            : -0.5em;
     width           : 1em;
     height          : 1.4em; /* for iOS8 */
     line-height     : 1.4; /* for iOS8 */
     text-align      : center;
     font-weight     : bold;
 }
 .links a[href*="web.archive."]:before {
  content     : "*";
 }

border-color の解釈に失敗する

border-color を使って4辺の枠線の色を変えていたところ、この指定が反映されなかった。Opera7.2

指定方法を変えたところ色が反映された。 border-top:1px solid #ccc

objectにキーを数値でセットする

156 名前:Name_Not_Found 投稿日:2006/09/22(金) 14:42:49 ID:???

確実にチラシの裏だが聞いてくれ


    var obj = {};
    var x = 1;

    obj[x] = something;

上のなんの変哲もないコードで、Opera8系列が「極稀に」クラッシュすることを突き止めた。

理由はさっぱりわからないが、数字をキーにしてオブジェクトへアクセスすることを繰り返すと頻繁に落ちてしまうようだ。obj["a" + x] に変更したところ完全に問題なく動いている。

特に理由が無い限り、Operaサポートする宿命を負った哀れな人は、上のようなコードを避けることを強くお勧めする

https://www.opera.com/docs/changelogs/windows/900/
Removed support for "javascript:" URLs in CSS.

Fixed support for LSSerializer.writeToURI.

https://www.opera.com/docs/changelogs/windows/950b1/
Added support for the CSSOM ElementLayout.{getClientRects,getBoundingClientRect} methods (demos)

https://www.opera.com/docs/changelogs/windows/921/
Fixed support for the WMP for Firefox plug-in.

closure compiler で minify するとOpera7で動かない

--compilation_level WHITESPACE_ONLY --formatting pretty_print だとOK。