Phát hiện khả năng tương thích của thẻ mới Html5 <mark>

Question

Làm thế nào tôi có thể phát hiện khả năng tương thích của thẻ mới .I'm sử dụng một phương pháp như thế này (với jQuery):

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

Nhưng vấn đề là nó trả về false trong firefox hàng đêm, thậm chí nó được hỗ trợ. Tôi kiểm tra phần tử đánh dấu, thấy rằng các trình duyệt khác (chrome, safari) sẽ tự động thêm kiểu cho thẻ này bao gồm màu nền và màu.

Thật không may firefox chưa thêm phong cách cho thẻ mà chrome và safari làm. Nhưng thẻ cũng có nền màu vàng.

Vì vậy, tôi đang bối rối như thế nào nó có thể có màu vàng mặc dù không có phong cách khác thêm vào nó. Và có ai có một cách chắc chắn để phát hiện tính tương thích của nó trong các trình duyệt không? Cảm ơn.

Answer 1

Vấn đề với thói quen của bạn là Firefox không thể sử dụng các thuộc tính viết tắt như background trong ngữ cảnh đó.

Giải pháp: sử dụng backgroundColor.

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

Điều này sẽ hoạt động trong Firefox và Chrome.

Xem JSFiddle.

Lưu ý, tuy nhiên, <mark> không được định nghĩa chính thức là có màu nền màu vàng. Thực tế là tất cả các trình duyệt hiện đang hiển thị nó như vậy, không có nghĩa là nó được đảm bảo tiếp tục hoạt động trong tương lai.