Hiding Content on a Website with CSS

At times there may be a good reason for having to hide content on your website from a viewer depending upon the screen size / device they are viewing the website on.

The three CSS techniques that could be used for the following HTML code are:

<div class="mobilehide"> For some reason this is to long and does not really work well for mobile users so I am going to hide it for now and display it again when being viewed on a larger screen</div>

Accessibility/SEO Friendly CSS Hiding

This is recommend by Chris Coyier (back in 2012) as he believes that by indenting the content is the most accessible and SEO friendly technique. This technique hides the content, collapses the space it fills and screen readers have access to the content.

.mobilehide {
position: absolute;
top: -9999px;
left: -9999px;
}

Using CSS display: none;

Makes that content “inaccessible” by screen readers, though this can be used carefully and can work with replacing the text as a part of your mobile / desktop content strategy. The display effect is that it hides the element/content and removes the space it fills (collapses) on the page so text / images will fill the space.

.mobilehide {
display: none;
}

Using CSS visibility: hidden;

Once again as above, “inaccessible” by screen readers and the display effect is that it hides the element/content but does not remove the space it fills on the page so you will have a blank bit on your website.

.mobilehide {
visibility: hidden;
}