Is it ok to hide any things using display:none?

StackOverflow https://stackoverflow.com/questions/2289749

  •  21-09-2019
  •  | 
  •  

Question

Is it ok to hide any thing temporarily or forever using display:none? in dynamic site where many component of page coming from different plugins etc and many time if client doesn't want any thing on page then i use dispaly:none to hide things from page . I do not remove thing from actual source because client can come back ask to enable that thing again.

so what are pros and cons to keep things hide from display:none if i keep any element hide using Display:none forever?

is there any cons in terms of SEO, Screen reader, Accessibility etc?

Was it helpful?

Solution

Pros: Very easy to do

Cons:

  • You are still loading the components on the server side and the client will download them. The browser will simply not "show" them.
  • Anyone using "view source" will be able to see the values that are "hidden". so never use it to hide sensitive information.

You can simply "comment" these section server side to save a lot of processing on the server, bandwidth, etc.

OTHER TIPS

If the client wants it removed, then create a backup of the page, and post a page that actually has it removed. Don't substitute CSS for actually removing an item. If they decide they want it in the future, then go in and swap your backup for your live copy. If you're dealing with dynamic output (in the case of PHP or a comparable technology) you could stop that particular output with comments so they're never included in the response.

It's probably also worth mentioning here that some search engines (Google for example) do take stock of hidden content.

Hiding huge amounts of text using display:none; is one of the things many search engines pick up on as keyword spamming.

:)

It makes sense to hide/show stuff with 'display:none' when you do client-side Ajax. This way you can switch views/tabs without doing server round-trip.

It is needed to actually remove something from the page markup when there are security implications. If a user doesn't have the right to see some sensitive information, it shouldn't be there when they click "Display source".

display: none is good to hide things you want visible when people turn css off or use browsers that doesnt support css.

As far as accessibility goes, there is a strong chance that something hidden with "display: none;" will NOT be read by a screen-reader. This may be acceptable if you intend for it to be that way.

A possible alternative to hiding content for screen-readers/css-offers only is to use this class:

.offscreen {
    position: absolute;
    left: -9000px;
    width: 0;
    overflow: hidden;
}

And the following HTML:

<h3 class="offscreen">Site Navigation</h3>

For full information on hiding techniques: http://www.access-matters.com/2005/04/23/screen-reader-test-results/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top