目次SampleIEChromeFirefoxOperaゴール雑感ちょっと調べ物をしたのでメモ。画像1枚だけで、グレースケール、マウスホバーでカラー画像に、みたいなのを実装したい、出来ればJavaScriptも使用せず、みたいな内容です。2枚用意しろよと言われたら実も蓋もないんですけど、画像1枚だけでグレースケール⇔カラー画像を実装したい。画像の数は半分で済むし、加工の時間も不要になるのは大きなメリットです。1年前に同じ事をunformedbuilding(アップデート版もありました)さんがやってますので合わせてどうぞ。Sampleマウス乗せるとカラーになる、という良くあるホバーエフェクトですが、極力無駄を省きたい。画像が1枚で済めば、20枚必要なところが10枚で済むし、画像が追加されても加工したり、マークアップしなおしたりファイルをアップロードする必要がなくなります。IEIEはfilterプロパティ使えばいいですね。none;}※IE6は対応しない。Chrome-webkit-filterプロパティでグレースケール化できる。grayscale(0%);}-webkit-filterはSafari(5.1.7)では対応してないけど5.2から対応するみたい。Safariもまだ対応してないのでiPhoneでは実装出来ませんでした。タッチデバイスでのホバーエフェクトはユーザビリティを損なう可能性が高いので個人的には推奨しません。Firefox3.5以上。filterプロパティを使います。svgでフィルタを作り、そのsvgをDataURIで書いてURLとして指定。none;}:hover処理はIEと同じですね。imageOperacanvas等を利用しないとダメっぽいですね。可哀想だけど諸々の理由から対応しない方向で。Hoverという記事が参考になりそうです。none;}割とエコなのでは。多少のブラウザの犠牲がコンテンツの目的や目標に影響しないようなら個人的にはクライアントワークでも提案はすると思います。してもクロスブラウザで、という場合はJavaScriptで対応すればいいですね。GRAYSCALE.JSとか良さそうでした。