mq4-hover-shim
Advanced tools
A shim for the Media Queries Level 4 hover @media feature.
The CSSWG's Media Queries Level 4 Working Draft defines a hover media feature that can be used in media queries. This can be used to determine whether the user-agent's primary pointing device truly supports hovering (like mice do) (the hover value), or emulates hovering (e.g. via a long tap, like most modern touch-based mobile devices) (the on-demand value), or does not support hovering at all (like some old mobile devices) (the none value). This matters because emulated hovering typically has some ugly quirks, such as :hover being "sticky" (i.e. a hovered element stays in the :hover state even after the user stops interacting with it and until the user hovers over a different element). It is often better to avoid :hover styles in browsers where hovering supports is emulated.
However, since it's from a relatively recent Working Draft, the hover media feature is not supported in all current modern browsers or in any legacy browsers. So, this library was created to shim support for the feature into browsers that lack native support for it.
NOTE: This shim only adds support for the hover value of the hover media feature. So you can only tell the difference between "truly supports hovering" (the hover value)" and "does not truly support hovering" (the none or on-demand values).
The shim consists of two parts:
@media (hover: hover) {
some-selector {
property: value;
}
}
into
some-prefix some-selector {
property: value;
}
(In normal use-cases, some-selector will contain the :hover pseudo-class and some-prefix will be a specially-named CSS class that will typically be added to the <html> element.)
:hover styles; for example:$(document).on('mq4hsChange', function (e) {
$(document.documentElement).toggleClass('some-special-class', e.trueHover);
});
Obviously, this requires JavaScript to be enabled in the browser, and would default to disabling :hover styles when JavaScript is disabled.
npm install mq4-hover-shimjspm install mq4-hover-shimThe browser-side portion of the shim depends on jQuery for firing events.
Pull requests to add support for other browser event libraries would be welcomed.
The following is a summary of the results of testing the library in various browsers. Try out the Live Testcase.
Legend:
Officially supported:
Unofficially supported:
The npm module has the following properties:
postprocessorFor
hoverSelectorPrefix - This string will be prepended to all selectors within @media (hover: hover) {...} blocks within the source CSS.
stringpostcss() function).featureDetector - Each of this object's properties is a string filepath to a JavaScript file containing the browser-side feature detector in a particular JavaScript module format.
es6 - ECMAScript 6 module format (this is the original from which the other versions are generated)cjs - CommonJS module formatumdGlobal - "enhanced" UMD module format; exports a window.mq4HoverShim global if the JS environment has no module system (e.g. if included directly via <script> in current browsers); (generated via Browserify's standalone option)The browser-side feature detector is available in the following module formats:
/src/browser/mq4-hover-shim.js/dist/cjs/mq4-hover-shim.js/dist/browser/mq4-hover-shim.js
mq4HoverShim property on the global window object.The module exports one public function:
supportsTrueHover()
booleanboolean value indicating if the browser's primary pointer currently supports true hovering or if the browser at least does not try to quirkily emulate hovering, such that :hover CSS styles are appropriate.true if @media (hover: hover) would evaluate to true were the browser to natively correctly implement Media Queries Level 4; otherwise, returns false.hover media feature, but does support touch via some pointing input device, then we define this touch-based pointer to be the "primary pointer". Hence, if said browser has multiple pointing input devices, one supporting touch and another supporting true hovering (e.g. the computer has both a mouse and a touchscreen), this function will return false, since the user could use the touch input device at any time and since :hover should only be used for progressive enhancement anyway.The module has one public event:
mq4hsChange
document objecttrueHover
booleansupportsTrueHover()'s return value at the time of firing the eventThe project's coding style is laid out in the JSHint, ESLint, and JSCS configurations. Add unit tests when changing the CSS postprocessor. Lint and test your code using Grunt. Manually test any changes to the browser-side portion of the shim.
Also, please don't edit files in the dist subdirectory as they are generated via Grunt. You'll find source code in the src subdirectory!
See the GitHub Releases page for detailed changelogs.
masterpostprocessor with postprocessorFor().Copyright (c) 2014-2015 Christopher Rebert. Licensed under the MIT License.
FAQs
A shim for the Media Queries Level 4 `hover` @media feature
The npm package mq4-hover-shim receives a total of 163 weekly downloads. As such, mq4-hover-shim popularity was classified as not popular.
We found that mq4-hover-shim demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.