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 product Property
The navigator.product property in HTML is a read-only property that returns the browser's engine name. In modern browsers, this property typically returns "Gecko" regardless of the actual browser engine being used.
Syntax
Following is the syntax for the navigator product property −
navigator.product
Return Value
The property returns a string representing the browser engine name. For compatibility reasons, most modern browsers return "Gecko" even if they don't use the Gecko engine.
Example
Following example demonstrates how to access the navigator product property −
<!DOCTYPE html>
<html>
<head>
<title>Navigator Product Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>HTML navigator product property Demo</h1>
<button onclick="display()" style="background: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Show Browser Engine Name</button>
<div id="result" style="margin-top: 20px; font-size: 18px; color: #333;"></div>
<script>
function display() {
document.getElementById("result").innerHTML = "Browser engine name is: " + navigator.product;
}
</script>
</body>
</html>
The output displays a button that reveals the browser engine name when clicked −
HTML navigator product property Demo [Show Browser Engine Name] (After clicking button): Browser engine name is: Gecko
Browser Compatibility Note
The navigator.product property has limited practical use in modern web development. Most browsers return "Gecko" for compatibility reasons, regardless of their actual rendering engine:
- Chrome (Blink engine) − Returns "Gecko"
- Firefox (Gecko engine) − Returns "Gecko"
- Safari (WebKit engine) − Returns "Gecko"
- Edge (Chromium-based) − Returns "Gecko"
Alternative Example with Multiple Browser Properties
Following example shows the navigator product property alongside other navigator properties for better context −
<!DOCTYPE html>
<html>
<head>
<title>Navigator Properties Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Browser Information</h2>
<button onclick="showBrowserInfo()" style="background: #2196F3; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer;">Get Browser Details</button>
<div id="browserInfo" style="margin-top: 15px; background: #f5f5f5; padding: 15px; border-radius: 5px;"></div>
<script>
function showBrowserInfo() {
var info = "<strong>Navigator Properties:</strong><br>";
info += "Product: " + navigator.product + "<br>";
info += "User Agent: " + navigator.userAgent + "<br>";
info += "App Name: " + navigator.appName + "<br>";
info += "App Version: " + navigator.appVersion;
document.getElementById("browserInfo").innerHTML = info;
}
</script>
</body>
</html>
This example shows how navigator.product compares with other navigator properties, providing a more complete picture of browser information.
Practical Usage
Due to its limited accuracy, navigator.product is rarely used for browser detection in modern web development. Instead, developers typically use:
- Feature detection − Testing for specific browser capabilities
- navigator.userAgent − More detailed browser information (though also unreliable)
- Modern APIs − Browser-specific APIs for detecting capabilities
Conclusion
The navigator.product property returns the browser engine name as a string, but in practice, most modern browsers return "Gecko" for compatibility reasons. This property has limited practical value for browser detection and should be used primarily for informational purposes rather than feature detection.
172 Views
