[whatwg] Features for responsive Web design

[Tab Atkins Jr.]

On Tue, May 15, 2012 at 5:15 PM, Jason Grigsby <jason at cloudfour.com> wrote:
>
> On May 15, 2012, at 4:51 PM, Tab Atkins Jr. wrote:
>
>> I suspect this is simply confusion about the proposal - @srcset
>> handles the "art-directed" case same as <picture>, just with a
>> somewhat more compact microsyntax rather than using MQs directly.  (On
>> the plus side, the slightly-special processing of the microsyntax
>> ensures that at least one image will be chosen no matter what, while
>> it's unclear how an MQ-based solution will work if none of the MQs
>> match.)
>>
>> Given that @srcset was generated as a solution to the use-cases that
>> the CG brought up, it would be difficult to justify it if it didn't
>> handle those cases.  ^_^
>
> I understand that @srcset is intended to also address art direction. I fear that my attempts to explain the art direction need haven’t been sufficient and thus it seems like @srcset supports it, but really doesn’t. BUT because I find @srcset confusing, I can’t tell if my impression is correct or if I just don’t get @srcset.
>
> The key thing I’m trying to wrap my mind around is that I will want to make a layout change at a certain viewport width. Say that layout change also means that I’m going to go from images that are rectangular to thumbnails that are square.
>
> That layout change may happen at 600px. The thumbnails are 100x100. The images used above the 600px breakpoint are 300x150.
>
> In the @srcset syntax, I *think* I would end up with something like this:
>
> <img src="a.png"
>     srcset="a-rectangle.png 300w 150h 1x,
>             a-square.png 100w 100h 1x">

Nope, what you want is this:

<img src="a-square.png" srcset="a-rectangle.png 600w">

Use "a-square.png" by default, and "a-rectangle.png" only if the
window is at least 600px wide.

I agree that the syntax doesn't make this obvious - it's *too*
compact, so there's no redundant indicators of what the "w" number
means.


> With a viewport width of 400px, the media query I defined to modify my layout would take affect. The layout would thus assume a square image. But @srcset would pick the rectangle image because both images are smaller than the viewport and the algorithm that Hixie defined says, “then of the remaining images pick the widest one, if any have a width, tie-breaking by picking the tallest one”.

With the fixed example, at a window width of 400px, the rectangle
image would be thrown out and we'd use the square.

~TJ