Browser Feature Detection

Summary: An experimental approach to discovering degree of support for Standards Among the methods of browser detection, many people recommend using the existence of specific properties or methods in a browser's DOM to detect the browser type and whether it supports a given operation. This test takes that idea to the extreme and tests a large number of properties and methods to determine the level of support a browser has for particular standards and reports a rating as the percentage of names the browser defines.

Browser Sniffing via API Name Detection

The following tables list the API names defined for specific W3C DOM APIs and lists the percentage of names that your browser actually defines followed by a list of each of the API names tested along with an indication of whether the name was defined for your browser.

It is clear from these test results that Netscape 7.0x and Mozilla Firefox have the greatest DOM support although Internet Explorer, Safari, and Opera have sufficient DOM CSS 1 and DOM Level 1 & 2 document property and method support to enable cross browser web development.

Test Summary

Standard Netscape 7.0x Firefox 1.5 Safari 2 Opera 7 / 8.5-9.0 Internet
Explorer 6 / 7
DOM Core 1 100% 100% 100% 75% / 91% 75% / 75%
DOM Core 2 100% 100% 100% 70% / 94% 58% / 58%
DOM 1 HTML 100% 100% 100% 100% / 100% 100% / 100%
DOM CSS 1 100% 100% 100% 100% / 100% 96% / 96%
DOM CSS 2 100% 98% 67% 71% / 83% 38% / 42%

Test Results Cross Reference

DOM Core Level 1

Support for properties/methods in document

name Firefox 1.5 IE 6 & 7 Opera 8.54 - 9.01
doctype true true true
implementation true true true
documentElement true true true
createElement true true true
createDocumentFragment true true true
createTextNode true true true
createComment true true true
createCDATASection true false true
createProcessingInstruction true false true
createAttribute true true true
createEntityReference (method present but only returns null: bug 9850) false false
getElementsByTagName true true true

DOM Core Level 2

Support for properties/methods in document

name Firefox 1.5 IE 6 & 7 Opera 8.54 - 9.01
doctype true true true
implementation true true true
documentElement true true true
createElement true true true
createDocumentFragment true true true
createTextNode true true true
createComment true true true
createCDATASection true false true
createProcessingInstruction true false true
createAttribute true true true
createEntityReference true false false
getElementsByTagName true true true
importNode true false true
createElementNS true false true
createAttributeNS true false true
getElementsByTagNameNS true false true
getElementById true true true

 

DOM Level 1 HTML

Support for properties/methods in document

name Firefox 1.5 IE 6 & 7 Opera 8.54 - 9.01
documentElement true true true
createElement true true true
createDocumentFragment true true true
createTextNode true true true
createComment true true true
createAttribute true true true
getElementsByTagName true true true
title true true true
referrer true true true
domain true true true
URL true true true
body true true true
images true true true
applets true true true
links true true true
forms true true true
anchors true true true
cookie true true true
open true true true
close true true true
write true true true
writeln true true true
getElementById true true true
getElementsByName true true true

 

DOM CSS 1

Support for properties/methods in document.body.style

name Firefox 1.5 IE 6 & 7 Opera 8.54 - 9.01
background true true true
backgroundAttachment true true true
backgroundColor true true true
backgroundImage true true true
backgroundRepeat true true true
border true true true
borderSpacing true false true
borderStyle true true true
borderTop true true true
borderRight true true true
borderBottom true true true
borderLeft true true true
borderTopWidth true true true
borderRightWidth true true true
borderBottomWidth true true true
borderLeftWidth true true true
borderWidth true true true
clear true true true
color true true true
display true true true
cssFloat true false true
font true true true
fontFamily true true true
fontSize true true true
fontStyle true true true
fontVariant true true true
fontWeight true true true
height true true true
letterSpacing true true true
lineHeight true true true
listStyle true true true
listStyleImage true true true
listStylePosition true true true
listStyleType true true true
margin true true true
marginTop true true true
marginRight true true true
marginBottom true true true
marginLeft true true true
padding true true true
paddingTop true true true
paddingRight true true true
paddingBottom true true true
paddingLeft true true true
textAlign true true true
textDecoration true true true
textIndent true true true
textTransform true true true
verticalAlign true true true
whiteSpace true true true
width true true true
wordSpacing true true true

 

