2

I want to differentiate styling based on whether the client browser supports hovering or not. I read that media features would do the job and so I used the following structure:

/* Supports hovering */
@media (hover: hover) { ... }

/* Does not support hovering */
@media (hover: none) { ... }

While this works fine on Chrome (see specs below), on Firefox I get the error Expected media feature name but found ‘hover’. I am surprised, especially because it was developer.mozilla.org where I read about using hover as a media feature.

Is there anything I need to do in addition to get this working on Firefox?

For example this example about hover as a media feature doesn't work for me on Firefox while it does on Chrome.

Chrome: Version 67.0.3396.79 (Official Build) (64-bit)
Firefox: 60.0.2 (64-bit)

Blackbam
  • 17,496
  • 26
  • 97
  • 150
a_guest
  • 34,165
  • 12
  • 64
  • 118
  • I think you're trying to solve a problem that doesn't exist. `:hover` has been supported since Firefox 2, Chrome 4 and IE 6. If your visitors are using browsers that old, I'd be telling them to upgrade their browsers, rather than adding a plethora of custom support :P – Obsidian Age Jun 26 '18 at 21:17
  • 2
    @ObsidianAge The difference is about mobile / desktop devices. Mobile devices don't support hovering and so the styling should be modified on these devices. – a_guest Jun 26 '18 at 21:19
  • 1
    FYI, this media feature now works in Firefox > 64, which was released in Dec 2018 (which is really really late imo as this has existed in most browsers since 2015) – Chris Apr 03 '19 at 13:45

1 Answers1

1

This media feature is only available for Firefox version >= 64:

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover#Browser_compatibility

a_guest
  • 34,165
  • 12
  • 64
  • 118
Kosh
  • 16,966
  • 2
  • 19
  • 34