How can I detect if a browser supports the blink tag?

dom, html, javascript

Solution

I just did a little research on the matter and I think I may found an answer...

I'm sure you're aware of CSS property support detection? Well, there is a `text-decoration: blink` CSS property. So if the browser supports `<blink>` it must support the CSS property too!

This is normal CSS property detection i.e. to detect `textDecoration` is supported do this:

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

Perhaps you could try something like this:

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

or along those lines...

Update

I have 4 browsers & so tested this with 4 browsers. Out of those 4 only FireFox supports the blink tag. `<blink>` is registered in the HTML document as a "Span" element in FF, but in the other 3 browsers it is registered as an `unknown` element.

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

Output

Internet Explorer [7,8,9] not supported

Hello, blink! [object]

Chrome [18] not supported

Hello, blink! [object HTMLUnknownElement]

Safari [5] not supported

Hello, blink! [object HTMLElement]

FireFox [3.6] supported

Hello, blink! [object HTMLSpanElement]

Problem

The HTML `<blink>` tag, in browsers that support it (i.e. Mozilla Firefox and Opera), makes its content blink on and off, resembling the effect of a slow strobe light. I am writing a suite of polyfills for non-standard HTML, including the `blink` tag. The implementation of blinking behavior is pretty simple ``` (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); ``` (You can see this in action) But this does not detect if the browser already supports the `blink` tag, and in browsers that already support it, there will be a double-blinking effect. I need some feature detection that determines if the browser supports blink, and if it doesn't then it falls back on my Javascript polyfill. I do not want to do browser detection, because that solution is not scalable, and since people can disable `blink` behavior in their Firefox preferences, that solution is not effective. Is there a way to detect support for the `blink` element?

Original source