Skip to content

Instantly share code, notes, and snippets.

@scriptex
Last active April 5, 2021 09:40
Show Gist options
  • Save scriptex/ef87faa6918a1f5fb24093840383d19e to your computer and use it in GitHub Desktop.
Save scriptex/ef87faa6918a1f5fb24093840383d19e to your computer and use it in GitHub Desktop.
Hover media query
/**
* Detailed info about the Hover CSS Media Feature can be found here:
* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
*
* This media query is implemented in almost all modern browsers and works as expected.
* The modern browsers include Chrome, Opera, Safari, Edge, Brave, Vivaldi, etc.
* Internet Explorer and Firefox do not understand this media feature and therefore will
* simply ignore all rules inside the query.
* Update: Firefox supports this media feature since version 64.
* A workaround can be found below.
*/
/**
* Enable hover states on devices which support hover media feature. On IE10 and IE11 hover states work on any device.
*
* @param -ms-high-contrast: none Targets IE10 and IE11
* @param -ms-high-contrast: active Targets IE10 and IE11
* @param -moz-touch-enabled: 0 Targets Firefox before 64
* @param hover Targets all browsers which support the Hover CSS Media Feature
*/
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover) {
.element:hover { color: lavender; }
}
/**
* Bonus: SCSS mixin
* Usage:
* .button {
* @include hover {
* color: red;
* }
* }
*/
@mixin hover {
&:hover {
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover) {
@content;
}
}
}
@scriptex
Copy link
Author

scriptex commented Apr 5, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment