Presto Operaの調教記録

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

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

1. バージョンを調べる
2. サイドバーライブラリのスモールスクリーンモード対応
3. 複雑なセレクタでパースに失敗し以降のCSSが全て無視される
4. background-image の制限
5. ドキュメントの下に巨大な余白が発生する
6. border-color の解釈に失敗する
7. Object にキーを数値でセットする
8. Closure CompilerでminifyするとOpera7で動かない
9. Changelogより
10. ダウンロードリンク集

1. バージョンを調べる

Opera 8 以降で利用可能です。Opera 7 はユーザーエージェント文字列等を使って判定しています。Dottoro Web Reference > JavaScript > client-side > browser > methods > version (opera)

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

2. サイドバーライブラリのスモールスクリーンモード対応

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

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

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

Opera 10.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     : "+";
}

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

4. background-image の制限

1. 背景画像に 2064px 以上の画像を使用すると、2064px を超える範囲の表示が無視され 2064px の範囲内で端の部分が表示される。Opera 9未満。Nintendo DS ブラウザでも確認。
2. 背景画像にアルファ値付きの PNG 画像を使用すると透過が無視される。Opera 7 で確認。この情報は誤りです。(202/05/30 訂正)
3. Opera 7.0~7.1でアニメーション gif がアニメーションしない。7.2 で解決する。GIF animation fixes
4. 画像の右と下に 2px づつの余白が必要。Opera7.2

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

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     : "*";
 }

6. border-color の解釈に失敗する

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

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

7. 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サポートする宿命を負った哀れな人は、上のようなコードを避けることを強くお勧めする

8. Closure CompilerでminifyするとOpera 7で動かない

--compilation_level WHITESPACE_ONLY --formatting pretty_print だと OK。この件は、コンパイル結果のオブジェクトリテラルの添え字に、空文字列("")が居ると Opera 8未満で意図した挙動をしません。より詳しい挙動は「Javascript 実装状況と深刻なバグ」で確認できます。数値や数値文字が居ると Opera 8 未満で構文エラーになる。(2022/03/21, 2022/11/20 空文字列、バージョン、実行時のトラブルに修正, 2022/11/25 7.5→8に修正)

コンパイルによってラベル付き break が登場すると Opera 7.5x未満で構文エラーになる。(2022/05/30, 2022/11/25 8→7.5xに修正)

9. Changelogより

• Removed support for "javascript:" URLs in CSS. CSS 内に Javascript を書ける独自拡張の削除
• Fixed support for the WMP for Firefox plug-in. Windows Media Player プラグインを Firefox に続きサポート。
• Added support for the CSSOM ElementLayout.{getClientRects,getBoundingClientRect} methods (demos) 待望の getClientRects, getBoundingClientRect サポート。

10. ダウンロードリンク集