'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 |
---|