情報備忘録::IE6以下で<a>以外にも:hoverを利用

2007年12月10日 00:55

IE6以下で<a>以外にも:hoverを利用

パーマリンク | TB http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/300

Web creators (ウェブクリエイターズ) 2008年 01月号 [雑誌]のすぐに使えるCSSデザインテクニックネタ。

IE6以下ではa要素以外の:hoverや:activeをサポートしていないのでCSSで見た目を変化させようとしてもできないが、IE独自のビヘイビアを利用することでIE6でも:hoverや：activeができるようになるという。

試してみたが恐ろしく簡単な手順で恐ろしく使えることがわかって眠気がぶっ飛んだ。

手順は下記の3ステップ

.htcファイルのダウンロード
MIMEタイプの設定
CSSの設定

1. .htcファイルのダウンロード

世の中にはいろいろなhtmlコンポーネントがあるようだが、とりあえずは:hoverなどの擬似クラスを拡張してくれる「csshover.htc」を利用してみよう。

ダウンロードページ: whatever:hover

上記ページから

Version 1.42.060206 (:hover and :active)
Version 2.02.060206 (1.42 and :focus)

の2つをダウンロードしておこう。ダウンロードファイルを解凍すると「csshover.htc」と「csshover2.htc」が出てくるが1.x系が:hoverと:activeをa以外にもbody内のすべての要素で利用できるようにするもので2.x系が:focusをa,input,textareaで利用できるようにするものらしい。目的に応じてサイトにコピーしよう。

2. MINEタイプの設定

専用サーバならconfファイルとかで設定するのだろうか？共有サーバの場合は.htaccessが利用できれば設定可能だ。おそらく有料のホスティングサービスなら大抵設定できると思われる。.htaccessに下記一文を追記してUPしましょう。


AddType text/x-component .htc

3. cssの設定

body 以下の要素に適用するにはcssに下記のように記述する。


body {
	behavior: url("/ファイルまでのパス/csshover.htc");
	behavior: url("/ファイルまでのパス/csshover2.htc");
}

cssからのパスではなくcssを呼び出すファイルからのパスになるのでドキュメントルートからのパスで設定したほうがよいです。

これで準備は完了。あとは下記のようなソースで利用できます。

HTMLサンプル


<table>
<thead>
<tr>
<th>ファイル名</th>
<th>効果</th>
</tr>
</thead>

<tbody>
<tr>
<th>擬似クラス拡張</th>
<td>csshover.htc</td>
</tr>
<tr>
<th>csshover.htc</th>
<td>:hover、:activeをすべての要素で</td>
</tr>
<tr>
<th>csshover2.htc</th>
<td>:focusをa、input、textareaで</td>
</tr>
</tbody>
</table>

<br />

<input type="text" /><br />
<textarea></textarea>

CSSサンプル


tbody tr:hover {
  background-color: #FFCC00;
}

tbody tr:active {
  background-color: #00CCFF;
}

input:focus {
  background-color: #FFFFCC;
  font-weight: bold;
  color: #FF0000;
  font-size: 2em;
}
  
textarea:focus {
  background-color: #FFFFCC;
  font-weight: bold;
  color: #FF0000;
  padding: 10px;
  height: 200px;
  width: 200px;
}