- From: Greg Whitworth <gwhit@microsoft.com>
- Date: Tue, 29 Nov 2016 17:30:04 +0000
- To: "alex@bellandwhistle.net" <alex@bellandwhistle.net>, "tomhodgins@gmail.com" <tomhodgins@gmail.com>, "Charles.Hall@mrm-mccann.com" <Charles.Hall@mrm-mccann.com>, "steve@steveclaflin.com" <steve@steveclaflin.com>, "pdescham49@gmail.com" <pdescham49@gmail.com>, "jonathan@jooped.co.uk" <jonathan@jooped.co.uk>, "yoav@yoav.ws" <yoav@yoav.ws>, "jason@cloudfour.com" <jason@cloudfour.com>, "public-respimg@w3.org" <public-respimg@w3.org>
> ... snipt ...
> 1) Attribute-based. The CSS aspect-ratio proposals solve different, more complicated problems. They are harder to understand, harder to implement, harder to polyfill. I don’t want to wait five years. Since the ratio is a property of the asset, it should be marked up with the image/video.
Not sure I completely agree with the implementation aspect but I guess that might be true (either way it's layout code and you're having to add a new attribute or prop and modify your parser accordingly for either), however I do agree with the polyfill portion. I do know that wanting to preserve the aspect ratio is not only desired on replaced elements, so I don't think we should put it in HTML solely based on author or UA convenience.
> 3) Distinct from sizes attribute. I don’t see a way to add onto the existing sizes syntax without backwards-incompatible changes. zcorpan, correct me if I’m wrong here? Even if there were a way to do it, I’m worried it would be hard to read.
This was my worry as well. That said, this does have the downside of repetition of breakpoints and when you start adding in <source> within a picture element this gets pretty annoying to read already. I'm not sure which one I prefer really:
Your suggestion:
<img
sizes="(min-width: 40em) 60vw, (min-width: 60em) 80vw, 100vw"
aspect-ratio=“(min-width: 40em) 3:2, (min-width: 60em) 16:9, 4:3”
srcset="examples/images/medium.jpg 375w,
examples/images/large.jpg 480w,
examples/images/extralarge.jpg 768w"
alt="…">
or something like this:
<img
sizes="(min-width: 40em) 60vw / 3:2, (min-width: 60em) 80vw / 16:9, 100vw / 4:3"
srcset="examples/images/medium.jpg 375w,
examples/images/large.jpg 480w,
examples/images/extralarge.jpg 768w"
alt="…">
Ultimately, I think I would prefer to have this be CSS based since it is trying to solve a layout problem, which is one of the primary goals of CSS. Additionally, it covers other use cases that aren't related to replaced elements so it makes it so we don't have an HTML aspect ratio attribute and a CSS aspect ratio property, it solves both use cases in one place.
Greg
Received on Tuesday, 29 November 2016 17:30:42 UTC