#142: Hiding Things With CSS

There isn’t just a single CSS property that you reach for when hiding and showing things in CSS. There are a bunch of considerations that we’ll go over in this video.

For instance, there is the display property in which …

Avatar of Chris Coyier
Chris Coyier on (Updated on )


The visibility property in CSS has two different functions. It hides rows and columns of a table, and it also hides an element without changing the layout.

p {
  visibility: hidden;
tr {
  visibility: collapse;

visibility has …

Avatar of Sara Cope
Sara Cope on (Updated on )

Accessibility/SEO Friendly CSS Hiding

.screen-reader-text {
  position: absolute;
  top: -9999px;
  left: -9999px;

This class can remove an item from the page, taking it out of flow and doesn’t cause overflow scrolling.

It’s better than display: none; or even visibility: hidden; when the goal …

Avatar of Chris Coyier
Chris Coyier on (Updated on )