Maintaining CSS Style States using "Infinite" Transition Delays
This is pretty cool, but it also represents one of my main beefs with the HTML5/CSS standards and their past, current and future direction. That is the substantial amount of cognitive friction involved in doing many relative simple, even sometimes common things.
Implementation of often basic UI design concepts and interactions can quite often require some serious contortions of the HTML, CSS or both (though very fortunately, less and less the HTML). CSS is designed around being exceptionally flexible but nonetheless, there is no real consideration for usability or common patterns and use cases (or for the poor souls who may have to wrap their heads around these styles later on). I think in the end this is leading towards some pretty ugly legacy issues.
Sadly, I have no real solution here so I'm just bitching. I sort of see why we are at this point, and I don't currently see any way that a somewhat haphazard standards definition process can possibly focus on usability. Perhaps someone else here does?
Everytime I see a new technique I get all excited. Then I check it on Internet Explorer and the excitement fades.
On IE-9 it works the first time you try it but then the other buttons don't have any effect.
Just once I'd like an organization to have a corporate standard that mandates Chrome's latest version.
I hate that hacks have become "ninja" or "clever". You should always strive to write simple and readable code.
This (the original technique) is dangerous, of course - the browser might end up wasting a bit of CPU/power doing a nice 60fps animation of nothing. Even if this turns out not to make a significant difference in most cases, it's better to stick with JavaScript.
Unless "inf" (the floating point special value) becomes a CSS literal, I'm not gonna use this one.
The first sentence doesn't change colors on my iPad.
In the demo, there seems to be a change in responsiveness as you approach a wall.
Very clever. I disagree that this kind of thing should only be done in javascript. This is a very light-weight solution to various animation problems. In the old man in a room demo, it works perfectly for letting the GPU-accelerated browser handle that very smoothly, while freeing up your javascript thread for other duties.