The blink tag

  1. Introduction
  2. Other Details
  3. Conclusion

Introduction:

The <blink> element is a non-standard HTML element first seen in Netscape Navigator (and later in its decendents like Firefox and Opera). It would be used when the author of the page wanted the surrounding text to "blink" in and out of view.

This would be implemented using simple inline HTML just like other formatting elements, as so:

<p><u><blink>Hello World!</blink></u></p>

This is a standard paragraph <p>, with <u> to underline the text and finally <blink> to blink the text. The resulting text would look like this (will not display if reduced motion settings are enabled in your browser):

Hello World!

Other Details:

Since this tag was non-standard, it was only ever supported by Firefox 1-22, Opera 2-15 and Netscape 1-6. Internet Explorer and Chrome never supported it and all web browsers after 2014 ignore the element.

Although it was initially popular, the usage of blink was reduced because it causes difficulty reading and poses accessibility issues.
Lou Montulli (links to Wikipedia) if often credited as its creator, although he claims he only suggested the idea and never wrote any code.

There is no official syntax since the element was non-standard. There is actually a W3C DTD for the blink element but a comment inside it explains that it's a joke.
The rate at which is blinks is up to the browser (or the computer's clock speed) and there is no attribute to change the blinking; It just acts as a span-like tag.
Some browsers would make the text invisible for half a second and visible for half a second while others would be visible for 3 quarters of a second and invisible for 1 quarter of a second.

Blinking was also supported outside a tag, by using the style="text-decoration: blink;" attribute on an inline span. This is part of CSS spec but removed with CSS3, additionally CSS 2.1 states conforming user agents may simply not blink the text in order to comply with accessibility standards.
Example: <span style="text-decoration: blink;">Hello World!</span>

The blinking done on this page was done using a CSS polyfill. We can use CSS3's animation rules to accurately recreate <blink>.
Below is the needed code to do so:


/*This sheet gives us a polyfill for <blink>, which never part of HTML spec and last seen in browsers around 2013 with Firefox 22.
It uses CSS3 animation, working up to Internet Explorer 10.*/
/*To use this, give text the <blink> tag or add the .blink class.*/
/*For acessibility reasons, it is NOT reccomended that you use this. I made it for fun.*/
blink, .blink {
	-webkit-animation: blink 1s step-end infinite;
	-moz-animation: blink 1s step-end infinite;
	-o-animation: blink 1s step-end infinite;
	animation: blink 1s step-end infinite;
}

@-webkit-keyframes blink {
	75% {opacity: 0}
}

@-moz-keyframes blink {
	75% {opacity: 0}
}

@-o-keyframes blink{
	75% {opacity: 0}
}

@keyframes blink {
	75% {opacity: 0}
}
/*For accessibility, disables blinking for users with motion sickness*/
@media only screen and (prefers-reduced-motion: reduce) {
	blink, .blink {
		-webkit-animation: none;
		-moz-animation: none;
		-o-animation: none;
		animation: none;
	}
}

Conclusion:

Download blink.css to use the Polyfill in your site!
Add <link rel="stylesheet" href="https://forkiesassds.github.io/twtacct/blink/blink.css"> to your <head> to use the Polyfill from this server!
(for acessibility reasons, I highly advise against using this. I made it just for fun.)

Page written by TheThunderGuyS (opens in new tab).
All research and facts from this Wikipedia article (opens in new tab).


Return home