This is the 29th day of my participation in the August More Text Challenge

In reading CSS Secret, section 44, “Flicker Effects,” the author says:

The

tag has become a cultural signature of the industry, witnessing the slash-and-burn era…. This tag has been criticized in part because it violates the separation of structure and style rules….

There are two key takeaways from this passage:

  1. In the old days of slash-and-burn industry, some of the content is outdated, for exampleblinkThe label;
  2. One rule: Separate structure from style.

Well, although we are modern front-end technology personnel, “ancient” history is still to understand.

<blink>The label

We checked the record of

in THE MDN document:

Deprecated: This feature has been removed from the Web standards, and while some browsers still support it, it may be discontinued at some point in the future, so try not to use it.

Warning: Do not use this element, it is deprecated. Blinking fonts do not meet accessibility standards, and the CSS specification allows browsers to ignore blinking values.

This element is not supported, so the HTMLUnknownElement interface is implemented.

And gives an approximate animation of what it would look like if it were valid, as shown below:

How can a computer say OK without trying? Let’s try blink with the following code:

<! DOCTYPEhtml>
<title>Text flicker effect CSS implementation</title>
<body>
    <blink>Blink implementation</blink>
</body>
</html>
Copy the code

Here’s what it looks like (here’s a multi-frame GIF) :

Other implementations of flickering

Since

doesn’t work, is there another way to do it?

visibility

We take a closer look at the flashing style effect, which can be achieved by periodically setting the DOM’s visibility to Visible and hidden:

<! DOCTYPEhtml>
<title>Text flicker effect CSS implementation</title>
<body>
    <div id="blink">Blink implementation</div>
</body>
<script>
    window.onload = function() {
        document.getElementById("blink").style.visibility ='hidden';
        setInterval(change, 100);
    }
    var visibility = true;
    function change() {
        document.getElementById("blink").style.visibility = visibility ? 'visible' : 'hidden'; visibility = ! visibility; }</script>
<style>
    #blink {
        visibility: visible;
    }
</style>
</html>
Copy the code

The effect is as follows:

The CSS method is done by making the color transparent (this is also the way in the CSS Secret book)

<style>
    .blink {
        animation: blink 1s infinite steps(1);
    }
    @keyframes blink {
        50% {
            color: transparent;
        }
    }
</style>
Copy the code