DOM CSS 2

Support for properties/methods in document.body.style</caption>

name Firefox 1.5 IE 6 & 7 Opera 8.54 - 9.01
azimuth true false false
backgroundPosition true true true
borderCollapse true true true
borderSpacing true false true
borderTopColor true true true
borderRightColor true true true
borderBottomColor true true true
borderLeftColor true true true
borderTopStyle true true true
borderRightStyle true true true
borderBottomStyle true true true
borderLeftStyle true true true
bottom true true true
captionSide true false true
clear true true true
clip true true true
content true false true
counterIncrement true false true
counterReset true false true
cue true false false
cueAfter true false false
cueBefore true false false
cursor true true true
direction true true true
elevation true false false
emptyCells true false true
fontSizeAdjust true false true
fontStretch true false true
left true true true
markerOffset true false true
marks true false true
maxHeight true ie7 only true
maxWidth true ie7 only true
minHeight true true true
minWidth true ie7 only true
orphans true false true
outline true false true
outlineColor true false true
outlineStyle true false true
outlineWidth true false true
overflow true true true
page true false true
pageBreakAfter true true true
pageBreakBefore true true true
pageBreakInside true false true
pause true false true
pauseAfter true false true
pauseBefore true false true
pitch true false false
pitchRange true false true
playDuring false false false
position true true true
quotes true false true
richness true false false
right true true true
size true false true
speak true false true
speakHeader true false false
speakNumeral true false false
speakPunctuation true false false
speechRate true false true
stress true false false
tableLayout true true true
textShadow true false true
top true true true
unicodeBidi true true true
visibility true true true
voiceFamily true false true
volume true false true
widows true false true
zIndex true true true

 

Test Code

<script type="text/javascript">
<!-- 

