How does display:none; effect css for mobile devices?

views:

answers:

How does display:none; effect css for mobile devices?

If we have hidden some stuff using display:none; for example: images , will it still be downloaded by rendering engine? If yes, does that mean while opening the same web page in mobile, it's going to be unnecessary extra weight to download?

This can further mean that modifying the same webpage for mobile can be a bad idea. Please advice. Thanks.

+2 A:

Yes, the entire page is downloaded (hidden elements and all). The display:none is meaningless until the page has been processed by the browser's CSS Engine.

Jake 2010-07-13 11:42:36

You probably know more about this than I do, but would it not be a very reasonable optimization for browsers not to download images until requested from not-`none`'d DOM elements? Do you have a reference to show this is really never done by browsers?

Carl Smotricz 2010-07-13 11:50:36

I'm afraid I don't, and don't have a chance to conduct any tests of my own at the moment. I think most designers/developers wouldn't want to delay loading of images which are hidden until they are unhidden as this would produce a "flicker" effect while the image is request, a short delay at page load is better than during use. Having said that, I can see why this may be useful for mobile browsers... but I have a feeling that it would be up to the developer to only include the image when it was needed. (ie, dynamically adding an image img tag when its needed, instead of showing it).

Jake 2010-07-13 13:51:30

Thanks for your replies. Do you recommend any other way to strip down extra content from web page to optimise it for mobile? If everything is getting downloaded and the subject in picture is iPhone, the whole content can be easily served after optimisation and there is no need of display:none.

jhonny 2010-07-13 16:31:33

I'm not used to mobile development, off the top of my head, maybe something like the [endless scrolling](http://uipatternfactory.com/p=endless-scrolling/ "endless scrolling") ui pattern? Sorry, cant be of much more help in that area.

Jake 2010-07-13 16:37:53

Anyone else with more ideas please? This thing is pretty much a bottleneck for one of the major decision I've to take for a client. Thanks.

jhonny 2010-07-14 08:57:30

It might be worth starting a new question as I'd argue it was an entirely different topic. Good luck :)

Jake 2010-07-14 09:16:55

ansaurus

tags:

views:

answers:

How does display:none; effect css for mobile devices?

related questions