16

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);

（你可以看到这个在行动）

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

我不想进行浏览器检测，因为该解决方案不可扩展，而且由于人们可以blink在他们的 Firefox 偏好设置中禁用行为，因此该解决方案无效。

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

4

1 回答 1

7

我只是对此事做了一些研究，我想我可能会找到答案......

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

这是正常的 CSS 属性检测，即textDecoration支持检测：

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

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

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

或沿着那些路线......

更新

我有 4 个浏览器，所以用 4 个浏览器对此进行了测试。在这 4 个中，只有 FireFox 支持 blink 标签。<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]

你好，眨眼！
[对象 HTMLUnknownElement]

不支持Safari [5]

你好，眨眼！
[对象 HTMLElement]

支持火狐[3.6]

你好，眨眼！
[对象 HTMLSpanElement]

于 2012-04-21T00:04:54.840 回答