4 ms·
i really dislike wrapper patterns of any kind, as they add needless markup. sure, it's ok if used sparingly to paper over the inadequacies of current html/css,
by clairity 4y ago
i really dislike wrapper patterns of any kind, as they add needless markup. sure, it's ok if used sparingly to paper over the inadequacies of current html/css, but it's often used excessively nowadays, just like tables in days past. the element itself, not a superfluous wrapper, should provide the parameters necessary (implicitly or explicitly) to specify layout and prevent layout shift.
it sounds like the author takes an either-or approach to this, using either aspect-ratio (for design images) or height and width (for content images). having only skimmed, i haven't yet digested why hinting via attr(height) and attr(width) isn't the (future) preferred best-of-both-worlds, other than it not being supported yet ( https://caniuse.com/css3-attr https://caniuse.com/css3-attr ).
- jaffathecake 4y agoThe lack of support is the only reason, but that's a pretty big reason. Hopefully, in future, web devs will be able to add the same feature to things like iframes via attr(width number) - the number casting will still be necessary.
- clairity 4y agoyah, i can’t wait for attr() to be fully supported. it’s going to both simplify css and reduce js reliance. i’m also really excited by :has() which i think will be the biggest improvement to css since grid. firefox has just started working on it, while safari and chrome already have an initial implementation in place.
- chiefalchemist 4y agoNot a fan either. But when working with WordPress it takes extra work to ensure all the images in the srcset have the same aspect ratio. So the only way to ensure cover is object-fit. Note: this is also useful for background images in the sense totoo often the same large HD+ image is served to mobile devices.