If you're interested in website accessibility best practices, you might have come across warnings against using display: none to hide content that you don't want to appear on screen. The argument is that content hidden with display: none can't be accessed by people using screen readers, and the recommended solution is to position the content offscreen instead using a large negative position (let's call this the offset method). But this shouldn't be a hard and fast rule for all situations. There are some situations for which using display: none will be acceptable.
One way to help determine whether to use display: none or the offset method is to consider whether that content should still be on the page if all the styles were turned off. In the case of dropdown, tab or expandable menus that show and hide submenus on user interaction, you're going to want that content to be available at all times (regardless of whether they're visible on screen at all times), so you'd use the offset method.
When pondering this article, I had first thought that using display: none might be appropriate in situations involving forms, e.g. hiding and revealing error messages with javascript, but of course not only would javascript handle the presentation of these error messages, but it would handle the content too.
So that doesn't leave a lot of situations that I could think of for which display: none fits the bill. One would be when imagery is added to a layout using background-images that you want to appear when a page is printed – this might be when image replacement has been used on text. Browsers don't print background-images or background-colors by default, so the only way to guarantee an image is printed is to put it in the HTML. So in this scenario, you might add the image to the HTML and use CSS to hide it with display: none in your screen stylesheet (you'll also want to consider Gez Lemon's findings on how different screen readers handle display: none).
Then in your print stylesheet you could hide the image-replaced text (or you might not – it might suit the printed page to have both visible). In the case where you're replacing text, you'd give the image null alt text so that screenreader users aren't hearing the same piece of content twice.
People browsing with CSS off would of course see both text and the image of that same text, but I'd think if you're a sighted user who intentionally browses with CSS off that you'd expect your experience to not be optimal. People who browse with images off (those using mobile devices or with slower connections) would be unaffected because they'd still see the text that's been replaced (assuming the image replacement method you chooses takes this into consideration) and wouldn't see the print-only anyway.
The only other example for using display: none was suggested by Mike Cherim and was one I'd come across before. It involves hiding a message for users of older browsers which informs them that they're seeing an unstyled page because their browser doesn't have adequate CSS support to render the design as it should be. Obvioulsy, this sort of message isn't appropriate for screenreader users so there's no need for them to hear it read out. This example probably has limited usefulness these days as the need to support such legacy browsers diminishes as time passes and I'd doubt there's too many developers worrying about browsers nearly a decade old.
That's only two examples I could think of so if anyone else can come up with any others, I'd be interested to hear them.
