[whatwg] Viewing situations - Re: The src-N proposal

Sun Nov 10 09:53:03 PST 2013

On Sun, Nov 10, 2013 at 9:36 AM, Markus Ernst <derernst at gmx.ch> wrote:
> Am 08.11.2013 16:47 schrieb Yoav Weiss:
>>
>> [1] http://tabatkins.github.io/specs/respimg/Overview.html
>
>
> Having a look at the proposal, and reading the thread especially with regard
> to complexity and verbosity, I got the impression that @src-n shares a main
> objection with @srcset and <picture>, that it mixes up content and design to
> some extent.
>
> Thus I suggest a modified approach which moves the distinction of viewing
> situations, or breakpoints, to the head of the document, creating some
> variable-like references to be used instead of numbers. Some kind of src-var
> instead of src-N. Therefore, a new element for the head would be necessary;
> I call it <situations>, it could also be <breakpoints> or whatever is
> considered more appropriate:
>
> <html>
> <head>
> <situations>
>   small: (max-width: 400px);
>   small2x: (max-width: 400px) 2x;
>   medium: (max-width: 1000px);
>   medium2x: (max-width: 1000px) 2x;
>   large2x: (min-width: 1000.01px) 2x;
> </situations>
> </head>
> <body>
>   <img src-small="pic-small.jpg"
>        src-small2x="pic-medium.jpg"
>        src-medium="pic-medium.jpg"
>        src-medium2x="pic-large.jpg"
>        src-large2x="pic-x-large.jpg"
>        src="pic-large.jpg"
>        alt="Obama talking to a soldier in hospital scrubs.">
> </body>
> </html>
>
> The variable names are free, instead of "small", "small2x" etc. the author
> could also use "1", "2" etc. or "foo", "bar" etc. or whatever. Beyond that,
> it would work the same as src-N, using the resource in @src when none of the
> defined situations apply.
>
> Rationale:
>
> Moving the distinction of viewing situations to the head would have some
> advantages IMO:
> - Verbosity is centralized, thus has not to be repeated in every <img>
> element
> - The UA does not need to evaluate the same MQs again for every <img> in the
> content
> - In order to achieve a consistent handling of "responsivity", the situation
> variables may be reused in other content elements, such as <video>, and also
> in the <link> element as an alternative to todays @media attribute
> - Easier handling of redesigns when breakpoints change; no modifications
> needed in the page content
>
> This proposal is not thoroughly thought-through, but I hope it shows the
> idea.

This proposal does not address Variable-Sized Images; handling the
difficulty and verbosity of that is indeed centralized to the
<situations> element, but that doesn't make it much better.

I'm aware that src-N's reliance on explicit MQs is a weakness.  I
expect to address it through the general mechanism of custom MQs,
which I'll be proposing in a little while when I get around to writing
the spec for it.  One mechanism I'll propose for defining custom MQs
will be a <meta> value, which'll make the custom MQ available to the
preloader, at which point src-N can use them as well.

~TJ