Browser Feature Detection

  • Revision slug: Browser_Feature_Detection
  • Revision title: Browser Feature Detection
  • Revision id: 165011
  • Created:
  • Creator: CitizenK
  • Is current revision? No
  • Comment

Revision Content


Summary: An experimental approach to discovering degree of support for Standards 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.

The results of this test are very illustrating when run using Netscape 7.0x, Internet Explorer 6, and Opera 7.

It is clear from the results of these preliminary tests that Netscape 7.0x/Mozilla has the greatest support, that Internet Explorer 6 and Opera 7 have sufficient support to enable cross browser web development.

Test Summary for Netscape 7.0x, Internet Explorer 6 and Opera 7
Standard Netscape 7.0x Internet Explorer 6 Opera 7
DOM Core 1 100% 75% 75%
DOM Core 2 100% 58% 70%
DOM HTML 100% 100% 100%
DOM CSS 1 100% 96% 100%
DOM CSS 2 100% 38% 71%

Test Results

<script language="javascript1.2" type="text/javascript">function generateReport(object, featureSet, description) { var i; var features = _FEATURES{{mediawiki.external('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++) document.write('<tr><td>' + features{{mediawiki.external('i')}}.name + '<\/td><td>' + features{{mediawiki.external('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>

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.

Revision Source

<p><br>
<span class="comment">Summary: An experimental approach to discovering degree of support for Standards</span>
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.
</p>
<h3 name="Browser_Sniffing_via_API_name_detection"> Browser Sniffing via API name detection </h3>
<p>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.
</p><p>The results of this test are very illustrating when run using Netscape 7.0x, Internet Explorer 6, and Opera 7.
</p><p>It is clear from the results of these preliminary tests that Netscape 7.0x/Mozilla has the greatest support, that Internet Explorer 6 and Opera 7 have sufficient support to enable cross browser web development. 
</p>
<table cellspacing="0" class="standard-table">
    <caption>Test Summary for Netscape 7.0x, Internet Explorer 6 and Opera 7</caption>

      <tbody><tr>
        <th>Standard</th>
        <th>Netscape 7.0x</th>
        <th>Internet Explorer 6</th>
        <th>Opera 7</th>
      </tr>

      <tr>
        <td>DOM Core 1</td>
        <td>100%</td>
        <td>75%</td>
        <td>75%</td>
      </tr>
      <tr>
        <td>DOM Core 2</td>
        <td>100%</td>
        <td>58%</td>
        <td>70%</td>
      </tr>

      <tr>
        <td>DOM HTML</td>
        <td>100%</td>
        <td>100%</td>
        <td>100%</td>
      </tr>
      <tr>

        <td>DOM CSS 1</td>
        <td>100%</td>
        <td>96%</td>
        <td>100%</td>
      </tr>
      <tr>
        <td>DOM CSS 2</td>
        <td>100%</td>
        <td>38%</td>
        <td>71%</td>
      </tr>
  </tbody></table>
<h3 name="Test_Results"> Test Results </h3>
<p>&lt;script language="javascript1.2" type="text/javascript"&gt;<span class="comment">function generateReport(object, featureSet, description) { 	var i; 	var features = _FEATURES{{mediawiki.external('featureSet')}};  	document.write('&lt;p&gt;&lt;b&gt;' + featureSet + ' support for properties/methods in ' + description + ', percentage of names defined = ' + supports(object, featureSet) + '%&lt;\/b&gt;&lt;\/p&gt;');  	document.write('&lt;table cellspacing="0"&gt;'); 	for (i = 0; i &lt; features.length; i++)	 		document.write('&lt;tr&gt;&lt;td&gt;' + features{{mediawiki.external('i')}}.name + '&lt;\/td&gt;&lt;td&gt;' + features{{mediawiki.external('i')}}.supported + '&lt;\/td&gt;&lt;\/tr&gt;');  	document.write('&lt;\/table&gt;'); }  var oldonerror = window.onerror; // suppress error messages... window.onerror = null; document.write('&lt;p&gt;&lt;b&gt; Your browser ' + navigator.userAgent + '&lt;\/b&gt;&lt;\/p&gt;'); 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;  //</span>&lt;/script&gt;
</p>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author(s): (Unknown)
</li><li> Last Updated Date: Updated March 16, 2003
</li><li> Copyright Information: Copyright © 2001-2003 Netscape.
</li><li> Note: This reprinted article was originally part of the DevEdge site.
</li></ul>
</div>
Revert to this revision