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

[Odin Hørthe Omdal]

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