Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML Navigator appCodeName Property
The HTML navigator appCodeName property returns the browser's code name, which is a string identifier used internally by the browser. This property is part of the Navigator interface and provides information about the user's browser application.
Syntax
Following is the syntax for accessing the appCodeName property −
navigator.appCodeName
Return Value
The property returns a string representing the code name of the browser. For most modern browsers, this property typically returns "Mozilla" for historical compatibility reasons, regardless of the actual browser being used.
Browser Code Names
Here are the common values returned by different browsers −
| Browser | Returned Value |
|---|---|
| Chrome | Mozilla |
| Firefox | Mozilla |
| Safari | Mozilla |
| Edge | Mozilla |
| Opera | Mozilla |
Note: The appCodeName property is deprecated and not recommended for browser detection. Most browsers return "Mozilla" for backward compatibility with legacy web applications.
Example
Following example demonstrates how to retrieve and display the browser's code name −
<!DOCTYPE html>
<html>
<head>
<title>Navigator appCodeName Property</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f5f5f5;
}
.btn {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 10px;
}
.btn:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: white;
border-radius: 5px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>HTML Navigator appCodeName Property</h1>
<button class="btn" onclick="showCodeName()">Show Browser Code Name</button>
<div id="result" class="result"></div>
<script>
function showCodeName() {
var codeName = navigator.appCodeName;
document.getElementById("result").innerHTML =
"<strong>Browser Code Name:</strong> " + codeName;
}
</script>
</body>
</html>
The output displays a button that reveals the browser's code name when clicked −
HTML Navigator appCodeName Property [Show Browser Code Name] Browser Code Name: Mozilla
Complete Browser Information Example
Following example shows the appCodeName property alongside other navigator properties for better context −
<!DOCTYPE html>
<html>
<head>
<title>Complete Browser Information</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f8f9fa;
}
.info-box {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin: 10px 0;
}
.btn {
background-color: #28a745;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Browser Information Demo</h2>
<button class="btn" onclick="showBrowserInfo()">Get Browser Details</button>
<div id="browserInfo" class="info-box" style="display: none;"></div>
<script>
function showBrowserInfo() {
var info = "<h3>Browser Information</h3>" +
"<p><strong>Code Name:</strong> " + navigator.appCodeName + "</p>" +
"<p><strong>App Name:</strong> " + navigator.appName + "</p>" +
"<p><strong>App Version:</strong> " + navigator.appVersion + "</p>" +
"<p><strong>User Agent:</strong> " + navigator.userAgent + "</p>";
document.getElementById("browserInfo").innerHTML = info;
document.getElementById("browserInfo").style.display = "block";
}
</script>
</body>
</html>
This example displays comprehensive browser information including the appCodeName property along with related navigator properties.
Browser Compatibility
The appCodeName property is supported in all major browsers but is considered deprecated. Modern web development practices recommend using feature detection instead of browser detection for better cross-browser compatibility.
Alternative Approaches
Instead of relying on appCodeName for browser identification, consider these modern approaches −
Feature Detection: Use libraries like Modernizr to detect specific browser features rather than identifying the browser itself.
User Agent Parsing: Parse the
navigator.userAgentstring for more detailed browser information.Browser APIs: Use specific browser APIs and handle unsupported features gracefully with try-catch blocks.
Conclusion
The navigator.appCodeName property returns the browser's code name, typically "Mozilla" for historical reasons across all modern browsers. While functional, this property is deprecated and should not be used for browser detection in modern web applications. Feature detection is the recommended approach for determining browser capabilities.
224 Views
