css/no-stale-prefixes

Dlaczego

Prefixes such as -webkit-border-radius or -ms-flexbox were for browsers that are long gone. Written by hand they add bytes, go out of date, often carry an old syntax (-webkit-linear-gradient(top, …) has a different direction keyword) and hide the one prefix that is still needed.

Poprawka

Write the standard property and value. If the project still supports a browser that needs a prefix, let Autoprefixer add it at build time from the project's browserslist. Keep the few prefixes that are still required, such as -webkit-line-clamp with display: -webkit-box and -webkit-box-orient.

Przykłady

/* bad */
.card { -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: transform .2s; }
/* good */
.card { border-radius: 8px; transition: transform 0.2s; }

Źródła

• MDN, Vendor prefix
• Autoprefixer (PostCSS), README

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain css/no-stale-prefixes