@Erika Meyer: I agree with you. Perhaps the demos should have resulted in a different experience for iPhone users (via media type, sure). I intended the demo page to simply illustrate the idea of test-driven enhancement in a way that seemed somewhat easy to follow. How a site will actually implement their enhancements across devices is left to the developer and the test cases they choose to include. Thanks for your insight, though. As I’d said earlier, one might decide that iPhone users would be better off using select menus, particularly due to the nice native wheel interface that iPhone provides!
@Divya Manian: It’s a good question. User agent sniffing is a different approach and comes with its disadvantages. For one, the approach is limited to browsers you actively sniff for, and doesn’t attempt to cater to the experience of users on devices that aren’t in your set of agent strings. Feature (or bug) detection is a different approach in that it acts upon capabilities of a browser, regardless of what that browser it is. We’re seeing javascript libraries like jQuery moving towards feature/bug detection rather than user agent sniffing for this very reason. Feature detection is also forward-looking in that it adapts to bug fixes in browsers as they happen. For instance, if you were to fork some code based on a known implementation difference in IE7 using a user agent sniff, and IE7 releases an update with a fix to that bug, the browser will no longer will need that fork. A user agent check would continue to direct IE7 to that forked code, as opposed to feature/bug detection, which would direct it to the code that aligns with its updated implementation.
This is a pretty cool idea brought to fruition! It really brings Javascript and browser detection to a whole new level. I’m surprised this CSS detection technique hasn’t been mentioned as often as it should be.
There is one thing that bothers me. The markup has to be written for the most basic browser that we want to support. Since the markup is static how can our application get advantage of new semantic tags that are going to be introduced in the future releases of html?
The techniques first described in this A List Apart article have since been refined and built into a small JavaScript framework called EnhanceJS. EnhanceJS allows you to easily include scripts and stylesheets in browsers deemed capable of rendering them properly, and comes with an extensible API for running custom capabilities tests and taking advantage of several advanced features.
24 Reader Comments
Back to the ArticleScott Jehl
@Erika Meyer: I agree with you. Perhaps the demos should have resulted in a different experience for iPhone users (via media type, sure). I intended the demo page to simply illustrate the idea of test-driven enhancement in a way that seemed somewhat easy to follow. How a site will actually implement their enhancements across devices is left to the developer and the test cases they choose to include. Thanks for your insight, though. As I’d said earlier, one might decide that iPhone users would be better off using select menus, particularly due to the nice native wheel interface that iPhone provides!
@Divya Manian: It’s a good question. User agent sniffing is a different approach and comes with its disadvantages. For one, the approach is limited to browsers you actively sniff for, and doesn’t attempt to cater to the experience of users on devices that aren’t in your set of agent strings. Feature (or bug) detection is a different approach in that it acts upon capabilities of a browser, regardless of what that browser it is. We’re seeing javascript libraries like jQuery moving towards feature/bug detection rather than user agent sniffing for this very reason. Feature detection is also forward-looking in that it adapts to bug fixes in browsers as they happen. For instance, if you were to fork some code based on a known implementation difference in IE7 using a user agent sniff, and IE7 releases an update with a fix to that bug, the browser will no longer will need that fork. A user agent check would continue to direct IE7 to that forked code, as opposed to feature/bug detection, which would direct it to the code that aligns with its updated implementation.
Cardin Lee
This is a pretty cool idea brought to fruition! It really brings Javascript and browser detection to a whole new level. I’m surprised this CSS detection technique hasn’t been mentioned as often as it should be.
Thanks for the update! =)
Ahmet KATRANCI
There is one thing that bothers me. The markup has to be written for the most basic browser that we want to support. Since the markup is static how can our application get advantage of new semantic tags that are going to be introduced in the future releases of html?
Scott Jehl
The techniques first described in this A List Apart article have since been refined and built into a small JavaScript framework called EnhanceJS. EnhanceJS allows you to easily include scripts and stylesheets in browsers deemed capable of rendering them properly, and comes with an extensible API for running custom capabilities tests and taking advantage of several advanced features.
Info on EnhanceJS: