Shulou(Shulou.com)06/01 Report--

This article mainly introduces CSS hidden page elements commonly used methods, has a certain reference value, interested friends can refer to, I hope you read this article after a lot of gains, the following let Xiaobian take you to understand.

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

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 can only hide elements visually. The element itself still takes its place and contributes to the layout of the page. It will also respond to user interaction.

.hide {

opacity: 0;

}

If you intend to use opacity to hide elements in screen-reading software, unfortunately you won't be able to do so. The element and all of its contents are read by screen-reading software, just like any other element on a web page. In other words, elements behave as if they were opaque.

Let me also remind you that opacity can be used to achieve some great animations. Any element with opacity less than 1 also creates a new stacking context.

Consider the following example:

See @SitePoint for example "Hide elements with opacity"

When you mouse over the hidden second block, the element smoothly transitions from fully transparent to fully opaque. The block also sets the cursor property to pointer, which means that users can interact with it.

Visibility

The second attribute to be mentioned is visibility. Setting its value to hidden will hide our element. Like the opacity attribute, hidden elements still contribute to our page layout. The only difference from opacity is that it does not respond to any user interaction. In addition, elements are hidden in screen-reading software.

This property can also be animated as long as its initial and final states are different. This ensures that the transition animation between visibility state transitions can be time-smooth.

.hide {

visibility: hidden;

}

The following example demonstrates how visibility differs from opacity:

See @SitePoint for example "Hide elements with visibility"

Note that if an element's visibility is set to hidden and you want to show one of its descendants, you can do so by explicitly setting that element's visibility to visible. Try hovering only over hidden elements, not numbers in the p tag, and you'll notice that your mouse cursor doesn't change to look like a finger. If you click the mouse, your click event will not be triggered.

And inside the label,

Tags can still capture all mouse events. Once you mouse over the text, it becomes visible and event registration takes effect.

Display

The display attribute actually hides the element according to its meaning. Setting the display property to none ensures that elements are invisible and that box models are not generated. With this attribute, hidden elements do not occupy any space. Moreover, once display is set to none, any direct user interaction with that element is impossible to take effect. In addition, screen-reading software will not read the content of the element. The effect of this approach is as if the element does not exist at all.

Any descendants of this element will also be hidden. Adding a transition animation to this attribute is invalid; any transition between its different state values always takes effect immediately.

Note, however, that this element is still accessible through the DOM. So you can manipulate it through DOM, just like any other element.

.hide {

display: none;

}

Consider the following example:

Example provided by @SitePoint "Hide elements with display"

You'll see that the second block element has a

Element, its own display property is set to block, but it remains invisible. Another difference between visibility:hidden and display:none. In the previous example, explicitly setting the visibility of any descendant element to visible makes it visible, but display doesn't buy into this, and no matter what its display value is, as long as the ancestor element's display is none, they are invisible.

Now, mouse over the first block element a few times and click it. This operation will cause the second block element to appear, and the number in it will be a number greater than 0. This is because elements can be manipulated through JavaScript even if they are hidden from the user in this way.

Position

Suppose there is an element you want to interact with, but you don't want it to affect your page layout. There are no proper attributes to handle this situation. In this case, you can only consider moving the element out of the visible area. This method does not affect the layout, but keeps the elements operational. Here is a CSS that uses this approach:

.hide {

position: absolute;

top: -9999px;

left: -9999px;

}

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

See @SitePoint for example "Hide elements with position attribute"

The main idea behind this approach is to make an element invisible on the screen by setting its top and left to sufficiently negative numbers. One advantage (or potential disadvantage) of using this technique is that the contents of the elements hidden by it can be read by screen-reading software. This is perfectly understandable because you simply move the element out of the viewable area so that the user cannot see it.

You should avoid using this method to hide any element that can gain focus, because doing so will cause an unpredictable focus switch when the user lets that element gain focus. This method is often used when creating custom checkboxes and radio buttons.

Clip-path

Another way to hide elements is by clipping them. Previously, this could have been done via the clip attribute, but this attribute was deprecated and replaced with a better attribute called clip-path. Nitish Kumar recently posted "Introduction to clicp-path attribute" in SitePoint for more advanced use of this attribute.

Keep in mind that the clip-path attribute 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 for hiding elements using the clip-path attribute looks like this:

.hide {

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

}

Here's an example of how it's actually used:

See @SitePoint for example "Hide elements with clip-path attribute"

If you hover over the first element, it can still affect the second element, even though the second element is hidden by clip-path. If you click on it, it will remove the hidden class and make our element appear from that position. Text in hidden elements can still be read by screen-reading software, and many WordPress sites use clip-paths or earlier clips to implement text specifically 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. Keep in mind that user interactions such as mouse hovering or clicking are unlikely to take effect outside the clipping area. In our example, the clipping area size is zero, which means that users will not be able to interact directly with hidden elements. In addition, this property can use various transition animations to achieve different effects.

Thank you for reading this article carefully. I hope that Xiaobian will share the article "What are the common methods of CSS hidden page elements?" This article is helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.