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

Sun Nov 10 10:48:23 PST 2013

2013-11-10 19:36, Markus Ernst wrote:

> 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.

That would be my main concern, too. But I would rather say that it 
really mixes up content and presentation, moving to HTML something that 
belongs to the scope of styling and can currently be handled in CSS.

> 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:

Adding new elements is questionable, especially if they have content 
(which would be rendered as-is by current user agents).

> <head>
> <situations>
>    small: (max-width: 400px);
>    small2x: (max-width: 400px) 2x;
>    medium: (max-width: 1000px);
>    medium2x: (max-width: 1000px) 2x; and
>    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.">

This, too, would mix content and presentation. Admittedly, the line 
between them isn't always crystal clear, even if most of HTML5 pretends 
that it is. But here the approach should let an author specify an img 
element in markup and separately specify, in a style sheet language, 
that in some cases the src attribute value is to be overridden.

If people think that current CSS media queries are inadequate for the 
purpose (and I'm not convinced that they are), then the first question 
should be whether CSS can be suitably enhanced. Failing that, it would 
seem natural to define a new, restricted style language. Something like 
this:

<style type="text/is">
@media(max-width: 400px) { #pic { src: url(pic-small.jpg); } }
...
</style>
...
<img id=pic src="pic-large.jpg" alt=""
title="Obama talking to a soldier in hospital scrubs.">

If the problem with current CSS approach is that browsers would still 
download the resource pointed to by the src attribute, then the 
processing of IS (image styling) style sheets could be defined so that 
they are evaluated when encountered and they are applied according to 
the browsing situation, so that they will take effect when the <img> 
elements are processed. This would be no more adhockery than src-* 
attributes would be. Actually, less.

Yucca