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?
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?
-
2
Good question, however I didn't think someone used that element. W3's own wiki states
No, really, don't use it. It's simply evil.. May I ask what you want to use it for? – Christofer Eliasson Commented Apr 20, 2012 at 15:21 - 5 You could just override the behaviour anyway, and replace the element with span, keeping the same content. – Ben Parsons Commented Apr 20, 2012 at 15:26
- 9 @ChristoferEliasson Mostly for the purpose of geocities-esque nostalgia. – Peter Olson Commented Apr 20, 2012 at 15:27
- 3 @MattHuggins Like this? – Peter Olson Commented Apr 20, 2012 at 16:19
- 1 @PeterOlson Here's an update that's not susceptible to integer overflow :P jsfiddle/vAMdH/3 – 000 Commented Apr 22, 2012 at 2:16
1 Answer
Reset to default 7I 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]