Alternative for <blink> tag
In this article we will learn about the alternatives of the blink tag of HTML. The blink tag doesn’t have any alternative HTML tag but the same effect can be alternatively created with the help of CSS
Example:
In this example we will be using CSS animations to get the blink-effect
html
<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>w3wiki</title> <style type="text/css"> /* Minor Styling optional */ .blinky{ margin: auto; width: 200px; height: 200px; background: cyan; text-align: center; font-size: 24px; /* for support in Safari 4.0 - 8.0 */ -webkit-animation: 1.5s linear infinite blinky-effect; animation: 1.5s linear infinite blinky-effect; } /* for support in Safari 4.0 - 8.0 */ @-webkit-keyframes blinky-effect { 0% { visibility: hidden; } 50% { visibility: hidden; } 100% { visibility: visible; } } @keyframes blinky-effect { 0% { visibility: hidden; } 50% { visibility: hidden; } 100% { visibility: visible; } } </style> </head> <body> <div class="blinky"> This div is going to blink </div> </body></html> |
Output:
Blink-Effect using CSS animations.
Advantages of the CSS approach over the blink tag
| The blink tag approach | The CSS animations approach |
|---|---|
| Not supported by most browsers. | Supported by all modern browsers. |
| Bad design practice. | Standard design practice. |
| Not flexible. | Completely flexible and can be customized as per requirements. |
| Reduces the accessibility of the website | No Effect on accessibility if used correctly |
In general the blink tag should not be used as it is a obsolete feature and can be removed in further updates. In order to learn more about CSS animations refer this article: CSS Animations