jQueryを使ってHTML5のmarkタグに対応しているかを判定する方法

HTML5の<mark>タグとは

HTML5で新しく追加された<mark>タグは、文書内の該当するテキスト部分をハイライト表示（蛍光ペンで塗ったような強調）するための要素です。ただし、古いブラウザの中にはこのタグに対応していないものもあり、実際にスタイルが適用されるかどうかを事前に確認したいケースがあります。

jQueryで互換性をチェックするコード

以下のコードを使用すると、ブラウザが<mark>タグに対応しているかどうかを動的に判定できます。

var $myEL = $('<mark>');
$myEL.appendTo('body');
var bgColor = $myEL.css('backgroundColor');

if (/rgb\(255\, 255\, 0\)/.test(bgColor))
    return true;
else
    return false;

コードの仕組み

この判定方法は、<mark>タグのデフォルトスタイル（背景色が黄色：rgb(255, 255, 0)）が適用されるかどうかを利用しています。処理の流れは以下の通りです。

1. jQueryで<mark>要素を一時的に生成します。
2. 生成した要素をbodyに追加します。
3. 要素の背景色（backgroundColor）を取得します。
4. 正規表現で「rgb(255, 255, 0)」という黄色のデフォルト値に一致するかをテストし、一致すればtrue、しなければfalseを返します。

対応していないブラウザではデフォルトの黄色い背景色が適用されないため、この結果をもとにフォールバック処理（独自のCSSでのハイライト表示など）を実装することができます。