display:none;
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:
Space
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.
Load Speeds
Do you have any other CSS rules (such as a “:hover” pseudo-class) or JavaScript functionality that exists on the web page which will allow the end-user of your website to ever make the HTML element in question seeable? If not, why are you even loading it on the page in the first place? If the content inside of the HTML element is dynamic (maybe some kind of custom query you do on the backend to render this element’s content) then you are putting an unnecessary added load time on your end-user. By putting a “display:none;” on this HTML element you only affect it once your end-user has downloaded it and its content. See what I mean? There is no reason why to even load the content first – save your end-user some load time and just remove the mark-up or backend code that produces it in the first place.
SEO and Screen Readers
So you say to yourself, “Yes, I have functionality which allows the display:none; content to be shown via an onclick event in my JavaScript code.” That’s fine and dandy! There are many, many places where this is completely acceptable. However, you should consider howimportant the content is which is initially loaded on the page with a “display:none;” on it. Although there is some debate as to whether Google’s web ranking algorithm cares about hidden content (and in reality Google search ranking is all anyone cares about), there is good reason to suspect Google either completely ignores “display:none;” content (that is, initially loaded “display:none” elements and their content on your webpage) or gives the content low priority in there search ranking (reference:https://support.google.com/webmasters/answer/66353). The same is true for many screen readers on the market today – many will not even read content that is hidden with a “display:none;”. If you decide the content is important and you would like to rest assured that the content is getting seen by Google and screen readers there are two reasonable solutions.
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):
.hideElement{
position: absolute;
top:-9999px;
left:-9999px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
padding: 0;
margin:0;
border: 0;
}
2) The other way to fix this is to have JavaScript hide the element with a “display:none;” once the page loads. This will ensure that Google sees the content, however, I’m not sure about screen readers (if you are concerned about screen readers just go with option 1). The only downfall of this method is that it relies on JavaScript to drive content, and what if your user has JavaScript disabled? This is a rare encounter, but it does happen. I advise just using the class above for content you want to to completely hide but still have it seen by Google and screen readers.
Warning: Don’t be a wise guy and keyword/content spam with these methods – Google will roast you.
More reading on this topic:
http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/