ホーム>Web デザインのチュートリアル>WEB標準化

IEのabbrタグにスタイルを追加する

著者：Eve Cole 更新時間：2009-05-31 00:31:34

導入

<abbr> は、適切にラベル付けされた XHTML タグを Web ページ上の略語に追加するために使用されます (翻訳者注: ここでは、略語と略語は別々に考慮されます。略語の範囲は略語よりも大きく、最初の部分には <acronym> タグを使用します)省略形)、Windows 用の IE ブラウザは現在、<abbr> タグをサポートしていません。 IE では、CSS を <acronym> に適用できますが、<abbr> タグには適用できません。IE では、<acronym> タグの title 属性のプロンプトが表示されますが、<abbr> タグは無視されます。

この IE のバグ (または機能) により、一部の Web サイト利用者は <abbr> タグがまったく役に立たないと考えるようになりましたが、これは明らかに間違っています。このタグは Mozilla と Opera で引き続き正しく処理され、Web コンテンツの読みやすさとセマンティクスにとって非常に重要です。だからこそ私は解決策を探し続け、ついにそれを見つけました。

解決

この方法は単純な事実に基づいています。IE が <abbr> タグを無視しても、<abbr> タグ内にネストされている他のタグは依然として正常であるということです。そこで、<abbr> 内に <span> タグを埋め込み、<span> の title 属性と class 属性を設定すると、<abbr> が <acronym> タグと同じになり始めました。

コード例

略語の簡単な例である以下のコードを見てください。

<abbr title="カスケード スタイル シート">CSS</abbr>

次に、変更されたコードを比較します。

<abbr title="カスケード スタイル シート"><span class="abbr" title="カスケード スタイル シート">CSS</span></abbr>

自動運転

すべての <abbr> タグに <span> を手動で埋め込むことは明らかに不可能です。Mozilla と Opera にとっては退屈であり、不要です。幸いなことに、現在はクライアント側のスクリプトベースの自動化された回避策があります。

このページ (翻訳者注: 原作者のページ) の省略された単語は IE でもプロンプトが表示され、CSS スタイル (点線の下線と疑問符の形のマウス カーソル) が追加されていることに気づいたかもしれません。ただし、ソース コードを見ると、上記の <span> タグは見つかりません。これは、このページをロードする単純な JavaScript のおかげで実現されます。

関数 styleAbbr() {
var oldBodyText、newBodyText、reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)</ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class="abbr" $1>$2</SPAN></ABBR>');
document.body.innerHTML = newBodyText;
}
}
window.onload = function(){
スタイルAbbr()
};
isIE = (document.all) ? true:false;

このスクリプトはクライアント ブラウザをチェックし、IE の場合はすべての <abbr> タグを変更されたバージョン (埋め込まれた <span>) に置き換えます。 IE は DOM を通じて <abbr> 属性を取得できないため、標準の DOM メソッドの代わりに正規表現と innerHTML 属性を使用する必要があることに注意してください。

スタイリング

最後に、このページで使用されている CSS を見てみましょう。非常に単純です:

abbr、頭字語、span.abbr {
カーソル: ヘルプ;
border-bottom: 1px 破線 #000;
}

Mozilla と Opera は abbr および acronym 属性セレクターを使用し、IE は acronym とspan.abbr を使用します。とにかく、<abbr> と <acronym> はどちらも、疑問符のマウス カーソル (マウスを置いたとき) と破線の下線でスタイル設定されています。

関連記事