On Thu, Jan 2, 2014 at 12:50 PM, Bob Passaro <bob.pass...@gmail.com> wrote:
> 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?
Hello,
In a mobile-first scenario I would think it would not download both.
Your base styles would be for mobile and since the MQ criteria for a
larger width hasn't been met, it won't load the desktop size. In
desktop-first, it is seeing and downloading the styles/assets for
desktop and then they are being overridden and replaced by smaller
ones.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
______________________________________________________________________
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/
