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

新機能・Speech balloon

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

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

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

contentプロパティのIE8(+ActiveX フィルター)での問題

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

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

また IE7 以下ではこの content プロパティがありません。さらに静的に書いておいたタグでもうまく尻尾として表示されません。そこで border を加工する方法としました。 その上で ActiveX フィルター がない場合に手当てし、また border-color に 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 が必要になります。

最後に

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