Delphinidin

- Cross-Browser Compatibility
With the recent updates to Safari, Firefox, Internet Explorer, Google Chrome, and Opera, creating pages that work across all of the major browsers is the top priority. Browser wars have become a part of every Web designer's daily struggle.

When you use jQuery, you can rest assured that it's cross-browser compatible with all the popular browsers, such as Internet Explorer 6.0+, Mozilla Firefox 2+, Safari 3.0+, Opera 9.0+,
and Google Chrome. Often, a major issue with JavaScript is that you need to create diff erent code to support multiple browsers. Some Web designers and developers choose to create alternate browserspecific style sheets to support CSS in diff erent browsers, mainly Internet Explorer versus the rest. The same issue oft en occurs with JavaScript. The following code represents how to set up an Ajax request that works in multiple browsers:

If(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest(); //Code for Firefox/Safari
}
else
if(window.ActiveXObject) //Active X Version
{
xhr = new ActiveXObject("Microsft.XMLHTTP"); // For IE
}

Using plain JavaScript, you have to write two different functions, test those functions, and fix any bugs. It's quite a lot to manage, not to mention the repetition that occurs when you have to write several functions to do the same thing to support multiple browsers, instead of one script that supports them all, such as in jQuery. By contrast, the following piece of code shows just how easy an Ajax request is in jQuery:

$.ajax();

- CSS3-Compliant
All modern browsers support CSS1 and CSS2 (the first two versions of Cascading Style Sheets), and most Web designers and developers these days use CSS2. CSS3 is in development and off ers enhanced features such as embedded fonts, rounded corners, advanced background images, and colors, text eff ects, and transitions. Only a handful of browsers currently support the full CSS3 spec as of July 2010 — Firefox 4, Internet Explorer 9, Opera 9, and Safari 4. Some older versions of these browsers do support certain features of CSS3.

jQuery has CSS3 support for new selectors only. What does that mean? One of the new features of CSS3 is additional attribute selectors, which are an improvement from the attribute selectors included in CSS2 and are similar to the attribute selectors in jQuery. These selectors allow you to style content based on its attributes, so you can filter based on specific values found in the attributes. Check out the following sample code:

p[title=*foo] {background:black;color:white}
<p class="text" title="food is good foo you">This is my sample text</p>

- Graceful Degradation
With the graceful degradation approach, you get your Web site working in all modern, popular browsers and then work with older browsers to make sure they support those features. Most Web designers and developers have practiced graceful degradation by setting up specific style sheets or browser hacks for various versions of Internet Explorer (ahem, not pointing any fingers, IE6) because of layout issues with the box model.

<a href="javascript:window.open('help.html', 'help window', 'height=800,width=600,to
olbar=no');">Help</a>
<noscript>
Please upgrade your browser or turn on JavaScript, as your browser is not working
with our Website.
</noscript>

- Progressive Enhancement
Progressive enhancement refers to a strategy of starting with a baseline of features supported by all browsers and then adding more features for the modern browsers that support them. Progressive enhancement is a great practice to adopt because it makes your sites more accessible. It's better for your users if you deliver one set of features for everyone and add special upgrades for those using more compliant browsers — that is, those compatible with features such as CSS3 and HTML 5. Currently only Safari 4 and Opera 10.6 support HTML 5 and CSS3.

The progressive enhancement approach doesn't assume that everyone has JavaScript enabled and always gives the user an alternative way of accessing the content. Consider the pop-up window used in the discussion about practicing unobtrusive JavaScript. Instead, you can use the target attribute in the anchor tag to tell the browser to open up the link in a new browser window, instead of creating a pop-up. This is supported by all popular browsers.

<a href="help.html" target="_blank">Help</a>

- Unobtrusive JavaScript and jQuery
jQuery makes practicing both of these strategies (graceful degradation and progressive enhancement) easier because all of the jQuery (JavaScript) code lives outside the HTML in an external JavaScript file or in the head of the HTML file you're working with, unless you are using a hosted solution delivered by a CDN. The HTML elements contain no embedded JavaScript code, therefore a fallback action is always an option as long as the developer keeps these practices in mind when setting up their Web sites.

Read Again:
The Advantages of jQuery - Part 1