// document properties that are used to determine
// support levels
var _FEATURES = 
{
	'DOMCORE1': [ 
		{name: 'doctype', 'supported': false},
		{name: 'implementation', 'supported': false},
		{name: 'documentElement', 'supported': false},
		{name: 'createElement', 'supported': false},
		{name: 'createDocumentFragment', 'supported': false},
		{name: 'createTextNode', 'supported': false},
		{name: 'createComment', 'supported': false},
		{name: 'createCDATASection', 'supported': false},
		{name: 'createProcessingInstruction', 'supported': false},
		{name: 'createAttribute', 'supported': false},
		{name: 'createEntityReference', 'supported': false},
		{name: 'getElementsByTagName',  'supported': false}
	],
	
	'DOMHTML': [ 
		{name: 'documentElement', 'supported': false},
		{name: 'createElement', 'supported': false},
		{name: 'createDocumentFragment', 'supported': false},
		{name: 'createTextNode', 'supported': false},
		{name: 'createComment', 'supported': false},
		{name: 'createAttribute', 'supported': false},
		{name: 'getElementsByTagName',  'supported': false},
		{name: 'title', 'supported': false},
		{name: 'referrer', 'supported': false},
		{name: 'domain', 'supported': false},
		{name: 'URL', 'supported': false},
		{name: 'body', 'supported': false},
		{name: 'images', 'supported': false},
		{name: 'applets', 'supported': false},
		{name: 'links', 'supported': false},
		{name: 'forms', 'supported': false},
		{name: 'anchors', 'supported': false},
		{name: 'cookie', 'supported': false},
		{name: 'open', 'supported': false},
		{name: 'close', 'supported': false},
		{name: 'write', 'supported': false},
		{name: 'writeln', 'supported': false},
		{name: 'getElementById', 'supported': false},
		{name: 'getElementsByName', 'supported': false}
	],

	'DOMCORE2': [ 
		{name: 'doctype', 'supported': false},
		{name: 'implementation', 'supported': false},
		{name: 'documentElement', 'supported': false},
		{name: 'createElement', 'supported': false},
		{name: 'createDocumentFragment', 'supported': false},
		{name: 'createTextNode', 'supported': false},
		{name: 'createComment', 'supported': false},
		{name: 'createCDATASection', 'supported': false},
		{name: 'createProcessingInstruction', 'supported': false},
		{name: 'createAttribute', 'supported': false},
		{name: 'createEntityReference', 'supported': false},
		{name: 'getElementsByTagName',  'supported': false},
		{name: 'importNode', 'supported': false},
		{name: 'createElementNS', 'supported': false},
		{name: 'createAttributeNS', 'supported': false},
		{name: 'getElementsByTagNameNS', 'supported': false},
		{name: 'getElementById', 'supported': false}
	],

	'DOMCSS1': [
		{name: 'background', 'supported': false},
		{name: 'backgroundAttachment', 'supported': false},
		{name: 'backgroundColor', 'supported': false},
		{name: 'backgroundImage', 'supported': false},
		{name: 'backgroundRepeat', 'supported': false},
		{name: 'border', 'supported': false},
		{name: 'borderSpacing', 'supported': false},
		{name: 'borderStyle', 'supported': false},
		{name: 'borderTop', 'supported': false},
		{name: 'borderRight', 'supported': false},
		{name: 'borderBottom', 'supported': false},
		{name: 'borderLeft', 'supported': false},
		{name: 'borderTopWidth', 'supported': false},
		{name: 'borderRightWidth', 'supported': false},
		{name: 'borderBottomWidth', 'supported': false},
		{name: 'borderLeftWidth', 'supported': false},
		{name: 'borderWidth', 'supported': false},
		{name: 'clear', 'supported': false},
		{name: 'color', 'supported': false},
		{name: 'display', 'supported': false},
		{name: 'cssFloat', 'supported': false},
		{name: 'font', 'supported': false},
		{name: 'fontFamily', 'supported': false},
		{name: 'fontSize', 'supported': false},
		{name: 'fontStyle', 'supported': false},
		{name: 'fontVariant', 'supported': false},
		{name: 'fontWeight', 'supported': false},
		{name: 'height', 'supported': false},
		{name: 'letterSpacing', 'supported': false},
		{name: 'lineHeight', 'supported': false},
		{name: 'listStyle', 'supported': false},
		{name: 'listStyleImage', 'supported': false},
		{name: 'listStylePosition', 'supported': false},
		{name: 'listStyleType', 'supported': false},
		{name: 'margin', 'supported': false},
		{name: 'marginTop', 'supported': false},
		{name: 'marginRight', 'supported': false},
		{name: 'marginBottom', 'supported': false},
		{name: 'marginLeft', 'supported': false},
		{name: 'padding', 'supported': false},
		{name: 'paddingTop', 'supported': false},
		{name: 'paddingRight', 'supported': false},
		{name: 'paddingBottom', 'supported': false},
		{name: 'paddingLeft', 'supported': false},
		{name: 'textAlign', 'supported': false},
		{name: 'textDecoration', 'supported': false},
		{name: 'textIndent', 'supported': false},
		{name: 'textTransform', 'supported': false},
		{name: 'verticalAlign', 'supported': false},
		{name: 'whiteSpace', 'supported': false},
		{name: 'width', 'supported': false},
		{name: 'wordSpacing', 'supported': false}
	],
	
	'DOMCSS2': [
		{name: 'azimuth', 'supported': false},
		{name: 'backgroundPosition', 'supported': false},
		{name: 'borderCollapse', 'supported': false},
		{name: 'borderSpacing', 'supported': false},
		{name: 'borderTopColor', 'supported': false},
		{name: 'borderRightColor', 'supported': false},
		{name: 'borderBottomColor', 'supported': false},
		{name: 'borderLeftColor', 'supported': false},
		{name: 'borderTopStyle', 'supported': false},
		{name: 'borderRightStyle', 'supported': false},
		{name: 'borderBottomStyle', 'supported': false},
		{name: 'borderLeftStyle', 'supported': false},
		{name: 'bottom', 'supported': false},
		{name: 'captionSide', 'supported': false},
		{name: 'clear', 'supported': false},
		{name: 'clip', 'supported': false},
		{name: 'content', 'supported': false},
		{name: 'counterIncrement', 'supported': false},
		{name: 'counterReset', 'supported': false},
		{name: 'cue', 'supported': false},
		{name: 'cueAfter', 'supported': false},
		{name: 'cueBefore', 'supported': false},
		{name: 'cursor', 'supported': false},
		{name: 'direction', 'supported': false},
		{name: 'elevation', 'supported': false},
		{name: 'emptyCells', 'supported': false},
		{name: 'fontSizeAdjust', 'supported': false},
		{name: 'fontStretch', 'supported': false},
		{name: 'left', 'supported': false},
		{name: 'markerOffset', 'supported': false},
		{name: 'marks', 'supported': false},
		{name: 'maxHeight', 'supported': false},
		{name: 'maxWidth', 'supported': false},
		{name: 'minHeight', 'supported': false},
		{name: 'minWidth', 'supported': false},
		{name: 'orphans', 'supported': false},
		{name: 'outline', 'supported': false},
		{name: 'outlineColor', 'supported': false},
		{name: 'outlineStyle', 'supported': false},
		{name: 'outlineWidth', 'supported': false},
		{name: 'overflow', 'supported': false},
		{name: 'page', 'supported': false},
		{name: 'pageBreakAfter', 'supported': false},
		{name: 'pageBreakBefore', 'supported': false},
		{name: 'pageBreakInside', 'supported': false},
		{name: 'pause', 'supported': false},
		{name: 'pauseAfter', 'supported': false},
		{name: 'pauseBefore', 'supported': false},
		{name: 'pitch', 'supported': false},
		{name: 'pitchRange', 'supported': false},
		{name: 'playDuring', 'supported': false},
		{name: 'position', 'supported': false},
		{name: 'quotes', 'supported': false},
		{name: 'richness', 'supported': false},
		{name: 'right', 'supported': false},
		{name: 'size', 'supported': false},
		{name: 'speak', 'supported': false},
		{name: 'speakHeader', 'supported': false},
		{name: 'speakNumeral', 'supported': false},
		{name: 'speakPunctuation', 'supported': false},
		{name: 'speechRate', 'supported': false},
		{name: 'stress', 'supported': false},
		{name: 'tableLayout', 'supported': false},
		{name: 'textShadow', 'supported': false},
		{name: 'top', 'supported': false},
		{name: 'unicodeBidi', 'supported': false},
		{name: 'visibility', 'supported': false},
		{name: 'voiceFamily', 'supported': false},
		{name: 'volume', 'supported': false},
		{name: 'widows', 'supported': false},
		{name: 'zIndex', 'supported': false}
	]
};

