制作記録 2011/03/30
Pure CSS LightBoxやポップアップなどをjsなしでやってのけるPure CSS Popup。
こいつのためには、htmlを通常コンテンツとポップアップコンテンツに分けることになる。（モダンなブラウザの場合、Popupのためのスイッチとなる要素の直後にポップアップするコンテンツを置いても問題ない。しかしIEでコンテナの幅を設定しているとそれにつかまってしまい画面が崩れる。）
その上で、さまざまなpopupコンテンツのサイズ、さまざまな画面サイズに対して、適切にスクロールバーを出そうとすると、特にIEで酷いことになる。IE5.5、6、7(8は7モード・標準準拠で8モードだとjsがエラーになる、、、htmlの1行目で 'object' is undefined って、、！？)でそれぞれ症状が違って、スクロールバーが2重に発生したりして、これを解決するcssに行き当たるのに3日を費やしてしまった orz
その上で、コンテンツが短い場合もフッターが地につくようにするfooter-fixをいれる。これも大変。
以上を、一度はIEのみ後方互換モードでなら成功していた。それをここしばらくで、IEも標準準拠モードとした。
後方互換モードといえば、悪名高いボックスモデルのバグがあるけど、IE7やIE8でcss expressionが使えるようになったりと悪くない面もある。その上、position:relative + overflow:auto周りのバグが起きなかったりと（今回だけかも）、割とモダンなブラウザと近い解釈をしてくれたりする。また6～8までの挙動を全て5.5相当にしてしまうこともできるので、それはそれで管理が楽ジャン、と思ってしまう。
参考 overflow:auto(scroll) 要素内の position:relative(absolute) 要素 注意点
ちなみにガジェットOSのFlash起動前のメッセージも、このPureCSSPopupのコードを流用している。しかしガジェットOSのブート画面には先に出た、コンテンツのコンテナの幅はなくwidyh=100%なので、特に困ったり苦しんだりはしていない。
さて、これでようやくガジェットを作っていく基礎が済んだ。続いて常に後方互換モードで動いてしまうガジェットに代わってiframe内にDocType=html4.01な文書を生成してそこに画面を作っていくコードに取り組む。
その前にtinyWikiに成果を反映させないと、、、
これについては、一度WebOS Goodiesの伊藤さんがライブラリを公開してくださっていた。しかし現在コードへのリンクは切れてしまっている、、、またIEで大量のDOMを移動するとハングする問題が出ていたそうだ。
それにしても、無茶なことをなんとかjsだけでやろうとすると、iframeがよく出てくる。iframe奥が深い。でもこういう変態なことは基本的に避けて通りたいのだが、、、
この他にPureCSSLightboxと併せて使うjsを書いていた。これは短いものなので、jQueryなどを使わないように書いてみたけど、ie用の透過とかめんどくさいしまだよく分かっていない。。。
こいつのためには、htmlを通常コンテンツとポップアップコンテンツに分けることになる。（モダンなブラウザの場合、Popupのためのスイッチとなる要素の直後にポップアップするコンテンツを置いても問題ない。しかしIEでコンテナの幅を設定しているとそれにつかまってしまい画面が崩れる。）
その上で、さまざまなpopupコンテンツのサイズ、さまざまな画面サイズに対して、適切にスクロールバーを出そうとすると、特にIEで酷いことになる。IE5.5、6、7(8は7モード・標準準拠で8モードだとjsがエラーになる、、、htmlの1行目で 'object' is undefined って、、！？)でそれぞれ症状が違って、スクロールバーが2重に発生したりして、これを解決するcssに行き当たるのに3日を費やしてしまった orz
その上で、コンテンツが短い場合もフッターが地につくようにするfooter-fixをいれる。これも大変。
以上を、一度はIEのみ後方互換モードでなら成功していた。それをここしばらくで、IEも標準準拠モードとした。
後方互換モードといえば、悪名高いボックスモデルのバグがあるけど、IE7やIE8でcss expressionが使えるようになったりと悪くない面もある。その上、position:relative + overflow:auto周りのバグが起きなかったりと（今回だけかも）、割とモダンなブラウザと近い解釈をしてくれたりする。また6～8までの挙動を全て5.5相当にしてしまうこともできるので、それはそれで管理が楽ジャン、と思ってしまう。
参考 overflow:auto(scroll) 要素内の position:relative(absolute) 要素 注意点
ちなみにガジェットOSのFlash起動前のメッセージも、このPureCSSPopupのコードを流用している。しかしガジェットOSのブート画面には先に出た、コンテンツのコンテナの幅はなくwidyh=100%なので、特に困ったり苦しんだりはしていない。
さて、これでようやくガジェットを作っていく基礎が済んだ。続いて常に後方互換モードで動いてしまうガジェットに代わってiframe内にDocType=html4.01な文書を生成してそこに画面を作っていくコードに取り組む。
その前にtinyWikiに成果を反映させないと、、、
これについては、一度WebOS Goodiesの伊藤さんがライブラリを公開してくださっていた。しかし現在コードへのリンクは切れてしまっている、、、またIEで大量のDOMを移動するとハングする問題が出ていたそうだ。
それにしても、無茶なことをなんとかjsだけでやろうとすると、iframeがよく出てくる。iframe奥が深い。でもこういう変態なことは基本的に避けて通りたいのだが、、、
この他にPureCSSLightboxと併せて使うjsを書いていた。これは短いものなので、jQueryなどを使わないように書いてみたけど、ie用の透過とかめんどくさいしまだよく分かっていない。。。