I am trying to style elements differently based on whether the client browser supports hovering or not. I came across media features as a solution and implemented it in the following way:
/* Supports hovering */
@media (hover: hover) { ... }
/* Does not support hovering */
@media (hover: none) { ... }
Although this method works perfectly fine on Chrome, I encountered an error on Firefox that says
Expected media feature name but found ‘hover’
. This was surprising to me because I originally learned about using hover
as a media feature from developer.mozilla.org.
Is there something else I need to do in order to make this work on Firefox?
For instance, even though this example of utilizing hover
as a media feature functions correctly on Chrome, it does not work for me on Firefox.
Chrome: Version 67.0.3396.79 (Official Build) (64-bit)
Firefox: 60.0.2 (64-bit)