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

Thu May 17 07:41:09 PDT 2012

On Thu, 17 May 2012 15:13:58 +0100, Matthew Wilcox  
<mail at matthewwilcox.com> wrote:

> I'd also point out I'm not claiming this is a replacement for srcset
> or <picture>. I think it's a useful additional tool for web
> developers, but it is aimed at *site wide* generalised uses to make
> life a lot easier - I can't see a way to make it also cater to
> specific individual instances without fundamentally breaking the
> benefits of the generalisation.

I see. So we could proceed with the spec without it, and add it later.

>> What if you're creating WYSIWYG editor for CMSes and want to have  
>> button for inserting adaptive images, but have no access to <head>?
>
> This is not a valid use case (to my mind). You'd not be choosing
> response points for individual pictures, it is the design that has
> response points and it's the CSS (and JS/HTML) which fit into the
> design's breakpoints.

OK.

>> I see no nice solution for case when authors put <meta breakpoint> in  
>> <body>
>> — it'd either have re-evaluate and potentially reload images (wasted
>> requests) or ignore the meta (annoying gotcha when HTML5 parser  
>> unexpectedly
>> closes <head> or when people want to work around lack of access to the
>> <head>)
>
> This solution does not allow for <meta> in the body, and nor does the
> HTML5 spec unless I'm mistaken?

What spec allows and what happens on the web are separate things :)

HTML needs to define all error cases and be prepared for markup to be  
abused (lots of such cases had to be defined already).

>> How do you work with URLs you have no control over? e.g. you'd have to  
>> name
>> your breakpoints "40" and "80" to have adaptive size of gravatar.com  
>> URLs.
>
> I'm not sure I understand this point. However you cook it, you have no
> access to those images so you can't do anything with them regardless
> of the method of adaption, be it this method, srcset, or <picture>.

Yes, you can. gravatar.com allows you to specify desired size:

gravarar.com/avatar/hash?s=40 # gives 40x40px image
gravarar.com/avatar/hash?s=80 # gives 80x80px image

>> What do you do when you have only two breakpoints for sidebar, but more  
>> for the main content? (mostly fixed-width sidebar with fluid main  
>> column) or if your page header adapts to portrait orientation, but  
>> images in main content only adapt to width?
>
> Breakpoints are not something that apply to individual components,
> they apply to the page as a whole?

In my designs I use it mainly for components. I don't think of pages as  
separate phone/tablet/desktop designs, but as fluid designs which fold and  
unfold component by component.

Let's say my fancy header logo is quite tall, and that doesn't look well  
in landscape orientation, so I want to use short/wide version of the  
design in landscape orientation.

And I have a square illustration in my content. It doesn't flip on  
orientation, but I want it to be 500x500px on 1000px+ screens, and  
320x320px on smaller ones.

In some srcset-source pseudocode I'd say:

<header>
	<img src="logo-tall" srcset="logo-short (orientation:landscape)">
</header>
<acticle>
	<img src="illustration-big" srcset="illustration-small  
(max-width:1000px)">
</article>

How would you do that with breakpoints?

-- 
regards, Kornel Lesiński