5 ways to hide page elements with CSS

There are many ways to hide page elements in CSS. You can set opacity to 0, set visibility to hidden, set display to none, or set position to absolute and then set the location to a non-visible area.

Have you ever wondered why we have so many techniques to hide elements that they all seem to achieve the same effect? Each approach is actually slightly different from other methods, which determine which method to use in a particular situation. This tutorial will cover the small differences that you need to keep in mind, so that you can choose the methods that are appropriate to hide the elements according to different situations.

Opacity

The Opacity property means setting the transparency of an element. It is not designed to change the bounding box of an element (bounding box). This means that setting opacity to 0 can only visually hide elements. The element itself still occupies its place and works on the layout of the page. It will also respond to user interaction.

. hide {  opacity:0;}

If you intend to use the Opacity property to hide elements in the read-screen software, unfortunately, you will not be able to do so. The element and all its contents are read by the Read screen software, just like other elements on the page. In other words, the behavior of elements is the same as when they are opaque.

I would also like to remind you that the Opacity property can be used to implement some great animations. Any element with a opacity property value less than 1 will also create a new stacking context (stacking context).

Look at the following example:

See @SitePoint provides examples of "hiding elements with opacity"

codepen.io/sitepoint/pen/bedzrr/

When your mouse moves to the hidden 2nd chunk, the element state transitions smoothly from completely transparent to completely opaque. The chunk also sets the cursor property to pointer, which indicates that the user can interact with it.

Visibility

The second attribute to be said is visibility. Setting its value to hidden will hide our elements. As with the Opacity property, the hidden elements will still work for our page layout. The only difference with opacity is that it does not respond to any user interaction. In addition, the elements are hidden in the read-screen software.

This property can also be animated, as long as its initial and end states are not the same. This ensures that transition animations between visibility state transitions can be time-smoothed (in fact, this can be used to implement delay display and concealment of elements with hidden-the translator's note).

. hide {   Visibility:hidden;}

The following example shows how visibility differs from opacity:

See @SitePoint provides examples of "hiding elements with visibility"

codepen.io/sitepoint/pen/pbjypv/

Note that if the visibility of an element is set to hidden and you want to display one of its descendants, simply set the visibility of that element explicitly to visible (as in the example. O-hide p--Translator Note). Try just hover on the hidden element, don't hover the number in the P tag, and you'll notice that your mouse cursor doesn't look like a finger. At this point, when you click the mouse, your click event will not be triggered.

The <p> tag inside the <p> tag still captures all mouse events. Once your mouse moves to the text, the,<p> itself becomes visible and the event registration takes effect.

Display

The display property actually hides the element according to its meaning. Set the Display property to none to ensure that the element is not visible and that the box model is not generated. With this attribute, the hidden element does not occupy any space. Not only that, once display is set to none, any direct user interaction with that element will not work. In addition, the read-screen software does not read the content of the element. The effect in this way is as if the element does not exist at all.

Any descendant elements of this element will also be hidden at the same time. Adding a transition animation to this property is not valid, and switching between any of its different state values will always take effect immediately.

Note, however, that this element can still be accessed through the DOM. So you can manipulate it through the DOM, just like the other elements.

. hide {   display:none;}

Look at the following example:

@SitePoint provides examples of "hide elements with display"

codepen.io/sitepoint/pen/zbgbjb/

You will see a <p> element in the second block element whose own display property is set to block, but it is still not visible. This is another difference between Visibility:hidden and Display:none. In the previous example, the explicit setting of any descendant element visibility to visible can be seen, but display does not eat this set, regardless of its display value, as long as the ancestor element display is none, they are not visible.

Now, move the mouse over the first block element a few times, then click on it. This action will cause the second block element to appear, where the number will be a number greater than 0. This is because, even if the element is set to be hidden from the user, it can be manipulated through JavaScript.

Position

Suppose there is an element you want to interact with, but you do not want it to affect your page layout, there is no suitable property to handle the situation (opacity and visibility affect the layout, display does not affect the layout but does not interact directly--the translator notes). In this case, you can only consider moving the element out of the viewable area. This approach does not affect the layout, and it allows elements to remain operational. The following is a CSS that uses this approach:

. hide {   position:absolute;   Top: -9999px;   Left: -9999px;}

The following example illustrates how to hide an element with absolute positioning and make it the same as the previous example:

See @SitePoint provides examples of "hiding elements with position properties"

codepen.io/sitepoint/pen/qebozm/

The main principle of this approach is to make it invisible on the screen by setting the top and left of the element to a negative number large enough. One advantage of using this technique (or potential disadvantage) is that the content of the elements that are hidden with it can be read by the read-screen software. This is completely understandable because you simply move the element outside the viewable area so that the user cannot see it.

You have to avoid using this method to hide any element that can get focus, because if you do, it causes an unpredictable focus switch when the user gets the focus of that element. This method is often used when creating custom check boxes 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" focus switching--the translator's note)

Clip-path

Another way to hide elements is by trimming them. Previously, this could be done through the Clip property, but this property was deprecated and replaced by a better property called Clip-path. Nitish Kumar recently published the article "Introducing Clicp-path Properties" in SitePoint, which allows you to read more advanced uses of this property.

Remember, the Clip-path attribute is not fully supported under IE or Edge. If you want to use an external SVG file in your Clip-path, your browser will be less supportive. The code that uses the Clip-path property to hide an element looks like this:

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

Here is an example that actually uses it:

See @SitePoint provides examples of "hiding elements with Clip-path properties"

http://codepen.io/SitePoint/pen/YWXgdW/

If you hover the mouse over the first element, it can still affect the second element, although the second element has been hidden through Clip-path. If you click on it, it will remove the class that is used to hide it and let our elements appear from that location. The text in the hidden element can still be read by the read-screen software, and many WordPress sites use Clip-path or the previous clip to implement the text that is specifically provided for the read-screen software.

Although our element no longer shows itself, it still occupies the size of the rectangle that it was supposed to occupy, and the elements around it behave as if it were visible. Remember that user interactions such as mouse hover or click outside of the clipping area are not valid. In our example, the clipping area size is zero, which means that the user will not be able to interact directly with the hidden elements. In addition, this property can use various transition animations to achieve different effects.

Conclusion

In this tutorial, we looked at 5 different ways to hide elements through CSS. Each method is a little different from the others. Knowing what you want to accomplish will help you decide which attribute to use, and over time, you can instinctively choose the best way according to your actual needs. If you have any questions about these methods of hiding elements, please leave a comment in the comments.