10 Ways to Hide Elements in CSS

Ten Ways to Hide Elements in CSS

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

Animation

Some CSS hiding options are all or nothing. The element is either fully visible or fully invisible and there’s no in-between state. Others, such as transparency, can have a range of values, so interpolated CSS animations become possible.

Accessibility

Each method described below will visually hide an element, but it may or may not hide the content from assistive technologies. For example, a screen reader could still announce tiny transparent text. Further CSS properties or ARIA attributes such as aria-hidden="true" may be necessary to describe the appropriate action.

Be wary that animations can also cause disorientation, migraines, seizures, or other physical discomfort for some people. Consider using a prefers-reduced-motion media query to switch off animations when specified in user preferences.

Event Handling

Hiding will either stop events being triggered on that element or have no effect — that is, the element is not visible but can still be clicked or receive other user interactions.

Performance

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

  1. Layout: generate the geometry and position of each element
  2. Paint: draw out the pixels for each element
  3. Composition: position element layers in the appropriate order

An effect which only causes composition changes is noticeably smoother than those affecting layout. In some cases, the browser can also use hardware acceleration.

1. opacity and filter: opacity()

The opacity: N and filter: opacity(N) properties can be passed a number between 0 and 1, or a percentage between 0% and 100% denoting fully transparent and fully opaque accordingly.

See the Pen
hide with opacity: 0 by SitePoint (@SitePoint)
on CodePen.

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

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

metric effect
browser support good, but IE only supports opacity 0 to 1
accessibility content not read if 0 or 0% is set
layout affected? no
rendering required composition
performance best, can use hardware acceleration
animation frames possible? yes
events triggered when hidden? yes

2. color Alpha Transparency

opacity affects the whole element, but it's also possible to set the color, background-color, and border-color properties separately. Applying a zero alpha channel using rgba(0,0,0,0) or similar renders an item fully transparent:

See the Pen
hide with color alpha by SitePoint (@SitePoint)
on CodePen.

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

The alpha channel can be set with:

  • transparent: fully transparent (in-between 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 supports transparent and rgba
accessibility content still read
layout affected? no
rendering required painting
performance good, but not as fast as opacity
animation frames possible? yes
events triggered when hidden? yes

3. transform

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

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

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

metric effect
browser support good
accessibility content still read
layout affected? no — the original dimensions remain
rendering required composition
performance best, can use hardware acceleration
animation frames possible? yes
events triggered when hidden? no

The post 10 Ways to Hide Elements in CSS appeared first on SitePoint.

Comments

Post a Comment

Popular posts from this blog

Visual Studio Code: A Power User’s Guide

Image
In this guide, you’ll learn how to take advantage of Visual Studio Code to supercharge your development workflow. This article is written for beginners who may be using Visual Studio Code for the first time. VS Code, as it’s commonly known, is considered a "lightweight" code editor. In comparison with full integrated development environment (IDE) editors which occupy gigabytes of disk space, VS Code only uses less than 200MB when installed. Despite the "lightweight" term, VS Code offers a massive number of features which keep increasing and improving with every new update. For this guide, we'll cover the most popularly used features. Every programmer has their own tool set which they keep updating whenever new workflows are discovered. If you want to learn every tool and feature VS Code has to offer, check out their official documentation . In addition, you may want to keep track of updates for new and improved features. Prerequisites In order to follow alo
Read more

6+ Best Websites for Free Fonts in 2020

Image
I firmly believe that, in order to strike the optimal balance between minimalism and visual appeal, a user interface should display no more than what’s absolutely necessary while making those necessary elements look visually appealing. Keep it simple, but make the simple look amazing. But, what does simple look like exactly? Well, strip away all of the over-the-top marketing gimmicks, redundant features, and cluttering visuals, and most of what’s left is the UI copy and text content. As boring as this sounds, let’s be honest: this is the most important aspect of any app or website. Information and the ability to navigate it is the entire reason users are using our app or website. So with the right typeface coupled with the right font styles (see “ Font vs typeface: the ultimate guide ”), we can create designs that are quite simple and yet visually appealing at the same time. This emphasizes the most important aspects of the design while usin
Read more

How to Contribute to Open Source TypeScript Projects

Image
If you think of the ideas of open source applied to information in an encyclopedia, you get to Wikipedia – lots and lots of small contributions that bubble up to something that’s meaningful. – Matt Mullenweg One of my favorite aspects of open source is the fact that anyone can contribute! It’s like “productive volunteering” (if you’ll humor me). It’s a fantastic way to build something bigger than you, give back to the community, and level up your skills. In this article, we’re going to talk about practical ways for you to get involved in open source TypeScript projects. We’ll first cover assessing your level then jump into how you can find opportunities. Assessing Your Level Before you get started contributing to open source, you want to find your comfort level. Where are you at skill-wise? What level of complexity are you wanting to solve? How much time do you want to spend? These are important questions to consider before diving in. This
Read more