[whatwg] So if media-queries aren't for determining the media to be used what are they for?

[Tim Kadlec]

The lack of em support is a concern though I understand the complications you have brought up.

Using ems for media queries (which in turn dictate layout which in turn dictates the image I want to load) is increasingly looking like a much wiser decision than using pixels. A perfect example are devices such as the Kindle Touch which have a much higher default font size. A real world example, and case study, can be found here: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

Now suppose that for that layout displayed in their screenshot, the header image was changed to be a vertical oriented phone and the size was reduced. In that case, I would want srcset to kick in with a different image. It sounds like it would not be able to accomplish this right now?

Forgive me if I'm just missing something. It's early and my coffee hasn't kicked in quite yet. :)

-Tim

On May 16, 2012, at 4:07 AM, Odin Hørthe Omdal <odinho at opera.com> wrote:

> On Wed, 16 May 2012 10:33:05 +0200, Matthew Wilcox <mail at matthewwilcox.com> wrote:
>> Am i right in believing that the srcset attribute are limited to
>> pixels? A unit that's dying out in all responsive designs? Is it
>> extensible to em, % etc? Because that's what's used.
> 
> I'm afraid you are confusing a lot of stuff together here.
> 
> You can use em and % freely in your stylesheets/CSS. The values from srcset is used to fetch the right resource during early prefetch, checked against the width and height of the viewport (and only that viewport).
> 
> Having ems or % would make no sense whatsoever there, because you don't know what they mean. 50% of what? The viewport size? You would basically make it always matching. Because 50% will always be half of whatever your viewport size is...
> 
> Say you write    <img srcset="mycoolpic.jpg 50%w, myotherpic.jpg 75%w">
> 
> If viewport is  50px wide, mycoolpic will match   25px, myotherpic will match 37.5px, so it'll pick myotherpic.jpg
> If viewport is  200px wide, mycoolpic will match 100px, myotherpic will match 150px, so it'll pick myotherpic.jpg
> If viewport is  500px wide, mycoolpic will match 250px, myotherpic will match 375px, so it'll pick myotherpic.jpg
> If viewport is 1000px wide, mycoolpic will match 500px, myotherpic will match 750px, so it'll pick myotherpic.jpg
> 
> See the pattern? It'll always pick the one closest to 100%, no matter what. It doesn't make sense.
> 
> Also note: the width of an image, and the value you write in srcset, doesn't need to have any connection at all. It's only used to match against the viewport to choose what picture the user agent will fetch.
> 
> 
> This example will make your logo a smaller mobile version when your viewport width is 600 or smaller (you should also have some media queries in your stylesheet that change the layout at that stage):
> 
>  <img src="fallback..." srcset="logo-150px.jpg, logo-50px.jpg 600w">
> 
> Here, the logo-50px.jpg will only be loaded if your viewport width is less than 600. It'll choose logo-150px.jpg for everything else.
> 
> 
> CSS (and the domain media queries work in), and resource fetching that works with prefetching/-loading is two totally seperate things/problems.
> 
> If you make a solution that will support em/% in a meaningful way, you would have to wait for layout in order to know what size that means. So you will have slower-loading images, and ignore the "we want pictures fast" requirement.
> 
> -- 
> Odin Hørthe Omdal (Velmont/odinho) · Core, Opera Software, http://opera.com