Scratch Notes.

デジハリ仲間motooooooooooiさんのエントリ「CSS Quiz」、面白そうだったので挑戦してみた。
「斜線」というのはHTML/CSSのみでは「出来そうで出来ない」ものの一つで、ふつうに考えれば画像に頼る以外の道はない。
が、実は身近なプロパティを使って、アクロバティックながら簡単に実現できてしまうのだ。初めて知った時にはまさに目から鱗というか、こんなのよく思いつく人がいるなと感心してしまった。
もちろん、内容が空のボックスを必要としたりと、論理的なHTML構造が犠牲になるので(そういうのが重視される昨今では)実用性はあんまりない。あくまでトリッキーなCSS技のひとつ、と捉えて欲しい。

ちょっとだけためになるかも知れないエントリ。
MSIEにはバグが多い。誰でも知ってる事実だ。IE7がリリースされてそれなりに修正されたが、いまだに結構な数のバグが健在。

ことCSSの解釈にまつわるバグは星の数ほどあり、コーディングしているとIEのみハマるなんてことは日常茶飯事、というか、コーディング作業においてかなりの時間的リソースをIEのバグとかおかしな仕様が原因で発生する問題の対処に費やしている、なんて話も結構聞くのが現実だ。

IE6時代のwidth解釈バグ(content-boxで解釈すべきところをborder-boxで解釈する)とか、あまりに致命的なものは誰もがそれを避けて書くので実はたいして大きな問題になっていなかった。

そう、問題なのはマイナーなバグなのだ。なかなか気付きにくいので普段は意識しないが、いざハマると解決が困難な、まさに「落とし穴」である。

逐次チェックしながらコーディングしていて、IEのみ表示がおかしくなる。
たとえばfloatで寄せたボックスがIEのみズレて表示されたりする。
CSSを見直してみても特に記述がおかしな点は見当たらない。
あれこれ試してみても解決せず、仕方なくGoogleで「IE float バグ」とか検索してみると「IEにはfloatさせたボックスに含まれる要素に設定したmarginの値が2倍になるバグがあります」みたいなことを書いたblogのエントリがわんさかヒットする。

とりあえずIEの表示でハマったら、それっぽい単語を並べて検索してみるといい。たいていはバグの存在とその回避方法の情報がセットで手に入る。

…が、まれにweb上でそれらしき情報が拾えない、つまりほとんど誰にも発見されていないバグに遭遇したりする。中にはびっくりするような冗談みたいなバグがあったりして、これ意図的に仕組まれてんじゃねーかと疑ってしまうようなことも。

今日はそんなバグをまたひとつ見つけちゃったよ、というお話。いちおうひととおり検索はしてみたが、それっぽい情報は得られなかった。既知の問題ならご勘弁を。

Safariの<input type="search">のような、以前入力された履歴をプルダウンメニューから選択して再度入力できるテキストフィールドをどうやって作ろう、というエントリです。前回の記事に引き続き、まずはルック＆フィールの検討です。

Safariでご覧になっている方は既にお気づきかと思いますが、このBlogのテンプレートはSafariのRSSリーダーっぽい見た目にしてあります。
小学生の頃ちょっと流行ってた、お年玉付きハガキのウラ面にオモテ面よろしく郵便番号枠やら切手やら宛名やらをそっくりそのまま描いた「両面オモテ面年賀状」(あまりに精密に描きすぎてウラ面の切手(=ニセモノ)部分に消印が押されて届いたって逸話アリ)みたいなノリかどうかは知りませんが、Safariユーザーがちょっとニヤっとするようなのを狙ってたり。

その関係で、右上にある検索欄は<input type="search">を用いています。最近流行ってるってわけでもないですが、ウチのリンクにあるMac系の情報サイトなんかでも最近こぞって採用しているようです。てゆーかapple.comでも積極的に使われてますね。

これはSafariで見ると角丸で左側に虫眼鏡のアイコンが付いたフィールドになり、一目見て検索フィールドだと解かるだけでなく、以前検索した履歴をプルダウンメニューで選択できちゃったりして非常に秀逸。

単に検索窓として優秀なだけでなく、ちょっと応用すればいろいろ使えそうで、複雑になりがちなフォーム部分の省スペース化とユーザビリティの向上に繋がりそう。

惜しむべくはこれがSafari独自の機能であるということ。(X)HTMLの仕様では定義されていないのでこれを用いるとvalidにならないし(別にvalidじゃなくていいじゃんって話はおいといて)、当然ほかのブラウザでは解釈されず、単なるテキストフィールドになってしまいます。

そこで、Web標準の技術で他のブラウザでもこいつと同等の機能が提供できないか考えてみようと思います。まあ検索フィールドにおいて過去の検索履歴を再度参照するようなシチュエーションがどれだけあるかってのは正直微妙なところなので、ちょっと汎用性も考慮して「以前入力した履歴をプルダウンメニューから選択して再度入力できるテキストフィールド」というのを目指してみます。これなら需要ありそうですよね。

長くなりそうなので数回に分けて書く予定。

もしかしたら需要があるかもしれないのでとりあえず公開。
このBlogはSerene Bachで運用しています。これは数あるBlogシステムの中でもたいへん扱いやすく優れたシステムですが、いくつか気になるところもあり、そのひとつとして、独自タグを置換する形でシステム側が吐き出すhtmlコードが変更できない点が挙げられます。
例えばアーカイブやカテゴリのリスト。{archives_list}や{category_list}という独自タグを記述するだけで<ul><li>...という形式のリストを自動的に出力してくれるのですが、長く書きためていたりカテゴリが乱立してたりするとこのリストがどんどん長くなっていって大変なことに。
それならリストの代わりにselect要素を応用したいわゆるURLポップアップを使おう、というのは誰もが思いつく解決策ですが、さて困ったことにこれが一筋縄ではいかないのです。理由は前述のとおり、この部分はシステムが出力するコードに依存するため、単にテンプレートをいじっただけでは変更できないのです。
プラグイン等で吐き出されるコード自体を変えてしまうのがスマートな手段ではありますが、そういうプラグインを探しても見つからなかった(探し方が悪い？)ので、だったら出力されたものを後から書き替えてしまえ！という方向で考えてみました。