Editing Blink element (section)

== Implementation ==
The ''blink'' value of the [[Cascading Style Sheets|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''.<ref>{{cite web |title=Underlining, overlining, striking, and blinking: the 'text-decoration' property |url=https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#lining-striking-props |url-status=live |archive-url=https://web.archive.org/web/20230511002456/https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html |archive-date=2023-05-11 |access-date=2023-07-24 |website=Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification |publisher=[[CSS Working Group]], [[World Wide Web Consortium]]}}</ref>
<!--
Example:

-->
<syntaxhighlight lang="html" line="1">
<span style="text-decoration: blink;">Down to the porshrop, down to the streep</span>
</syntaxhighlight>
This produces the following on the page — it is unlikely to actually blink due to modern browsers lacking support for the tag:
:<span style="text-decoration: blink;">Down to the porshrop, down to the streep</span>
The blink element may also be implemented using [[CSS animations]].
<syntaxhighlight lang="css" line="1">
@keyframes blink {
	0% { opacity:1 } 75% { opacity:1 } 76% { opacity:0 } 100% { opacity:0 }
}

blink, .blink-css {
	animation:blink 0.75s ease-in infinite alternate!important;
}
</syntaxhighlight>
When elements are then given the tag <code>blink</code> or class <code>blink-css</code>, such as:
<syntaxhighlight lang="html" line="1">
<span class="blink-css">Down to the porshrop, to the porshrop family treep</span>
</syntaxhighlight>
This produces the following:<!--
The following templatestyles imports [[Template:Blink/styles.css]] which is just the exact same thing whose source code is given above.
--><templatestyles src="Blink/styles.css" />
:<span class="blink-css">Down to the porshrop, to the porshrop family treep</span>
Similar effects can also be achieved through the use of [[JavaScript]].
<syntaxhighlight lang="html" line="1">
<script type="text/javascript">
  (function() {
    var blinks = document.getElementsByTagName('blink');
    var visibility = 'hidden';
    window.setInterval(function() {
      for (var i = blinks.length - 1; i >= 0; i--) {
        blinks[i].style.visibility = visibility;
      }
      visibility = (visibility === 'visible') ? 'hidden' : 'visible';
    }, 250);
  })();
</script>
<blink>Text to blink here</blink>
</syntaxhighlight>

Or alternatively, the ''blink'' functionality can be implemented with the help of [[jQuery]].
<syntaxhighlight lang="html" line="1">
<script type="text/javascript">
    setInterval(function(){
      $('blink').each(function() {
        $(this).toggle();
      });
    }, 250);
</script>
<blink>Text to blink here</blink>
</syntaxhighlight>