Use CSS to hide elements in different scenarios

There are many ways to make an element invisible using CSS, such as clipping, positioning offscreen, changing brightness, etc. Although they are invisible to the naked eye, there are differences in many dimensions behind them.

Element is invisible, does not take up space, is inaccessible to assistive devices, does not render

Use script tags to hide. E.g:

<script type="text/html">
    <img src="1.jpg">
</script>

At this point, the picture 1.jpg will not be requested. <script>Tags do not support nesting, so if you want to put other template content inside the <script>tag that doesn't render, you can try using the <textarea>element. E.g:

<script type="text/html">
    <img src="1.jpg">
    <textarea style="display: none;">
        <img src="2.jpg">
    </textarea>
</script>

Also 2.jpg will not be requested.
Also, <script>tabs to hide content get used script.innerHTML, <textarea>used textarea.value.

The element is invisible, does not occupy space, and cannot be accessed by auxiliary devices, but the resource is loaded and the DOM is accessible

Use display: nonehide . E.g:

.dn {
    display: none;
}

The element is invisible, does not occupy space, and cannot be accessed by auxiliary equipment, but can have a transitionfade

Use position: absoluteand visibility: hidden;hide. E.g:

.hidden {
    position: absolute;
    visibility: hidden;
}

Element is invisible, cannot be clicked, cannot be accessed by assistive devices, but occupies space

Use visibility: hidden;hide . E.g:

.hn {
    visibility: hidden;
}

Element is invisible, cannot be clicked, does not take up space, but is keyboard accessible

Use clipcrop or relativehide. E.g:

.clip {
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

.out {
    position: relative;
    left: -999em;
}

Element is invisible and cannot be clicked, but takes up space and is keyboard accessible

Use relativeand z-indexhide. For example, if the conditions allow, that is, there is a parent element with a background color set between it and the stacking context, you can also use a more friendly z-indexnegative value hide. E.g:

.lower {
    position: relative;
    z-index: -1;
}

Elements are invisible, clickable, and take up no space

Use transparency to hide. E.g:

.lower {
    position: relative;
    opacity: 0;
    filter: Alpha(opacity=0);
}

Elements are invisible, clickable, selectable, take up space

Use transparency to hide. E.g:

.lower {
    opacity: 0;
    filter: Alpha(opacity=0);
}

You can choose the appropriate hiding method through the actual hiding scene.

The actual development scenario is ever-changing, and there may be more hidden methods. You are also welcome to leave a message for discussion.

Excerpted from: CSS World Chapter 10 Showing and Hiding Elements