invalid-media-query

This rule reports an argument of style.media() that is not a media condition. hover: matches a hovered element, not a property of the device, so it cannot become a query for matchMedia(). The argument is left out, and when no argument remains, the query is not all.

Reported

style.media("hover");invalid-media-query: `hover` adds a condition that is not a media query

Fixed

@custom-variant can-hover (@media (hover: hover));

style.media("can-hover");

How to fix

• To check whether an input device can hover, define a media variant for that capability, as in the example.
• To style an element while it is hovered, use hover: inside style().
• To check the viewport or user preferences, use media variants such as md or motion-safe.
• supports-* and container queries are not media conditions either.

See style.media().

Rule settings