There are multiple ways of hiding an element in CSS. You can hide it by setting opacity to 0, visibility to hidden, display to none or by setting extreme values for absolute positioning.
Have you ever wondered why we have so many techniques of hiding an element when they all seem to do the same thing? All of these methods actually differ slightly from each other and this difference dictates which one of them is to be used in a specific situation. This tutorial will cover the minor differences that you need to keep in mind when hiding an element using any of the methods above.
Opacity
The property opacity is meant to set an element’s transparency. It was not designed to alter the bounding box of the element in any way. This means that setting the opacity to zero only hides the element visually. The element still occupies its position and affects the layout of the web page. It will also respond to user interaction as well.
.hide {
opacity: 0;
}
复制代码
If you intend to use the opacity property to hide the element from screen readers — unfortunately this is not possible. The element and all its content will be read by screen readers, just like all the other elements on the web page. In other words, the element behaves just the way it would have had it been opaque.
I should also mention that the opacity property can be animated and used to create some splendid effects. Any element with opacity less than 1 will also create a new stacking context.
Take a look at the following demo:
When you hover over the hidden second block, the element transitions smoothly from the state of complete transparency to being fully opaque. The block also has a cursor of pointer to show that it can be interacted with.
Visibility
The next property on our list is visibility. Setting it to hidden will hide our element. Just like the opacity property, the hidden element will still affect the layout of our web page. The only difference is that this time it will not capture any user interaction when hidden from the user. Additionally, the element will also be hidden from screen readers.
This property is also able to animate as long as the initial and final states have different values. This ensures that the transition between the states of visibility can be smooth instead of being abrupt.
.hide {
visibility: hidden;
}
复制代码
This demo shows how visibility is different from opacity:
Notice that the descendants of an element with visibility set to hidden can still be visible if their visibility property is explicitly set to visible. Try to hover just over the hidden element and not on the paragraph inside, you will see that your cursor does not change to a pointer. Moreover, if you try to click on the element, your clicks won’t be registered either.
The
tag inside our will still capture all the mouse events though. As soon as you hover over the text, the itself becomes visible and starts registering events.
Display
The display property hides the element in the true sense of the word. Setting display to none makes sure that the box-model is not generated at all. Using this property, there is no empty space left behind when the element has been hidden. Not only that, but any direct user interaction won’t be possible as long as display is set to none. Moreover, screen readers won’t read the element’s content either. It is as if the element does not exist.
All the descendants of our element will be hidden as well. This property cannot be animated so the transition between various states is always going to be abrupt.
Please note, the element is still accessible through the DOM. You will be able to manipulate it just like with any other element.
.hide {
display: none;
}
复制代码
Take a look at the CSS of this demo:
You will see that second block has a paragraph with its display property set to block but the paragraph is still invisible. This is one more difference between visibility: hidden and display: none. In the first case, any descendant which explicitly sets visibility to visible will become visible but that is not what happens with display. All the descendants are kept hidden irrespective of the value of their own display property.
Now, hover a few times over the first block in the demo. Done hovering? Click on this first block. This should make the second block visible. The count inside should now be a number other than zero. This is because the element, even though hidden from users can still be manipulated with JavaScript.
Position
Suppose you have an element that you would like to interact with but you do not want it to affect the layout of your web page. No property up to this point can handle this situation properly. One thing that you can do in this situation is to move the element out of the viewport. This way it won’t affect the layout and will still be actionable. Here is the CSS to do that:
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
复制代码
The following demo illustrates how absolute positioning hides elements and works in much the same way as the previous demo:
The main idea here is to set the negative top and left values high enough that the element is no longer visible on screen. One benefit (or potential downside) of this technique is that the content of an absolutely positioned element can be read by screen readers. This is completely understandable because you have only moved the element out of the viewport so that users cannot see it.
You should avoid using this method to hide any elements which can receive focus because it results in an unexpected jump when the user focuses on that element. This method is frequently used to create custom checkboxes or radio buttons.
Clip-path
One more way of hiding elements is by clipping them. Previously, this could be done with the clip property but that has been deprecated in favor of a better property called clip-path. Nitish Kumar recently introduced the clip-path property here at SitePoint, so feel free to check that one out for more advanced usage of the property!
Keep in mind that the clip-path property as used below is not fully supported in IE or Edge yet. If using external SVG files for your clip-path, support is even more limited (that does not apply below). The clip-path property when used to hide an element looks like so:
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
复制代码
Here is a demo to show it in action:
If you hover over the first element, it will still be able to affect the second element even though it is hidden via clip-path. If you click the element, it will remove the hidden class to reveal our element that was there all along. This text is still readable by screen readers and is the solution used (alongside clip) in many WordPress sites for screen reader text.
Even though our element is no longer visible, the elements around it still behave as if it had its original rectangular dimensions. Keep in mind that user interactions like hover or click are not possible outside the clipped region either. In our case, this implies that users will not be able to interact with the hidden element directly. Moreover, this property is able to be animated in various ways to create new effects.
Conclusion
In this tutorial, we looked at five different methods of hiding elements with CSS. Each is different from each other in one way or another. Knowing what you want to achieve can help you decide which property to use and becomes second nature to web developers over time. If you have any questions regarding the methods for hiding elements, please let us know in the comments.
635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
