Hide page elements with CSS

There are many ways to hide page elements in CSS. You can put

1. Opacity set to 0
2. Set Visibility to hidden
3. Set Display to None
4. Set position to absolute and then set the location to a non-visible area.

  Opacity, occupy the page layout, can interact, read screen software can read itThe 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.

{  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 Visibility, occupy the Web page layout, can not interact, read screen software is not read 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 deferred display and shadowing of elements with hidden

{  visibility: hidden;}

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 <div> tag still captures all mouse events. Once your mouse moves to the text, <div> itself becomes visible and the event registration takes effect. display, do not occupy the layout of the page, can not be interactive, read screen software is not read

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.

{  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. Position, moving out of the layout, can interact, hidden elements can be read by the Read-screen softwareSuppose 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 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. Clip-path, occupy the layout, can not interact, can be read by the screen software, but IE or edge does not support

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:

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

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.

Hide page elements with CSS