Hover media query

hover.css

/**
 * 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;
		}
	}
}

Moved to https://github.com/scriptex/hover-media-query