autoprefixer icon indicating copy to clipboard operation
autoprefixer copied to clipboard

Avoid generating prefixes for browsers that don't support Gradient Midpoints

Open yisibl opened this issue 1 year ago • 1 comments

  • https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient#color-hint image
  • Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=420527
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: > 0%
*/

.example {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, red), color-stop(30%), color-stop(90%, blue)); /* invalid */
    background: -webkit-linear-gradient(red 10%, 30%, blue 90%); /* invalid */
    background: -moz-linear-gradient(red 10%, 30%, blue 90%);
    background: -o-linear-gradient(red 10%, 30%, blue 90%); /* invalid */
    background: linear-gradient(red 10%, 30%, blue 90%);
}
  • I'm not sure if -webkit-gradient supports this syntax, need to investigate further.
  • Interestingly, Firefox supports -webkit-linear-gradient(red 10%, 30%, blue 90%)

yisibl avatar Jan 09 '24 11:01 yisibl

I will need PR for that optimization

ai avatar Jan 09 '24 12:01 ai