Detect compatibility of the new Html5 tag <mark>

Question

How can I detect the compatibility of the new tag .I'm using a method like this (with jQuery):

var $mark = $('<mark>');
$mark.appendTo('html');
var bg = $mark.css('background');
if (/rgb\(255\, 255\, 0\)/.test(bg)) return true;
else return false;

But the problem is it return false in firefox nightly, even it is supported. I inspect the mark element, found that other browsers(chrome, safari) will add a style for this tag automatically which includes a background-color and a color.

Unfortunately firefox haven't add style for the tag what chrome and safari do. But the tag also has a yellow background.

So I'm confused how it can be yellow although no other style added to it. And does anyone have a solid way to detect the compatibility of it in browsers? Thanks.

Answer 1

The problem with your routine is that Firefox can't use shorthand properties like background in that context.

Solution: use backgroundColor.

var $mark = $('<mark>');
$mark.appendTo('body');
var bg = $mark.css('backgroundColor');
if (/rgb\(255\, 255\, 0\)/.test(bg)) return true;
else return false;

This will work in Firefox and Chrome.

See JSFiddle.

Note, however, that <mark> is not formally defined as having a yellow background colour. The fact that all browsers currently display it like that, doesn't mean that it's guaranteed to keep working in the future.