As with any web application, developers must decide what browsers to test against when developing the application, and ultimately support when the application is released into the wild. The decision to support a specific browser usually judged solely on the percentage of market share the browser has. More recently, some applications such as Basecamp, Facebook, or Apple’s MobileMe have also taken into account the amount of development stress caused to the programmers working on the site.
Yahoo introduced Graded Browser Support, which states that clients using A-grade browsers will have the optimal experience, and clients graded lower may have a reduced feature set or decreased performance. The most important thing to take away from this approach is that with older C-grade and non-mainstream X-grade browsers, the core features are still functional.
We’re in an interesting time in web development, browsers are again releasing new features prior to official standardization, in the hopes of guiding the standards to a more practical implementation based on real development and use cases, not just hypothetical design. As many have stated, The Browser Wars are back.
Tournology has decided to both endorse and utilize the popular open source PHP application framework developed by Zend, aptly titled Zend Framework. One of the devices Zend Framework (or, ZF) uses to increase the reusability of code in the View portion of the framework is the concept of a View Helper, a simple class and method pair that returns HTML markup (or equivalent content suitable for output) to the View.
The following is a Zend Framework View Helper to parse the user agent string, a simple port of the user agent parsing code currently residing in the popular jQuery JavaScript framework. This can be used in a variety of ways, from serving user agent specific content to adding a browser specific CSS class to avoid relying on CSS hacks.
Download
Please consult the Zend_View_Helper documentation for information on how to integrate the View Helper into your application. Also, set up your autoloader correctly to load the Browser class (and your Zend Framework files), or add the require() declaration at the top of BrowserHelper.php to load the Browser class. You may then commence to use the view helper like so:
From your view script:
<?php echo $this->browserHelper()->getVendorClassName(); ?>
<?php if($this->browserHelper()->is(Browser::MSIE)) { /* do something */ }; ?>
Or from your controller:
<?php echo $this->view->browserHelper()->getVendorClassName(); ?>
<?php if($this->view->browserHelper()->is(Browser::MOZILLA)) { /* do something */ }; ?>
One specific application in Tournology using this approach is with rounded corners. You’ll notice in the source code of the popular microblogging website Twitter, they enhance the presentation for browsers that have proprietary CSS extensions for the CSS 3 border-radius property. For instance, as of the time of this writing, the td#content tag has the following properties to provide rounded corners to browsers using the Gecko and Webkit rendering engines (Firefox, Mozilla, Flock, Safari, and Chrome):
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-topleft:5px;
However, Twitter does not provide any mechanism for rounded corners in Internet Explorer. What we aim to do is establish the baseline presentation: rounded corners using background images and nested divs by default, and then alter the markup returned for Gecko and Webkit compatible browsers to a single div with no background images needed. This will reduce the amount of markup and HTTP requests, thus improving load times further in newer web browsers that support these proprietary property shims for CSS 3 border-radius. This is an approach that goes beyond the Graded Browser Support guidelines set forth by Yahoo to enhance the experience even further as a reward to clients using the newest browser versions. We like to call it A+ Grade Browsers, giving extra credit (in the form of increased performance) to the browsers that have the highest marks (in terms of advanced feature support).
We must mention that establishing a presentation baseline is the most important step, as parsing the User Agent may not be reliable in all cases, especially in corporate or educational environments using proxy caching as a means of serving content.
Stay tuned for another article detailing the source code used to provide fully compliant A-grade Rounded Corners, which are automatically enhanced to High Performance Rounded Corners in A+ grade browsers.
Blog