function supports(object, featureSet)
{
	var i;
	var features = _FEATURES[featureSet];
	var level = 0;
	
	if (!features)
		return level;
		
	for (i = 0; i < features.length; i++)
		if (typeof(object[features[i].name]) != 'undefined')
		{
			features[i].supported = true;
			++level;
		}

	return Math.floor( (100 *  level) / features.length );
}

function generateReport(object, featureSet, description)
{
	var i;
	var features = _FEATURES[featureSet];

	document.write('<p><b>' + featureSet + ' support for properties/methods in ' + description + ', percentage of names defined = ' + supports(object, featureSet) + '%<\/b><\/p>');

	document.write('<table cellspacing="0">');
	for (i = 0; i < features.length; i++) 
      {
		if (features[i].supported)
 		     document.write('<tr><td>' + features[i].name + '<\/td><td>' + features[i].supported + '<\/td><\/tr>');
		else
			document.write('<tr><td>' + features[i].name + '<\/td><td style="background-color:red">' + features[i].supported + '<\/td><\/tr>');
      }
	document.write('<\/table>');
}

var oldonerror = window.onerror; // suppress error messages...
window.onerror = null;
document.write('<p><b> Your browser ' + navigator.userAgent + '<\/b><\/p>');
generateReport(document,			'DOMCORE1', 'document');
generateReport(document,			'DOMCORE2', 'document');
generateReport(document,			'DOMHTML',  'document');
generateReport(document.body.style,	'DOMCSS1',  'document.body.style');
generateReport(document.body.style,	'DOMCSS2',  'document.body.style');
window.onerror = oldonerror;

//-->
</script>

See also

Original Document Information

  • Author(s): (Unknown)
  • Last Updated Date: Updated March 16, 2003
  • Copyright Information: Copyright © 2001-2003 Netscape.
  • Note: This reprinted article was originally part of the DevEdge site.

 

Document Tags and Contributors

Last updated by: kohei.yoshino,