Blink element

From Wikipedia, the free encyclopedia
Jump to: navigation, search

The blink element is a non-standard presentational HTML element that indicates to a user agent (generally a web browser) that the page author intends the content of the element to blink (that is, alternate between being visible and invisible). The element was introduced in Netscape Navigator but is no longer supported by any modern Web browser; some, such as Internet Explorer, never supported the element at all.

Despite its initial popularity among home users in the 1990s, it has since fallen out of favor due to its overuse and the difficulty it presents in reading. The tag achieved notoriety for being user-unfriendly in the opinion of many designers.[citation needed] Lou Montulli, often credited as the inventor of the blink element, has said that he considers "the blink tag to be the worst thing I've ever done for the Internet", although he claims he only suggested the idea, without writing any actual code.[1]

... At some point in the evening I mentioned that it was sad that Lynx was not going to be able to display many of the HTML extensions that we were proposing, I also pointed out that the only text style that Lynx could exploit given its environment was blinking text. We had a pretty good laugh at the thought of blinking text, and talked about blinking this and that and how absurd the whole thing would be. [...] Saturday morning rolled around and I headed into the office only to find what else but, blinking text. It was on the screen blinking in all its glory, and in the browser. How could this be, you might ask? It turns out that one of the engineers liked my idea so much that he left the bar sometime past midnight, returned to the office and implemented the blink tag overnight. He was still there in the morning and quite proud of it.[1]

A sample of blinking text.

<blink>A sample of blinking text.</blink>
Note that this example utilizes the standardized CSS3 text-decoration:blink property, which was intended to replace the <blink> element, but does not work on all browsers.

Usage[edit]

The blink element is non-standard, and as such there is no authoritative specification of its syntax or semantics. While Bert Bos of the World Wide Web Consortium has produced a Document Type Definition that includes syntax for the blink element (defining it as a phrase element on a par with elements for emphasis and citations), the comments in the DTD explain that it is intended as a joke.[2]

Syntax of the blink element type is identical to such standard HTML inline elements as span. For example: <blink>This text could blink</blink>. The rate of blinking is browser-specific. In Mozilla Firefox the text alternates between being visible for three quarters of a second and being invisible for one quarter of a second.[3]

The blink element type was first invented for Netscape Navigator and was supported in its descendants, such as Mozilla Firefox (except for the Netscape 6 and early Mozilla suite browsers); it has been removed in version 23.[4][5] Microsoft's Internet Explorer and Apple's Safari/WebKit never supported it, even in its CSS incarnation. It was also supported by the Opera Internet Browser, but support ended in version 15 when that browser switched to a WebKit-based engine.

Implementation[edit]

The blink value of the CSS text-decoration property allows authors to suggest that text should blink without using proprietary tags, but the CSS 2.1 Specification states that "conforming user agents may simply not blink the text" in order to comply with the User Agent Accessibility Guidelines.[6]

<span style="text-decoration: blink;">Text to blink here</span>

Similar effects can also be achieved through the use of JavaScript.

<script type="text/javascript">
  function blink() {
    var blinks = document.getElementsByTagName('blink');
    for (var i = blinks.length - 1; i >= 0; i--) {
      var s = blinks[i];
      s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
    }
    window.setTimeout(blink, 1000);
  }
  if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
  else if (window.addEventListener) window.addEventListener("load", blink, false);
  else if (window.attachEvent) window.attachEvent("onload", blink);
  else window.onload = blink;
</script>
<blink>Text to blink here</blink>

Or alternatively, the blink functionality can be implemented simply by adding one line of source code with the help of jQuery. This will work on most browsers.

<script type="text/javascript">
  setInterval(function(){ $('blink').each( function(){ $(this).css('visibility' , $(this).css('visibility') === 'hidden' ? '' : 'hidden') } ); }, 250);
</script>
<blink>Text to blink here</blink>

Usability and accessibility[edit]

A 1982 Apple Computer manual for developers warned that "Flashing [text] should only be used to indicate imminent destruction of data or the program".[7] The blink element has been consistently criticised by usability and accessibility experts. In 1996 Jakob Nielsen described the element as "simply evil" in his Alertbox column Top Ten Mistakes in Web Design.[8] The World Wide Web Consortium's Web Content Accessibility Guidelines (WCAG) 1.0 state that content authors should avoid causing the screen to flicker or blink, noting that such effects can cause problems for people with cognitive disabilities or photosensitive epilepsy.[9]

The United States Federal Government's Section 508 states that pages should avoid causing the screen to flicker with a frequency between 2 Hz and 55 Hz, a range that covers rapidly blinking text.[10]

The German Federal Government's Barrierefreie Informationstechnik-Verordnung (Barrier-free Information Technology Ordinance) also states that flickering or blinking content should be avoided.[11]

To comply with the User Agent Accessibility Guidelines a user agent must either "allow configuration to render animated or blinking text content as motionless, unblinking text" or never blink text.[12] Mozilla Firefox satisfied this requirement by providing a hidden configuration option to disable blinking,[3] browser.blink_allowed, which could be accessed through about:config. The blinking feature has been disabled altogether since version 23.[4]

See also[edit]

References[edit]

  1. ^ a b "The Origins of the <blink> Tag". www.montulli.org. Retrieved 2009-10-23. 
  2. ^ Bos, Bert. "HTML40, but with BLINK added". World Wide Web Consortium. Retrieved 2006-12-12. 
  3. ^ a b "VPAT for Firefox 3.0 and 3.5". Mozilla. Retrieved 2009-10-23. 
  4. ^ a b "Firefox 23 Release Notes". 2013-08-06. Retrieved 2013-08-08. 
  5. ^ <blink> - HTML | MDN
  6. ^ "Cascading Style Sheets, level 1". Cascading Style Sheets Working Group, World Wide Web Consortium. Retrieved 2009-10-23. 
  7. ^ Meyers, Joe; Tognazzini, Bruce (1982). Apple IIe Design Guidelines. Apple Computer. p. 38. 
  8. ^ "Original Top Ten Mistakes in Web Design (Alertbox)". Useit.com. Retrieved 2009-10-23. 
  9. ^ Chisholm, Wendy; Vanderheiden, Gregg; Jacobs, Ian (5 May 1999). "Web Content Accessibility Guidelines 1.0". World Wide Web Consortium. Retrieved 20 July 2010. 
  10. ^ Government Services Administration. "Section 508: Section 508 Standards". Section508.gov. Retrieved 2009-10-23. 
  11. ^ "BITV — Einzelnorm". gesetze-im-internet.de. 2011-09-12. Retrieved 2014-03-03. 
  12. ^ "2. The user agent accessibility guidelines". W3.org. 2002-12-17. Retrieved 2009-10-23. 

External links[edit]