How to Detect the User’s Browser Type in CSS3
In most cases, developers don’t get to choose a user’s browser. To determine whether a particular user can work with your CSS3 application, then, you need first to detect the user’s browser — and then determine whether that browser is acceptable.
jQuery makes it possible to perform the detection with relative ease. The following example shows one method to detect the name and version of the user’s browser. It relies on the latest 1.x version of jQuery, which is version 1.10.1 at the time of this writing. (You can find complete code for this example in the Chapter 06jQuery folder of the downloadable code as BrowserDetect.html.)
This is an HTML5 page, so it starts with the HTML declaration, <!DOCTYPE html>. This example begins with a basic structure that includes the <html>, <head>, <title>, and <body> tags.
The code begins with the first <script> tag that uses the src attribute to tell the browser where to find the jQuery library. You can copy this information as shown to any page where you want to use jQuery.
Anyone who uses the application will automatically have access to jQuery as long as the browser can access the Internet. (You can also download a copy of jQuery for local access from the jQuery site.)
The latest 1.x version of jQuery doesn’t support the browser detection feature directly. In order to make the feature work with anything newer than jQuery 1.8.3, you must also include the link for the jQuery Migrate library as shown in the example.
The <body> of the page starts out with a <h1> tag that contains the page’s heading. The next step is to provide a place for jQuery to put the browser’s name.
It’s time to display the name onscreen. The $ (dollar sign) is a special symbol that refers to the jQuery library, which is also called an Application Programming Interface (API). The bit of code that says, $(‘p[id=”name”]’).html, tells jQuery to use the <p> tag with an id value of name to hold some HTML. This is a kind of selector.
You now have a specific tag selected. The code then tells jQuery to create some text, a <span>, and then place the name of the browser within that span. All this information appears in the <p> tag after the script executes.
Next comes a second <p> tag. This one has an id attribute of version. The accompanying script starts out the same as before. The $(‘p[id=”version”]’).html entry tells jQuery to place some HTML in the <p> tag with an id attribute of version. In this case, jQuery provides what you need as a property. All the code has to do is tell jQuery to place the value in browser.version within the <p> tag to display the browser’s version number. When you run this example, you see output similar to this:
A library can detect only the browsers it’s designed to detect. Consequently, jQuery detects some browsers, but not others. For example, you can’t currently use it to detect an Android browser because Android isn’t in the list of browsers supported by jQuery (which focuses on desktop browsers).
Most browser detection methods rely on user agent strings that contain information about the browser. To see the user agent string for your browser, check out What’s My User Agent?. You can generally find lists of user agent strings for devices online.