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.
Creating the code required to perform this task by hand isn’t impossible, but it can be hard. Articles like the one at Javascripter.net tell you how to perform this task, but one look at the code should tell you that it’s a complex task. (You can see the output from this example code here.)
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.)
<!DOCTYPE html>
<html>
<head>
<title>Detect a Browser</title>
<script
src="http://code.jquery.com/jquery-latest.js">
</script>
<script
src="http://code.jquery.com/jquery-migrate-1.2.1.js">
</script>
</head>
<body>
<h1>Browser Information</h1>
<p id="name"></p>
<script language="JavaScript">
var browser =
$.uaMatch(navigator.userAgent).browser;
$('p[id="name"]').html(
"Browser Name: <span>" + browser + "</span>");
</script>
<p id="version"></p>
<script language="JavaScript">
$('p[id="version"]').html(
"Version Number: <span>" + $.browser.version +
"</span>");
</script>
</body>
</html>
This is an HTML5 page, so it starts with the HTML declaration, . This example begins with a basic structure that includes the , , , and <body> tags.</p><p>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.</p><p>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.)
<p class="Remember">The latest 1.<i>x</i> 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 <a href="http://code.jquery.com/jquery-migrate-1.2.1.js">jQuery Migrate library</a> as shown in the example.</p>
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.</p><p>In this case, the example uses a <p> (paragraph) tag that has an id of name. The first <script> creates a var (variable) named browser and places the browser’s name in it. The browser name is always provided to your application as part of the JavaScript navigator.userAgent object, but working with this object is time-consuming, so this code shows a one-line method for obtaining the information.</p><p>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.</p><p>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.</p><p>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:</p><p><img loading="lazy" src="https://www.dummies.com/wp-content/uploads/414707.image0.jpg" alt="image0.jpg" width="492" height="194" />
<p class="Remember">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).</p>
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 <a href="https://www.whoishostingthis.com/tools/user-agent/">Who is Hosting This</a> You can generally find lists of user agent strings for devices online.
