CSS

`css/no-stale-prefixes`

No hand-written vendor prefixes for features browsers support unprefixed (border-radius, transitions, transforms, flexbox, gradients).

minorstaticfe-css-architecture

Why

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.

Fix

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.

Examples

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

Sources

Facts

Id: css/no-stale-prefixes
Severity: minor
Check: static checked in the source by audit
Applies to: css scss less html vue svelte astro
Taught by the skill: fe-css-architecture CSS architecture and tokens
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

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