Browser Feature Detection - Archive of obsolete content

Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

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.

This article has generally never been more than a way to show off Firefox Web compatibility, rather than something truly informative in a broader sense. Therefore, given that it's also badly out of date, it's been archived. You should not rely on any information here.

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
`Document.doctype`	true	true	true
`Document.implementation`	true	true	true
`Document.documentElement`	true	true	true
`Document.createElement()`	true	true	true
`Document.createDocumentFragment()`	true	true	true
`Document.createTextNode()`	true	true	true
`Document.createComment()`	true	true	true
`Document.createCDATASection()`	true	false	true
`Document.createProcessingInstruction()`	true	false	true
`Document.createAttribute()`	true	true	true
`Document.createEntityReference()`Obsolete since Gecko 7	(method present but only returns null: ~~bug 9850~~)	false	false
`Document.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
`Document.doctype`	true	true	true
`Document.implementation`	true	true	true
`Document.documentElement`	true	true	true
`Document.createElement()`	true	true	true
`Document.createDocumentFragment()`	true	true	true
`Document.createTextNode()`	true	true	true
`Document.createComment()`	true	true	true
`Document.createCDATASection()`	true	false	true
`Document.createProcessingInstruction()`	true	false	true
`Document.createAttribute()`	true	true	true
`Document.createEntityReference()`Obsolete since Gecko 7	true	false	false
`Document.getElementsByTagName()`	true	true	true
`Document.importNode()`	true	false	true
`Document.createElementNS()`	true	false	true
`Document.createAttributeNS()`	true	false	true
`Document.getElementsByTagNameNS()`	true	false	true
`Document.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
`Document.documentElement`	true	true	true
`Document.createElement()`	true	true	true
`Document.createDocumentFragment()`	true	true	true
`Document.createTextNode()`	true	true	true
`Document.createComment()`	true	true	true
`Document.createAttribute()`	true	true	true
`Document.getElementsByTagName()`	true	true	true
`Document.title`	true	true	true
`Document.referrer`	true	true	true
`Document.domain`	true	true	true
`Document.URL`	true	true	true
`Document.body`	true	true	true
`Document.images`	true	true	true
`Document.applets`	true	true	true
`Document.links`	true	true	true
`Document.forms`	true	true	true
`Document.anchors`	true	true	true
`Document.cookie`	true	true	true
`Document.open()`	true	true	true
`Document.close()`	true	true	true
`Document.write()`	true	true	true
`Document.writeln()`	true	true	true
`Document.getElementById()`	true	true	true
`Document.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

// 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;

Original Document Information

Author(s): (Unknown)
Last Updated Date: Updated March 16, 2003
Note: This reprinted article was originally part of the DevEdge site.

Browser Sniffing via API Name Detection

Test Summary

Test Results Cross Reference

DOM Core Level 1

DOM Core Level 2

DOM Level 1 HTML

DOM CSS 1

DOM CSS 2

Test Code

See also

Original Document Information