Thursday, June 26, 2008

CSS3: Target 擬似クラスを実装するスクリプト sfTarget.js を(勝手に)作り直し

CSS3 の Target 擬似クラスというものを IE,Opera に実装するスクリプトです.
Target 擬似クラスについてはこちらを参考に.


# ざっくり説明しようと思ったら意外と難しかったので省きます.
# リンク先を見てちょ

CSS3 で定義されている Target擬似クラスは IE と Opera では実装されていません. 上記エントリィ内でも Javascript で実現するスクリプトが紹介されてますが,スクリプトが読みづらい+意味不明な処理が多いので抜本的に作り直してみました.

sfTarget.js: IE,Opera に Target 擬似クラスを実装するスクリプト

JS ファイル
 コメントを削ったちょい軽量版です.


HTML に埋め込む際は head 要素内に以下の1行を挿入してください.

<script type="text/javascript" src="http://akanasu.googlepages.com/sftarget.js"></script>

ソースコード

function sfTarget () {
var cls = 'sftarget'; //クラス名
if (document.location.hash) {
var id = document.location.hash.substring(1);
var elm= document.getElementById(id);
if (elm) { elm.className += ' '+cls; }
}
for (var i=0; i < document.links.length; i++) {
if (document.links[i].hash == '') { continue; }
document.links[i].attachEvent('onclick', function (event) {
//前Target要素からクラス削除
if (document.location.hash) {
var id = document.location.hash.substring(1);
var elm= document.getElementById(id);
if (elm) { elm.className = elm.className.replace(' '+cls, ''); }
}
//Traget要素にクラス追加
var id = event.srcElement.hash.substring(1);
var elm= document.getElementById(id);
if (elm) { elm.className += ' '+cls; }
});
}
}
if (window.attachEvent) { window.attachEvent('onload', sfTarget); }


CSS 指定方法に関して

 因みに,CSS の指定方法としては

div.sftarget,
div:target {
/* (IE?), Opera ではここのスタイル指定は無視されます */
background: #0ff;
}

のようにグループ化して書けませんのでご注意ください.

div:target {
background: #0ff;
}
div.sftarget {
background: #0ff;
}

と,同じスタイルでも分けて記述しましょう.
理由としてはこちらの「説明」部分に詳しく説明されています.


:target が対応していないからですね.

リファレンス


0 comments:

Link Code for this post:

Template Design. 2008 Jyun.