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 appVersion Property
The navigator.appVersion property in HTML returns a string containing version information about the browser. This property provides details about the browser's version, platform, and sometimes additional system information.
Syntax
Following is the syntax for the navigator appVersion property −
navigator.appVersion
Return Value
The navigator.appVersion property returns a string that typically includes −
-
Version number − The browser version information
-
Platform details − Operating system information
-
Engine information − Browser engine details like WebKit or Gecko
Note − The format and content of the returned string varies between different browsers and may not always reflect the actual browser version due to user agent spoofing for compatibility reasons.
Example − Basic Usage
Following example demonstrates how to retrieve and display browser version information −
<!DOCTYPE html>
<html>
<head>
<title>Navigator appVersion Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>Browser Version Information</h1>
<button onclick="showVersion()" style="background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Show Version Info</button>
<div id="result" style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 5px;"></div>
<script>
function showVersion() {
var versionInfo = navigator.appVersion;
document.getElementById("result").innerHTML = "<h3>Browser Version:</h3><p>" + versionInfo + "</p>";
}
</script>
</body>
</html>
The output displays a button that reveals the browser's version information when clicked −
Browser Version Information [Show Version Info] (Clicking shows version details like: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...)
Example − Parsing Version Information
Following example shows how to extract specific information from the appVersion string −
<!DOCTYPE html>
<html>
<head>
<title>Parse Browser Version</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Detailed Browser Information</h2>
<button onclick="parseVersion()" style="background: #28a745; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Analyze Version</button>
<div id="details" style="margin-top: 15px;"></div>
<script>
function parseVersion() {
var appVersion = navigator.appVersion;
var platform = navigator.platform;
var userAgent = navigator.userAgent;
var details = "<h3>Browser Analysis:</h3>";
details += "<p><strong>App Version:</strong> " + appVersion + "</p>";
details += "<p><strong>Platform:</strong> " + platform + "</p>";
details += "<p><strong>User Agent:</strong> " + userAgent + "</p>";
// Check for common browsers
if (userAgent.indexOf("Chrome") > -1) {
details += "<p><strong>Browser Type:</strong> Google Chrome</p>";
} else if (userAgent.indexOf("Firefox") > -1) {
details += "<p><strong>Browser Type:</strong> Mozilla Firefox</p>";
} else if (userAgent.indexOf("Safari") > -1) {
details += "<p><strong>Browser Type:</strong> Safari</p>";
} else {
details += "<p><strong>Browser Type:</strong> Other</p>";
}
document.getElementById("details").innerHTML = details;
}
</script>
</body>
</html>
This example provides detailed analysis of the browser information including platform and user agent detection.
Example − Browser Compatibility Check
Following example demonstrates how to use appVersion for basic compatibility checking −
<!DOCTYPE html>
<html>
<head>
<title>Browser Compatibility Check</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Browser Compatibility Status</h2>
<div id="compatibility"></div>
<script>
function checkCompatibility() {
var appVersion = navigator.appVersion;
var isModern = false;
var message = "";
// Basic check for modern browser features
if (appVersion.indexOf("Chrome") > -1 ||
appVersion.indexOf("Firefox") > -1 ||
appVersion.indexOf("Safari") > -1 ||
appVersion.indexOf("Edge") > -1) {
isModern = true;
message = "<div style='color: green; background: #d4edda; padding: 10px; border-radius: 5px;'>? Your browser appears to be modern and compatible.</div>";
} else {
message = "<div style='color: #856404; background: #fff3cd; padding: 10px; border-radius: 5px;'>? Browser compatibility could not be determined.</div>";
}
message += "<p style='margin-top: 10px;'><small>Version Info: " + appVersion + "</small></p>";
document.getElementById("compatibility").innerHTML = message;
}
// Run check on page load
window.onload = checkCompatibility;
</script>
</body>
</html>
This example automatically checks browser compatibility when the page loads and displays an appropriate message.
Browser Compatibility
The navigator.appVersion property is supported by all major browsers −
| Browser | Support | Notes |
|---|---|---|
| Chrome | Yes | Returns WebKit version information |
| Firefox | Yes | Returns Gecko version information |
| Safari | Yes | Returns WebKit version information |
| Edge | Yes | Returns similar format to Chrome |
| Internet Explorer | Yes | Returns Trident version information |
Key Points
-
The
appVersionproperty is read-only and cannot be modified. -
Different browsers return different formats and information in the version string.
-
Modern browsers may return similar version strings for compatibility reasons, making browser detection unreliable.
-
For feature detection, use capability testing rather than relying solely on version information.
-
The property is part of the
navigatorobject which provides information about the user's browser and system.
Conclusion
The navigator.appVersion property provides browser version information as a string, though its format varies between browsers. While useful for basic browser identification, modern web development practices recommend feature detection over version-based browser detection for better compatibility and reliability.
189 Views
