Disclaimer: This series of CSS Tips and Tricks will assume you have at least an intermediate level understanding of HTML and CSS.
HTML websites we start to wonder, is there any way I can spice up this bland world of boxes? Can I make my boxes not be boxes? Is there any way to make my text hot pink and my pages’ background sky blue?! So hopefully that last one has never been a motivator for you to learn how to code Cascading Style Sheets (CSS), but you get the picture. In our journey through styling web pages we come across the display attribute. This attribute has been the cause of many headaches, as well as many breakthroughs in terms of styling web pages. There are some pitfalls any web designer and/or developer should be weary of when using this CSS attribute. Consider the following three things to always keep in mind:
What does “display:none;” do?
I will keep this brief, but just so we have some context I felt I should give a little description of what the display attribute can do. According to w3schools.com, “Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is.” Pretty intuitive. There are many values the display attribute can use, but the most common are probably the following: “inline”, “inline-block”, “block”, or “none”. Changing an HTML element’s display attribute to anything different to what that element’s native display value is will change how it affects the overall layout of your pages. Consider an HTML div element. By default, it is a block-level element, but if you set its display attribute to “inline” it will now collapse to only consume as much space as is needed to fit its content. If we then set that same div’s display property to none, POOF! It now appears to be gone. The space it occupied becomes vacant and other elements will (most likely) fill the void of where the div once occupied. However, under the hood in the raw HTML the div is still reallythere, it is just set to “display:none;”
Why am I using “display:none;”?
This is another very important question when considering to use “display:none;”. In answering this question you can determine if “display:none” is the correct solution to “hiding” the HTML content in question. There are three things to consider when using “display:none” which are: space, load speed, and SEO. Let’s consider the first:
This is probably the most familiar consideration most people find the correct solution to, but again, I wanted to mention it. If you want to hide content, but still allow it to take its space within the web page then you want to use a different CSS attribute, “visibility:hidden;”. This will hide the HTML element (and all of its children) but still allow it to take its given space on the web page. However, “display:none;” will completely remove the HTML element (and all of it’s children) from the web page’s rendered layout. Now, let’s consider two other points.
So you may say to yourself, “Yes, I want it completely gone from the rendered web page’s layout.” This raises two things I would like you to consider before slapping a “display:none;” on your HTML element.
SEO and Screen Readers
1) Use this CSS class (thanks to http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ – I have modified the class slightly from the cited article but it accomplishes what it is intended to) for the HTML element instead so you can achieve the “same” result as a “display:none;” but still have your content crawled by Google (as well as have eReaders read the content):
clip: rect(0 0 0 0);
Warning: Don’t be a wise guy and keyword/content spam with these methods – Google will roast you.
More reading on this topic: