Detect browser support for style properties

It is common to use object detection to discriminate between browser capabilities (See Quirksmode: Object Detection.

However, sometimes it is necessary to detect whether or not a browser understands a particular CSS style property, and it is not obvious how to do this.

You can’t test for the existence of the property directly but you can test for the data type of the value of the property. If the data type is anything but “undefined”, the property is understood by the browser.

The example below shows a couple of rows from an automatically generated table of items. Each row has a corresponding editable version which shows up when the “edit” button is clicked. The original, non-editable row is hidden at the same time the editable row is displayed. If “display=’block” is used to display the TR, Safari will render it as a TD. To correct this, “display=’table-row” must be used on browsers that understand it.

A non-editable row, with edit and delete buttons.

When edit button is clicked, the non-editable version is hidden, and the editable version appears.

If display=”block” is used to display the editable row, Safari and Firefox will interpret the TR as a single cell – probably correctly from a standards point of view – so “display=’table-row'” must be used for those browsers.

IE6 renders it as a TR, as intended, and does not understand the “display=’table-row'” property, so “display=’block'” must be used for IE6.

A simplified version of the HTML source of the 2 rows is shown below:

<table border="1"> 
  <tr id="resultTR1" bgcolor="#CCC"> 
<td>Data goes here. &nbsp; <a href="javascript:editMe(1);">Click to edit this row</a></td> 
</tr>

<tr id="editTR1" style="display:none" > 
<td><form name="form1"><input type="text">Data goes here.</input>  &nbsp; <a href="javascript:form1.submit();saveMe(1);">Click to save this row</a></form></td> 
</tr> 
</table>

which creates a table with two rows, one of which is hidden until clicked:

Data goes here.

Data goes here.