检测新Html5标记<mark>的兼容性

Question

如何检测新标记的兼容性.我正在使用这样的方法(使用jQuery):

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

但问题是它每晚都会在firefox中返回false,即使它受到支持.我检查了mark元素,发现其他浏览器(chrome,safari)会自动为这个标签添加一个样式,包括背景颜色和颜色.

不幸的是,Firefox并没有为标签添加样式和chrome和safari.但标签也有黄色背景.

所以我很困惑它是如何变黄的,虽然没有添加其他风格.有没有人有一个可靠的方法来检测它在浏览器中的兼容性？谢谢.

Answer 1

您的例程的问题是 Firefox 无法像background在该上下文中那样使用速记属性。

解决方案：使用backgroundColor.

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

这适用于 Firefox 和 Chrome。

请参阅JSFiddle。

但请注意，这<mark>并未正式定义为具有黄色背景颜色。当前所有浏览器都这样显示它的事实并不意味着它可以保证将来继续工作。