PB-100の宇宙の中の人
PBロッキーの日記

pbDisplay.css次期バージョンではballoon機能がつくよ!

新機能・Speech balloon

IEのActiveX周りの対処も一段落し、さらなる機能強化に鋭意取り組んでいます。

そして次期バージョンで目玉となるのが、PB-100の各マスに対してコメントを付けるスピーチバルーン(吹き出し)機能です!

案の定というか毎度のごとく、IEへのクロスブラウザに難儀しましたがなんとか目処はつきました v(^-^

demo page - pbDisplay_sample.htm
source - pbDisplay_sample.htm

contentプロパティのIE8(+ActiveX)での問題

今回初めて、cssのcontentプロパティを使ってみました。これは、css側からhtmlにテキストのみですが内容を追記できるという特殊なプロパティです。IE8と他のモダンなブラウザで使えますが、なんと今回の吹き出しの尻尾はこのcontentプロパティで描きだした要素に対して設定しています。そのおかげでhtmlコードがとてもクリーンです。

ただし、IE8でこのcontentとfilter(ActiveX)を同時に使うと正しく動かないみたいで、尻尾が表示されません。そこでIE8ではfilterは辞めて、吹き出しの透過はDataスキームな透過pngで行ってみました。トリッキーすぎるしメンテナンス性が悪すぎますが他にいい手も浮かばなかったので、、、

また、IE7以下ではこのcontentプロパティがありません。さらに静的に書いておいたタグでもうまく尻尾として表示されません。そこで、borderを加工する方法としました。その上でActiveXがない場合に手当てし、またtransparentが使えないIE6以下のためにさらに対策しました。

腐った牛乳の葬式をしている場合でなく

さて、今回も6・7・8とIE兄弟の(実は5.5でもチェックしています)クロスブラウザに振り回されましたが(一年にわたって付き合った透過周りに比べればカワイイほう)、こういう配布用のcss部品を開発している者として、その辺りのことを少し。

マイクロソフト自ら腐った牛乳発言があり、IT従事者により葬式イベントまで行われたIE6ですが(どちらもWebの人からは好意的に受け取られているようです)、ここでちょっとブラウザシェアを見てみますと。。。

IE6は世界平均と日本国内で10%程度、韓国・中国では30%前後ということで、PB-100をワールドに広める使命のあるPB-100の宇宙としては、相変わらずがっつりサポートしなければいけないことが分かります。

ついでにJavascriptの無効率も少し前に調べましたが、1%台ということでした。PB-100の宇宙では公開する全ての情報にJavascript無しでもアクセスでき、ごく一部のWebアプリケーション・検索・ブログへのコメントなどでJavascriptが必要になります。

今なおブラウザシェア10.1%もあるIE6とどう向き合えばいいのか
JavaScriptをオフにしているブラウザは1%前後。米ヤフー調べ
腐った牛乳 葬式 ie6 の検索結果

最後に

このバルーン機能は、滝本氏に先月末にお会いした折に披露して好評をいただきました。PB-100なサイトを運営していないときっとこの便利さは伝わらないだろうな~ (^-^;)

滝本飛沫さんと散策などをしてきました
夢影の鏡~ポケットコンピューティング(滝本飛沫氏運営)