Created by: cvrebert
So, this is one-half of a one possible solution to the problem of how mobile browsers treat :hover styles (see #12832 (closed), among several others).
What this does is add a prefix (.bs-no-touch) to every CSS selector that involves :hover and adds some JavaScript to detect whether the user-agent has touch functionality, and if not, then add .bs-no-touch to the <html> (or <body>?) element. (It should be possible to adapt the relevant portion of Modernizr into a tiny JS script for this.) Thus, :hover styles are only activated on non-touch devices, preventing the afore-referenced UX problems.
Issue: Requires JavaScript
- Desktop users with JS disabled would not get
:hoverstyles. - There are some platforms that allow for both touch and non-touch pointer inputs; such platforms would not get hover styles.
Possible mitigation for (1): Add a .bs-no-js <html>-level class and also autogenerate a .bs-no-js-prefixed version of every :hover selector.
Downsides of this mitigation:
- Doubles the number of
:hover-related selectors - Requires introducing another
<html>-level class and more JS. - Shifts the degraded UX to touch devices that have JS disabled
Another possibility is to require the original HTML to have body.bs-no-touch and then instead have the JS remove the class if the device supports touch, but that requirement sounds rather intrusive.
Some Relevant Links
- Original place where I found this idea: http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/
- http://leonardburton.co/2013/06/a-better-way-to-implement-hover-states-for-the-responsive-web/
CC: @mdo @twbs/team for discussion