こんばんはヾ(･ω･｡)ﾉﾀ-!!!

ローデンです。

今日はHTML5な世間話です。

このサイトの管理とか仕事（？）とかで、Webページのボタンやリンクに :hover で「操作できる」感を出すことがよくあるのですが、こないだiPhoneやiPadでこのページを見た時の動作が凄まじく悪いことに気づきました。

例えば、右のTopやブログの↓のメニューでブログを見ようとしたら、二回クリックしないと動作しない……！



調べてみたところiPhoneやiPadではマウスカーソルを載せた時の :hover がタップ時に動作するため、うまく動作していないようです。

そこで、iOSのSafariだけ :hover を無効にするためにいくつか手を考えましたがが、どれも上手くいかないので正直諦めつつありますorz

問題はまだ解決していないのですが、たくさん試行錯誤すると無性にまとめたくなってしまうので、ここにメモしておきます。

== iOSのSafariだけ、:hoverを無効にするために検討したこと ==

1. :hover を使わない
これが鉄壁らしく、Google先生に聞くとまずこの返事が返ってきます。おおまかな方法としては jQueryのhover(in,out)関数を使ってJavascriptでCSSの:hover相当の動きをしてみよう……ということなのですが、コードを維持管理するのが面倒なのでひとまず却下

2. CSSのメディアクエリを使う
CSS内で @media screen and (条件) {...} と書くと条件に合致する環境にのみCSSを適用できます。…ただ、ここに記載できる方法でiOSを指定するには iPhoneやiPadの画面解像度を指定する方法ぐらいしかない（？）ようなので、iPadの新機種が登場するたびにメンテが必要だったり、動作確認が難しかったりするので却下しました

3. CSSハックを使う
IE6～8の頃によく使われた方法のiOSバージョンがあるみたいです。ただ、これも動作確認や未来に登場するブラウザへの対応が難しそうなので却下…。

4. HTMLの条件付きコメントを使う
[if IE 8] のような条件付きコメントを使って、iOSだけCSSを除外しようとしましたが、そもそも条件付きコメントはIEの独自機能らしいので使えない事が判明…。

5. 別のサイトを用意する
iOS用サイトとその他ブラウザ向けのサイトの2つを用意する。間違ったサイトに訪れたら場合は Apache の rewrite あたりで誘導する作戦…だけど、サイトの二重管理とかSEO対策（このサイトで？）が面倒なので却下。

6. Apache の mod_substitute を使う
Webサーバがサイトの内容を送信する前に(その時だけ)書き換える作戦…だけど、この mod_substitute はiOSからのアクセスを分別する方法がないらしい。一応似たようなことを考える人はいるらしく、Apacheに要望をよせる人もいるみたいだけど、実装はされていないようなので断念。

7. Apache の mod_actions を使う
同様にWebサーバがサイトの内容を送信する前の書き換え。こっちは設定で指定するのではなくプログラムを指定して実行できるらしい。実験中。


ということで、ただiPadでの操作を楽にしたいだけなのに黒魔術らしいところまで手を出しつつあったりします。

…うまくできればいいけど。