On Tue, May 15, 2012 at 5:15 PM, Jason Grigsby <ja...@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
