'How to unset image-rendering for Safari 11+ without yielding "property stroke-color doesn't exist" on W3C CSS Validator

To avoid blurry downscaled images in Chrome, I followed GoojajiGreg's answer to use media queries to set image-rendering to -webkit-optimize-contrast on Chrome 29+ (which reduces the blurriness in Chrome) and to unset it on Safari 11+ (to avoid pixelated images in Safari). The CSS code from the answer is reproduced below.

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast !important;
  }
}

/* Unset for Safari 11+ */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    img {
      image-rendering: unset !important;
    }
  }
}

This code works for me, but I noticed that when I enter it into the W3C CSS Validator, the validator yields the following error.

Property stroke-color doesn't exist : transparent

Is there a way to improve the code above so that it does not yield this error?

I see that a CSS property with a similar name, -webkit-text-stroke-color, does exist, and when I replace stroke-color with -webkit-text-stroke-color, no error is found and the code "validates as CSS level 3 + SVG". However, on the -webkit-text-stroke-color MDN Web Docs page, I see the following warning, which suggests this may not be a preferred solution.

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source