On 10 Sep 2011, at 15:51, Philippe Wittenbergh wrote: > Depends on the browser and the device. As far as I can tell, iOS 4.3 Mobile > Safari does download those images, but Safari 5.1 (and I think then iOS 5 > Mobile Safari) do not.
Yes, ‘it depends’ it is looking increasingly like the only available answer at the moment. David Laakso seems to recall that /all/ mobile browsers download display:none content. You reckon that the forthcoming iOS5 Safari possibly will not. I did manage to unearth one or two possibly-useful articles; of course the issue is complicated by a) the constant influx of new devices (rendering articles potentially obsolete relatively quickly), b) the fact that many articles refer to desktop browsers rather than mobile ones, and c) that many articles seem to discuss <img> elements in markup with display:none rather than CSS-applied background images. (I think clearly any <img> element that appears in the markup should be downloaded, irrespective of how the CSS then displays it). Some tests by Steve Souders: http://www.stevesouders.com/blog/2010/02/12/5e-speculative-background-images/ And in this article: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ ...there is a claim that using display:none on the PARENT of the element in question *will* prevent image download. (I have not verified this). There are also some interesting points raised in the comments. > You could avoid the issue by building from the bottom up, and use media > queries to load that background image only for those browsers / > configurations/ resolutions that will actually see the image. > > div {border: 5px solid blue; background: orange; /* etc */ } /* everybody */ > @media screen and (min-device-width: 1000px) { > div {background: url(path/to/big/background.png) repeat-x; } > } I agree, and indeed that ‘mobile-first’ method is exactly the approach that I am currently intending to implement (using Andy Clarke’s ‘320 And Up’ as a springboard). Certainly, that should cut down the bandwidth overheads considerably for many mobile users. My original question was simply in the spirit of seeing if I could trim it even more, so that mobile users do not have to download background images for those parts of the mobile page design that they do not access (eg. a div that becomes visible when a link is clicked). Maybe the small extra download overhead is a reasonable trade-off for the perceived performance gain resulting from having all necessary images ready and waiting. On a related note, do you (or does anyone else) have any recommendation regarding whether to include the media query in the markup’s <link> tag, or in the CSS as an @media rule? Thanks as always; Rick Lecoat ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
