During this time, the community developed some best practices and strategies for addressing these complications, two of which are known as “progressive enhancement” and “graceful degradation”, which are really two sides of the same coin. Progressive enhancement refers to the notion of starting with a lowest common denominator style and behavior that works across all browsers (or an agreed set of browsers) and then progressively “layering” advanced styles and behaviors in more advanced browsers. This strategy allows developers to support users of older browsers without limiting the end-user experience for users of advanced browsers.
Graceful degradation is really just the opposite of progressive enhancement. Using this strategy, developers will target the latest browser technologies first and then work backwards to find ways to support users of older browsers using techniques that allow the web application to still function, albeit with less appeal, through the use of older technologies. The end-goal of both strategies is really the same: support as many browser/version scenarios as possible but without compromising the end-user experience for users of advanced browsers.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Time Grabber</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> </head> <body> ... <form action="/" method="post"> <input id="btnGetTime" type="submit" value="Get current date/time" /> </form> <p>UTC Time: <span id="utcTime"></span></p> <p>UTC Date: <span id="utcDate"></span></p> <p>Local Time: <span id="localTime"></span></p> <p>Local Date: <span id="localDate"></span></p> ... </body> </html>
When the user clicks the button, a post is made to the server and some server-side code produces the following response page.
As soon as the browser completes loading the content of the HTML page, JQuery will trigger the “ready” callback function. The first thing this callback function does is to register a callback function for the button’s click event. This function makes an AJAX call to the server using the “ajax” method, which takes parameters for the url, the method (GET or POST), and a callback function for a successful response (HTTP status code 200). The success callback function takes a few parameters, one of which is the content response from the server (which in this case is formatted as JSON). Inside this callback function, we simply update the values on the page with the values from the response. The final step of the click callback function is to return “false”. This prevents the browser from performing its default behavior to the button click event, which is to post to the server and load a new page. Done.
Whether this whole thing is a case of graceful degradation or progressive enhancement is really a matter of perspective and depends mostly on the developer’s initial goal: optimize for broadest support (progressive enhancement) or optimize for richest user experience (graceful degradation).
If you’d like to play around with the code used in this example, you can download the source code here.
If you found this post helpful or you have questions, please share and/or leave comments.