Why is this an issue?

CSS evolves, and over time selectors, at-rules, and property values are superseded, removed from the specification, or never standardized at all. Browsers may keep these features around for backward compatibility, but they are no longer recommended and can be dropped at any time.

Stylesheets that rely on deprecated CSS features risk visual regressions when vendors finally remove them, and signal to readers that the codebase has not kept up with current standards. Replace deprecated selectors, at-rules, and keyword values with their modern equivalents.

Noncompliant code example

/* Noncompliant: deprecated type selector */
acronym {}

/* Noncompliant: deprecated pseudo-class selector */
a:focus-ring {}

/* Noncompliant: deprecated at-rule */
@viewport { width: device-width; }

/* Noncompliant: deprecated keyword value */
a { overflow: overlay; }

Compliant solution

/* Use the modern element instead of the deprecated one */
abbr {}

/* Use the standardized pseudo-class */
a:focus-visible {}

/* Use the standardized at-rule */
@starting-style { a { color: red; } }

/* Use a standardized keyword value */
a { overflow: auto; }

Resources

Documentation