@jetbrains/postcss-require-hover
v0.1.2
Published
PostCSS plugin that wraps hover selectors in a media media that's only valid on devices that support true hover events.
Downloads
19,164
Readme
PostCSS Require Hover
PostCSS plugin that wraps hover selectors in a media media that's only valid on devices that support true hover events. The goal of this plugin is to prevent mobile browsers (mostly iOS) from getting their hover states "stuck" since hover.
Original idea: https://www.quirksmode.org/blog/archives/2012/11/what_the_hells.html
More explicit support for this feature: https://drafts.csswg.org/mediaqueries/#hover
Tested:
- IE11
- Chrome
- Safari
- Firefox
- iOS - Safari/Chrome
- Android - Chrome
Example
.foo {
bar:hover {
display: block;
}
}
.foo {
@media (hover: hover), (-moz-touch-enabled: 0), (-ms-high-contrast: none), (-ms-high-contrast: active) {
bar:hover {
display: block;
}
}
}
Installation
npm install postcss-require-hover
Usage
postcss([require("postcss-require-hover")]);
See PostCSS docs for examples for your environment.