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

Author: yisiblCreated Jan 9, 2024Updated Jan 9, 2024
/*
* 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%)