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

Question

The HTML <blink> tag, in browsers that support it (ie 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?

Answer 1

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

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

Question

1 answers

solution1
7 ACCPTED 2012-04-21 00:04:54

Update

Output

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

Question

1 answers

solution1 7 ACCPTED 2012-04-21 00:04:54

Update

Output

solution1
7 ACCPTED 2012-04-21 00:04:54