Menu
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?
785
The <blink> tag is no longer supported and does not work in any of the new browser versions. A combination of CSS and JavaScript must be used instead to attain this effect.
The <blink> HTML element is a non-standard element which causes the enclosed text to flash slowly. Warning: Do not use this element as it is obsolete and is bad design practice.
The HTML <blink> tag is used to create a blinking text that flashes slowly.
The HTML blink tag is a non-standard element of HTML that helps to flash or gently blink a text or set of text in a web browser; as you all might know, Blink means turning on and off any light in a regular pattern or within a fixed time interval.
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...
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>
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]
95
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
