5 ways to hide page elements with CSS

There are many ways to hide page elements using CSS. You can set opacity to 0, visibility to hidden, display to none or position to absolute and then set the position to the invisible area.

Have you ever wondered why we have so many techniques to hide elements, but they all seem to achieve the same effect? Each method actually has some subtle differences from the others, and these differences determine which method is used in a specific situation. This tutorial will cover the small differences you need to keep in mind so you can choose which of the above methods to hide elements based on your situation.

Opacity

The opacity attribute means to set the transparency of an element. It is not designed to change the bounding box of an element. This means that setting opacity to 0 only visually hides the element. The element itself still occupies its own position and contributes to the layout of the web page. It will also respond to user interaction.

.hide {
opacity: 0;
}

If you plan to use the opacity attribute to hide elements in screen reading software, unfortunately, you cannot Unable to do so. The element and all its content will be read by screen readers, just like other elements on the web page. In other words, elements behave as if they were opaque.

I would also like to remind you that the opacity property can be used to achieve some great animations. Any element with an opacity attribute value less than 1 also creates a new stacking context.

When your mouse moves over the hidden 2nd block, the element state smoothly transitions from fully transparent to fully opaque. The block also has its cursor property set to pointer, which indicates that the user can interact with it.

Visibility

The second attribute to talk about is visibility. Setting its value to hidden will hide our element. Like the opacity attribute, hidden elements will still have an effect on our web page layout. The only difference from opacity is that it does not respond to any user interaction. Additionally, elements will be hidden in screen reading software.

This property can also achieve animation effects, as long as its initial and end states are different. This ensures that the transition animation between visibility state switches can be time-smooth (in fact, this can be used to use hidden to implement delayed display and hiding of elements - Translator's Note).

.hide {
visibility: hidden;
}

Note that if the visibility of an element is set to hidden and you want to display one of its descendant elements, just Just explicitly set the visibility of that element to visible (like .o-hide p in the example - translator's note). Try hovering only on the hidden element and not on the number in the p tag. You will find that your mouse cursor does not turn into a finger. At this time, when you click the mouse, your click event will not be triggered.

The

tag inside the

tag can still capture all mouse events. Once your mouse moves over the text,

itself becomes visible and the event registration takes effect.

Display

The display attribute truly hides the element according to the meaning of the word. Setting the display property to none ensures that the element is not visible and not even the box model is generated. Using this attribute, hidden elements do not occupy any space. Not only that, once display is set to none, any direct user interaction on the element will not be effective. In addition, screen reading software will not read the content of the element. This way the effect is as if the element doesn't exist at all.

Any descendant elements of this element will also be hidden at the same time. Adding a transition animation to this property has no effect; any switch between its different state values ​​will always take effect immediately.

However, please note that this element can still be accessed through the DOM. So you can manipulate it through the DOM just like any other element.

.hide {
display: none;
}

You will see that there is a

element inside the second block element. Its own display property is set to block, but it is still invisible. This is another difference between visibility:hidden and display:none. In the previous example, explicitly setting the visibility of any descendant element to visible can make it visible, but display does not do this. No matter what its own display value is, as long as the ancestor element's display is none, they will all be visible. Invisible.

Now, move your mouse over the first block element a few times and click on it. This operation will reveal a second block element whose number will be a number greater than 0. This is because even if an element is set to be hidden from the user, it can still be manipulated via JavaScript.

Position

Suppose there is an element that you want to interact with, but you don’t want it to affect the layout of your web page. There are no suitable attributes to handle this situation (opacity and visibility affect the layout, display does not affect the layout but cannot directly Interaction - translator's note). In this case, you can only consider moving the element out of the visible area. This method does not affect the layout and keeps the elements operable. Here is the CSS using this approach:

.hide {
position: absolute;
top: -9999px;
left: -9999px;
}

The main principle of this method is to set the top and left of the element to a large enough negative number to make it invisible on the screen. One benefit (or potential drawback) of using this technique is that the content of elements it hides can be read by screen-reading software. This is completely understandable, since you are simply moving the element outside of the visible area so that the user cannot see it.

You should avoid using this method to hide any focusable element, because doing so will cause an unpredictable focus switch when the user gives that element focus. This method is often used when creating custom checkboxes and radio buttons. (Use DOM to simulate checkboxes and radio buttons, but use this method to hide the real checkbox and radio elements to "receive" the focus switch - Translator's Note)

Clip-path

Another way to hide elements is by clipping them. Previously, this could be achieved via the clip property, but this property has been deprecated in favor of a better property called clip-path. Read Nitish Kumar's recent SitePoint article "Introducing the clicp-path attribute" to learn more advanced uses of this attribute.

Remember, the clip-path property is not yet fully supported in IE or Edge. If you want to use external SVG files in your clip-path, browser support is even lower. The code to hide an element using the clip-path attribute looks like this:

.hide {
clip-path: polygon(0px 0px,0px ​​0px,0px ​​0px,0px ​​0px);
}

If you hover the mouse over the first element, it can still affect the second element, even though the second element is hidden via clip-path. If you click on it, it will remove the hidden class and make our element visible from that position. Text in hidden elements can still be read by screen reading software. Many WordPress sites use clip-path or the previous clip to implement text specifically provided for screen reading software.

Although our element itself is no longer visible, it still occupies the size of the rectangle it should occupy, and the elements around it behave as if it were visible. Remember that user interactions such as mouseovers or clicks will not take effect outside the clipping area. In our case, the clipping area size is zero, which means the user will not be able to interact directly with the hidden element. Additionally, this property enables the use of various transition animations to achieve different effects.

Conclusion

In this tutorial, we looked at 5 different ways to hide elements with CSS. Each method is a little different from the others. Knowing what you want to achieve will help you decide which attribute to use, and over time you'll be able to instinctively choose the best approach based on your actual needs.

The above is the detailed content of 5 ways to hide page elements with CSS. For more information, please follow other related articles on the PHP Chinese website!