So let's say you had something like this in the main, general part of your
stylesheet:
#logo {
background: url(images/logo.png) no-repeat 0 0;
}
And down in your media queries:
@media screen and (max-width: 520px) {
#logo {
background: url(images/logo-small.png) no-repeat 0 0;
}
}
The difference is simply that the media query rule is loading a smaller
image.
So in the interest of conserving bandwidth and speeding up page-load on
mobile, I was wondering if this css would cause the phone to actually
download both images. In other words, would the rule in the media query
override the earlier rule before the image was downloaded or after?
A little Googling yielded this -- interesting:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
This post says it all depends on the browser -- and that what I have above
would work as I want on iOS but Android would download both images.
Putting both rules inside media queries would work better as far as just
loading one image, but then IE8 would load nothing, not recognizing media
queries correct? Maybe there's not graceful solution, but I'm wondering how
others tend to handle this?
______________________________________________________________________
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/
