respimagelint icon indicating copy to clipboard operation
respimagelint copied to clipboard

Feature: Add support for min/max/clamp

Open EmpireJones opened this issue 3 years ago • 1 comments

Assuming browsers support min/max/clamp in the sizes attribute, these should be supported, like calc()

https://caniuse.com/css-math-functions

EmpireJones avatar Jun 30 '21 21:06 EmpireJones

I'm surprised this issue doesn't have more action! We have a lot of pretty complex sizes attributes like

(min-width: 720px) calc(calc(100vw - calc(2 * clamp(24px, 2vw, 36px))) / 6), calc(calc(100vw - calc(2 * 16px)) / 3)

that cause this tool to flag them as wrong:

The size of the image doesn’t match the sizes attribute (min-width: 720px) calc(calc(100vw - calc(2 * clamp(24px, 2vw, 36px))) / 6), calc(calc(100vw - calc(2 * 16px)) / 3). At a viewport of 1280x720 the image was 185 pixels wide instead of the specified 0 (Infinity% difference). The affected viewports are 300x169-3000x4000.

I wonder if leaning on something like https://github.com/tabatkins/parse-css could help here

alibosworth avatar Nov 30 '23 21:11 alibosworth