This approach worked well for me. It used progressive enhancement to build layers of functionality and polish. It worked well, that is, until touch.
Take the example of a component that revealed additional content on hover.[foot]Let's leave aside the question of if revealing content on hover is a good design pattern. Let's assume there's sufficient affordance to communicate the available interaction to the user.[/foot] All of the relevant functionality can be achieved with CSS, but the touch experience isn't ideal. In iOS, a tap will trigger the hover state, but the user can't un-hover and return to the original state.
So we test for touch using Modernizr
works really well. But non-IE users are left without their mouse triggering any effect. These users are left with a significant loss in functionality and experience.
We can no longer assume that devices have a single input.
Our original CSS hover base functionality needs to become our no-js fallback functionality