Summary of several methods of CSS hiding page elements

There are many ways to hide page elements in CSS. You can opacity set to, 0 visibility set to hidden , set to, or set to then set the display none position absolute 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. We only need to remember the small differences, depending on the circumstances of the above methods to choose the appropriate method to hide the elements.

Display

displayAttributes actually hide elements according to their meanings. displayset the property to none 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 set to none any of the elements directly hitting the user interaction is not possible to take effect. 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.

{   display: none;}

Look at the following example:

@SitePoint provides examples of "hide elements with display"

You will see an element within the second block element <p> whose own display property is set block , but it is still not visible. This is visibility:hidden display:none another difference. In the previous example, explicitly set any descendant element to visibility visible make it visible, but display do not eat this set, regardless of its own display value, as long as the ancestor elements display are 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.

Visibility

The second property to say is visibility . Set its value to hidden hide our elements. As with opacity attributes, the hidden elements still work for our page layout . The opacity only difference 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).

{   visibility: hidden;}

The following example shows visibility how it opacity differs from:

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

Note that if an element is visibility set to hidden , and you want to display, a descendant element of it, simply set the element's visibility explicit 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.

<div>tags inside the tag <p> can still capture all mouse events. Once your mouse moves to the text, it <div> becomes visible and the event registration takes effect.

Opacity

opacityProperty 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.

{  opacity: 0;}

If you intend to use opacity attributes 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 opacity properties can be used to implement some great animations. Any opacity element with a 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"

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

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:

{   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"

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. In the past, this can be done through clip attributes, but this property is deprecated and replaced with a better property called clip-path . Nitish Kumar recently published the article "Introduction clicp-path Properties" in SitePoint, and read it to learn more about the advanced usage of this property.

Remember, clip-path attributes are not fully supported under IE or Edge. If you want to clip-path use an external SVG file in your, the browser will have a lower level of support. clip-paththe code that uses attributes to hide elements looks like this:

{  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"

If you hover over the first element, it can still affect the second element, even though the second element has been hidden by clip-path the other. 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 before clip to implement the text that is specially provided for the reading 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.

Transferred from: http://www.zcfy.cc/article/457

Summary of several methods of CSS hiding page elements