更新

Question

HTML <blink>标记，在支持它的浏览器（即Mozilla Firefox和Opera）中，使其内容闪烁，类似慢速闪光灯的效果。

我正在为非标准HTML编写一套polyfill，包括blink标记。闪烁行为的实现非常简单

(function blink(n) {
    var blinks = document.getElementsByTagName("blink"),
        visibility = n % 2 === 0 ? "visible" : "hidden";
    for (var i = 0; i < blinks.length; i++) {
        blinks[i].style.visibility = visibility;
    }
    setTimeout(function() {
        blink(n + 1);
    }, 500);
})(0);

（你可以see this in action）

但是这不会检测浏览器是否已经支持blink标记，并且在已经支持它的浏览器中，会出现双重闪烁效果。我需要一些功能检测来确定浏览器是否支持闪烁，如果没有，则它会回到我的Javascript polyfill上。

我不想进行浏览器检测，因为该解决方案不具备可扩展性，并且由于人们可以在Firefox首选项中禁用blink行为，因此该解决方案无效。

有没有办法检测对blink元素的支持？

Answer 1

我刚刚对此事进行了一些研究，我认为我可能会找到答案......

我确定你知道CSS属性支持检测？好吧，有一个text-decoration: blink CSS属性。因此，如果浏览器支持<blink>，它也必须支持CSS属性！

这是正常的CSS属性检测，即支持检测textDecoration执行此操作：

if (document.createElement("detect").style.textDecoration === "") {  
    // textDecoration supported
}

也许你可以尝试这样的事情：

if (document.createElement("detect").style.textDecoration === "blink") {  
    // textDecoration: blink supported ?
}

或沿着这些方向......

更新

我有4个浏览器＆amp;所以用4个浏览器进行测试。在这4个中，只有FireFox支持闪烁标记。 <blink>在HTML文档中注册为FF中的“Span”元素，但在其他3个浏览器中，它被注册为unknown元素。

<html>

<head>
<script type="text/javascript">
function investigate() {
    var blinker = document.getElementsByTagName("blink")[0];
    document.getElementById("monitor").innerHTML += blinker;
}
</script>
</head>

<body onload="investigate()">
<blink>Hello, blink!</blink>
<div id="monitor"> </div>
</body>

</html>

输出

Internet Explorer [7,8,9] 不支持

你好，眨眼！
[对象]

Chrome [18] 不支持

你好，眨眼！
[object HTMLUnknownElement]

Safari [5] 不支持

你好，眨眼！
[对象HTMLElement]

FireFox [3.6] 支持

你好，眨眼！
[object HTMLSpanElement]

如何检测浏览器是否支持blink标签？

1 个答案:

更新

输出