Css style

10 Ways to Hide Elements in CSS

There are several ways to hide an element in CSS, but they differ in how they affect accessibility, layout, animation, performance, and event handling.

Animation

Some CSS masking options are hit or miss. The element is fully visible or fully invisible and there is no intermediate state. Others, like transparency, can have a range of values, so interpolated CSS animations become possible.

Accessibility

Each method described below will visually hide an item, but may or may not hide assistive technology content. For example, a screen reader might still announce small transparent text. Other CSS properties or ARIA attributes like aria-hidden="true" may be needed to describe the appropriate action.

Beware that the animations may also cause disorientation, migraines, seizures, or other physical discomfort in some people. Consider using a prefers-reduced-motion media query to disable animations when specified in user preferences.

Event management

Hiding will stop events from being fired on that element or have no effect – i.e. the element is not visible but can still be clicked or receive other user interaction.

Performance

After a browser loads and parses the HTML DOM and CSS object model, the page is rendered in three steps:

  1. Layout: generate the geometry and position of each element
  2. To paint: draw the pixels for each element
  3. Composition: positions the element layers in the correct order

An effect that only causes composition changes is noticeably smoother than ones that affect layout. In some cases, the browser may also use hardware acceleration.

1. opacity and filter: opacity()

the opacity: N and filter: opacity(N) properties can be given a number between 0 and 1, or a percentage between 0% and 100% indicating that they are fully transparent and fully opaque accordingly.

See the pen
hide with opacity: 0
by SitePoint (@SitePoint)
to CodePen.

There is little practical difference between the two in modern browsers, although filter should be used if several effects are applied at the same time (blur, contrast, grayscale, etc.)

Opacity can be animated and provides great performance, but beware, a fully transparent element remains on the page and can trigger events.

metric effect
browser support good, but IE only support opacity 0 to 1
accessibility content unread if 0 or 0% is set
layout affected? no
rendering required composition
performance better, can use hardware acceleration
possible animation images? Yes
events fired when hidden? Yes

2. color Alpha Transparency

opacity affects the entire element, but it is also possible to set the color, background-colorand border-color properties separately. Applying a zero alpha channel using rgba(0,0,0,0) or similar makes an element fully transparent:

See the pen
mask with alpha color
by SitePoint (@SitePoint)
to CodePen.

Each property can be animated separately to create interesting effects. Note that transparency cannot be applied to elements with image backgrounds unless they are generated using linear-gradient or similar.

The alpha channel can be set with:

  • transparent: completely transparent (intermediate animations are not possible)
  • rgba(r, g, b, a): red, green, blue and alpha
  • hsla(h, s, l, a): hue, saturation, lightness and alpha
  • #RRGGBBAA and #RGBA
metric effect
browser support good, but IE only support transparent and rgba
accessibility content still read
layout affected? no
rendering required The painting
performance good, but not as fast as opacity
possible animation images? Yes
events fired when hidden? Yes

3. transform

the transform The property can be used to translate (move), scale, rotate, or skew an element. A scale(0) Where translate(-999px, 0px) offscreen will hide the element:

See the pen
hide with transform: scale(0);
by SitePoint (@SitePoint)
to CodePen.

transform offers excellent performance and hardware acceleration as the element is effectively moved to a separate layer and can be animated in 2D or 3D. The original layout space remains as it is, but no event will be triggered by a fully hidden element.

metric effect
browser support good
accessibility content still read
layout affected? no — original dimensions are kept
rendering required composition
performance better, can use hardware acceleration
possible animation images? Yes
events fired when hidden? no

4. clip-path

the clip-path The property creates a clipping region that determines which parts of an element are visible. Using a value such as clip-path: circle(0); will completely hide the element.

See the pen
hide with clip-path
by SitePoint (@SitePoint)
to CodePen.

clip-path offers the possibility of interesting animations, although it should only be relied on in modern browsers.

metric effect
browser support modern browsers only
accessibility content still read by some applications
layout affected? no — original dimensions are kept
rendering required Paint
performance reasonable
possible animation images? yes, in modern browsers
events fired when hidden? no

5. visibility

the visibility property can be set to visible Where hidden to show and hide an element:

See the pen
hide with visibility: hidden
by SitePoint (@SitePoint)
to CodePen.

The space used by the element remains in place unless a collapse value is used.

metric effect
browser support excellent
accessibility unread content
layout affected? no, unless collapse is used
rendering required composition, unless collapse is used
performance good
possible animation images? no
events fired when hidden? no

6. display

display is probably the most used method of hiding elements. A value of none effectively removes the element as if it never existed in the DOM.

See the pen
hide with display: none
by SitePoint (@SitePoint)
to CodePen.

However, this is perhaps the worst CSS property to use in the majority of cases. It cannot be animated and will trigger a layout unless the element is moved out of the document flow using position: absolute or the new contain property is adopted.

display is also overloaded, with options such as block, inline, table, flexbox, grid and more. Reset to correct value after display: none; can be problematic (although unset can help).

metric effect
browser support excellent
accessibility unread content
layout affected? Yes
rendering required arrangement
performance poor
possible animation images? no
events fired when hidden? no

7.HTML hidden attribute

HTML hidden attribute can be added to any element:

<p hidden>
  Hidden content
p>

to apply the browser’s default style:

[hidden] {
  display: none;
}

It has the same advantages and disadvantages as display: nonealthough this can be useful when using a content management system that does not allow style changes.

8. Absolute position

the position The property allows an element to be moved from its default value static position in the layout using top, bottom, leftand right. A absolute– the positioned element can therefore be moved offscreen with left: -999px or similar:

See the pen
hide with position: absolute
by SitePoint (@SitePoint)
to CodePen.

metric effect
browser support excellent, unless you use position: sticky
accessibility content still read
layout affected? yes, if the positioning is changed
rendering required depends
performance reasonable so careful
possible animation images? Yes on top, bottom, leftand right
events fired when hidden? yes, but it may not be possible to interact with an off-screen element

9. Overlay Another Element

An item can be hidden visually by positioning another on top that has the same color as the background. In this example, a ::after the pseudo-element is layered, although any child element can be used:

See the pen
hide with overlay
by SitePoint (@SitePoint)
to CodePen.

Although technically possible, this option required more code than the other options.

metric effect
browser support excellent
accessibility content still read
layout affected? no, if absolutely positioned
rendering required Paint
performance reasonable so careful
possible animation images? Yes
events fired when hidden? yes, when a nickname or a child element is overlaid

10. Downsize

An element can be hidden by minimizing its dimensions using width, height, padding, border-width and or font-size. It may also be necessary to apply overflow: hidden; to ensure that the content does not overflow.

See the pen
hide with width or height
by SitePoint (@SitePoint)
to CodePen.

Interesting animated effects are possible, but performance is significantly better with transform.

metric effect
browser support excellent
accessibility content still read
layout affected? Yes
rendering required arrangement
performance poor
possible animation images? Yes
events fired when hidden? no

Hidden Choices

display: none was the preferred solution for hiding elements for many years, but has been replaced by more flexible and animateable options. It is still valid, but perhaps only when you want to permanently hide content from all users. transform Where opacity are better choices when considering performance.

Take your CSS skills to the next level with CSS Master. Learn CSS architecture, debugging, custom properties, advanced layout and animation techniques, how to use CSS with SVG, and more.