スキップしてメイン コンテンツに移動

Presto Operaの調教記録

Closure CompilerでminifyするとOpera7で動かない」に、ラベル付き break で構文エラーになる件を追記。ページ内索引を追記。(2022/05/30)

記載の誤りの修正。語尾の統一などの言い回しの修正。リンク切れページのインターネットアーカイブスへの変更。(2022/03/21)

ダウンロードリンク集の追記。(2020/10/20)

再利用を前提とした俺色・クロスブラウザ 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. サイドバーライブラリのスモールスクリーンモード対応

Opera 9.64 でスモールスクリーンモードを有効にするとビューポートサイズに関わらず、handheld 用スタイルが適用されます。

サイドバーをスクロールに合わせていい感じに固定してくれる、サイドバー sticky 系のコードを使用している際に、マルチカラム用からシングルカラム用への挙動の切り替えをビューポートサイズを元にしている場合、handheld 用のシングルカラムでありながらコードが走ってしまうことになります。

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

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するとOpera7で動かない

--compilation_level WHITESPACE_ONLY --formatting pretty_print だと OK。この件は、コンパイル結果のオブジェクトリテラルのプロパティ名に数値や数値文字が居ると Opera 8 未満で構文エラーになる。(2022/03/21)

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

9. Changelogより

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