W3C home > Mailing lists > Public > whatwg@whatwg.org > May 2012

Re: [whatwg] Features for responsive Web design

From: Jason Grigsby <jason@cloudfour.com>
Date: Tue, 15 May 2012 17:15:02 -0700
Message-Id: <A7A691E3-BFC6-4778-8ED7-8E21A5DC8E1B@cloudfour.com>
To: whatwg@lists.whatwg.org

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

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

This is where the disconnect on the art direction side happens. From a layout perspective, weíve making decision based on viewport size (or whatever other media query we want, but primarily viewport size). But from the img tag perspective, weíre selecting images by comparing image size to viewport.

It seems to me that the differences in these comparisons will inevitably cause problems for the art direction use case because they will be out of sync.

-Jason
Received on Wednesday, 16 May 2012 00:15:32 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 30 January 2013 18:48:08 GMT