====== CSS1Compat メモ ======
meta-tags: opera,webdesign,css,webstandards,flash
meta-entiry_id: compatmode
meta-author: t.ashula
meta-creation_date: 2007-02-21T16:18:58+09:00
Opera 9.x で ''document.compatMode=CSS1Compat'' いわゆる標準準拠モードのとき,OBJECT要素の属性WIDTHとHEIGHT は Pixel でしか指定できない.
渡辺満里奈の髙敷居渡辺満里奈の公式ウェブサイト[[http://www.marina-watanabe.com|MARINA WATANABE OFFICIAL WEB SITE]]が見られないのはそういう理由(だと思う).
件のサイト,他にもつっこみどころがあって問題の原因をどっから切り分けたらいいのかちょっと悩むのだが,最終的にファイル先頭のDOCTYPE decl. を外すことで解決したので主因は標準準拠モードの関係なのだと思う.
=====Flash はわりとハマるところ=====
Flash関連で見られない場合,いくつかパターンがある.たとえば,HTTP-Request-Head や scriptでUA判定してOperaを弾いてたり,日本語のパスが(エンコードを合わせずに)書かれてたり,あるいはYouTubeでシークバーの動作がおかしかったようにプラグインの動作自体に問題がある場合などである.
UAで弾いている場合,大抵,UAを変えれば済む.その場合,「IEで認識」にするとIE特化のscriptを呼び出すこともあるので,「Firefoxとして認識」のほうが何かと都合がいい.
''document.all'' を使ってる場合など,IE として認識の方が動く場合もある
日本語のパスを含んでる問題は,サイト側の問題なので製作者に直してもらうか,適当な文字コードでurlencodeすればうまくいく事もある.
最後のは,もうどうにもならないので Operaにバグレポート出すか,ブラウザを変えてみるしかない.
ところが,この公式サイトの場合,scriptで弾いてるわけじゃない.弾くならそれなりのメッセージのページに飛ばすのが通常だし,ソースを見てもそんなスクリプトはない.じゃあ他の原因かと,呼び出してるswfファイル([[http://www.marina-watanabe.com/top.swf]])を直接指定すると問題ないので,パスが不適切なわけでも,swfファイルに問題があるわけでもない.
てことは,Flashに関係なく Opera側のHTML/CSSの解釈の問題で表示されないんだなと,ソースをいじってみる事にした.
=====仕様を確認=====
とりあえず,''javascript:alert(document.compatMode) ''で,モードを確認すると,Standartdを表す,''CSS1Compat''になっている.これは,XHTML 1.0 の Transitional の DOOCTYPE decl. があるからで,[[http://hsivonen.iki.fi/doctype/|Activating the Right Layout Mode Using the Doctype Declaration]]では,""=http://hsivonen.iki.fi/doctype/|Mozilla’s Almost Standards Mode""という扱い.
で,[[http://jp.opera.com/docs/specs/doctype/|Opera 9 DOCTYPE スイッチ]]を改めて確認すると,CSSのプロパティの単位が無い場合の扱いは書かれているが,どれも該当しそうにない.ページのCSS は スクロールバー用の拡張だけしか書かれてないので,boxモデルの扱いも,overflowの処理も関係ない.
仕方がないので,try-n-error で怪しげな記述を探る事にした.
=====HTMLを書き換えてみる=====
ページ自体が,xhtmlとしては,かなり間違ってるのでまずはそこから書き直してみた.XMLとして正規化したり,DTDにないembedを消したり,たいして状況は変わらなかったが,画面上何か線の様なものが見えるようになった.
てことは,サイズが合ってないのかと,object の width と height を確認すると 100% となっている.HTML 4.01 で object の width/height は [[http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-length| Length ]] なので,% でもいけるはず.一応,[[http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#adef-width-IMG|13.7 Visual presentation of images, objects, and applets ]] のところに ""=http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#adef-width-IMG|All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets."" とあって,CSSでの置き換えをということにはなっているけども,ダメとは言われてない.
だが,サイズがおかしいのは明白なので,640x480 を直に設定してみたところ,そのサイズで無事表示されるようになった.ところが100%にするとやっぱり無理.ということで,標準モードではパーセンテージでの表示は無理という結論に.
=====互換モードにしてみる=====
まあ原因のひとつは「標準モードとパーセンテージ指定」ってことなので,パーセンテージをあきらめないなら,標準モードをあきらめるしかない.
手っ取り早く DOCTYPE decl. をはずせば,確実に 互換モードになるので,外してみると,パーセンテージで問題なく全画面Flashにする事ができた.
=====まとめ=====
標準準拠モードで object の width/height に % 指定はできない.全画面にしたければ 互換モードにするか,scriptで動的にサイズを指定する.
=====追記=====
スクリプトで何とかしてみるサンプル[[:opera:tips:embed_fix|embed_fix]].