KANTENNA.COM

Solarized

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

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

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しましょう。

.htaccess

AddType text/x-component .htc

3. cssの設定

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

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;
}

実行結果

ファイル名	効果
擬似クラス拡張	csshover.htc
csshover.htc	:hover、:activeをすべての要素で
csshover2.htc	:focusをa、input、textareaで

確認したところIE6、Multiple Explorers の5.01、5.5で動作しました。macIEでも動作しそうですね。

これでフルCSSのプルダウンとかも簡単に作成できそうです。

またWeb creators (ウェブクリエイターズ) 2008年 01月号 [雑誌]には同じように透過PNGをサポートしてくれる.htcもかかれてます。

Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3): 作者:デザインラボ編集部 | 価格:￥ 1,890

投稿日	2007年12月10日 00:55
カテゴリ	設定
タグ	ブラウザ \| ライブラリ
トラックバック URL	http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/977