Different ways to hide an HTML Element

There are different ways to hide an HTML element from the client, just hiding not removing.

<div> 
 <p>Line 1</p>
 <p class="hide">Line 2</p>
 <p>Line 3</p>
 <p>Line 4</p> 
</div>

We need to hide p.hide element, so the user can’t see it.

Display:

Display css property, display is the most important and most used css property to control HTML elements layout.

display:none; can be used to hide an HTML element from the view and it will appear as if it was not there on the page, means the HTML element will be hidden without blocking any space.

Example: Text 1 | Text 2 | Text 3

If we apply display:none; on Text 2, it will be: Text 1 | | Text 3

So to hide p.hide element using display property:

p.hide{
   display:none;
}

Visibility:

Visibility property is the CSS property to manage HTML visibility, unlike display which has different values to control the element layout, visibility is used jut for show and hide elements

visibility: hidden can be used to hide an element from the client, but it will keep the element space visible like this: Text 1 | | Text 3

When to use which? based on requirements and the case you have, you just need to test it on all browsers, and there will be an unrecognizable performance differences between different ways

Performance differences between visibility:hidden and display:none

Opacity:

Opacity property is controlling the transparency of the html element, so we can use it to make the element fully transparent and this will hide the element from the client view.

Just make sure to test it on all browsers because on older IE browsers it had some special ways to implement. (hope that no one still using old IE browsers, because the wont see many things any way :) )

And the same as Visibility property, it will hide the element but will keep blocking its space, so the client will see an empty space instead of the element.

Background color and color

While it is rarely used, but we can change the background-color element css property and all child elements to be the same as the background color of the page or the same as container background.

Will need to change the text color as well to make sure that text is not visible as well.

And on some elements we may need to remove borders, that’s why this way is not common to use.

Font size:

We can hide text elements by setting font-size property to 0

Position:

Using the position property and top left we can make the control appear outside the client view.

Clip-Path (Clip):

Last way I want to mention on this post is using clip-path css property

References:

Using CSS clip as an Accessible Method of Hiding Content

https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

How to hide elements without having them take space on the page?

how to hide the content of the div in css