Hacker News Reader

Hacker News

Comment by alexchamberlain | Hacker News Reader

Full thread

alexchamberlain

I like the concept, but the syntax feels awkward, clunky and very specific.

Why not repurpose the media attribute from style tags to all other tags?

View on HN

> the syntax feels awkward, clunky and very specific

Yeah, stuff like "2x 100w" looks a bit like magic numbers[1]

Also there's potential for confusion in 'x' - does it mean X as in a co-ordinate i.e. width, or zoom? I'd rather see something more verbose like this:

    <img src="foo.jpg">
      <set src="foo1.jpg" width="100">
      <set src="foo2.jpg" density="2">
    </img>

Yes it's more wordy to write, but you read code more than you write it so it makes sense to optimise for readability over byte-shaving.

[1] http://catb.org/jargon/html/M/magic-number.html

There are certainly other ways to do it, but this particular way won't work. <img> was historically a "void element" in past versions of HTML, and past browsers, so it can never have child elements.

We cannot change the way <img> is parsed. See e.g. http://software.hixie.ch/utilities/js/live-dom-viewer/ for the tree you get with that markup. It's not what you expect.

Fair enough, but that is a technical limitation which is trivial to get around:

    <setsrc>
      <img src="foo.jpg">
      <set src="foo1.jpg" width="100">
      <set src="foo2.jpg" density="2">
    </setsrc>

Always be wary of allowing arguments that hinge on "it's not technically possible" to shut down good ideas.

FTFY

    <imgset>
      <img src="foo.jpg">
      <img src="foo1.jpg" width="100">
      <img src="foo2.jpg" density="2">
    </imgset>

Not a good idea. Browsers that do not support imgset would show all three images using that syntax. A new element name like "<set>" would be ignored by them.

CSS to the rescue

    imgset img{display:none;}
    imgset img:first-child{display:block;}

Same with modern HTML5 tags, modernizer or any other tool would handle that for you.

Not really, what about browsers that don't support first-child? Backwards compatibility is important.

Because it is way more verbose and does not address the pixel density case.

But pixel density is a property of the media, which should be dealt with by media queries.

Querying the pixel density of the device is not the same as describing the pixel density of the resource. This has been a common misconception in the discussion of this feature.

Apologies - I misunderstood the proposal. However, what is the pixel density of a PNG?

PPI can be stored in the "pHYs" chunk in a PNG. And some image processing/editing tools do so, such as Photoshop starting with version 7.

http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.d...

http://www.scantips.com/basics9p.html

What it's representing is not necessarily an intrinsic property of the image but rather the intended pixel density for presentation. Say I have a 600x200 PNG which fits my design for normal resolution displays where 1 CSS pixel = 1 device pixel (which is most current laptop screens, for instance). But then I'd like to take advantage of the extra resolution on a device that displays at 1 CSS pixel = 2 device pixels, such as a retina display iPad. So then I get a 1200x400 version of the same image (perhaps both downscaled from a super high res original) and serve it as the 2x image. It will take the same logical space in the layout but provide extra quality on a higher resolution display. There's no need to do anything special to the PNG.

Awesome reply. I now understand. This is still a property of the media though.

Reply on news.ycombinator.com