Detecting cross browser CSS style support

Differences between browsers has been the bane of web developers ever since the second web browser was released. Although the situation is much better today than it was in the late 1990's, it is still possible to get caught out by minor differences between browsers.
Initially, web developers used the 'User-Agent' string to try and determine the type of web browser and hence what it did or did not support. This method however is difficult to maintain and is not always accurate. It is not helped by the fact that some browsers let users change the User Agent string. The Opera browser, until about version 7 or 8 even went as far as making itself appear, by default, as Internet Explorer. Thankfully, they have since stopped doing this.
A better method was to detect if certain objects or functions where available and use their existence or otherwise to determine how a script ran.
For example 'if (document.styleSheets) ...' will be true if the browser supports style sheets. This is a more robust method of detecting browser capabilities.

However, even when a browser supports style sheets, the support is not consistent across different browsers and differences can cause problems.

While writing another tutorial today, I came across a problem with differing CSS support in different browsers so I decided to see if there was a way, like the object detection, of determining if the browser displaying the supported a particular style, without resorting to using the UserAgent string

My problem was hiding and showing table columns. The 'display:inline-table' showed the column, and 'display:none' hid the column.

All was great until I tested in IE8. I could hide the columns but not display them.
'display:inline' worked in IE8, but caused problems in Opera and Firefox - when the columns where redisplayed using 'display:inline', they lost their width style, and only showed as wide as necessary to show the content.

The solution.

Create a dummy HTML element on the page somewhere, that won't be seen, or use an existing element, and make sure the initial style is what is should be.

Then, using JQuery get a reference to the test element. Then see if the relevant style has the correct value. If not, take appropriate action.
(JQuery is a JavaScript library. It is "... a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.")

In this example, IE reports the value of 'display' as 'block' rather than 'inline-table'

This should be the end of it. Unfortunately, Chrome (and presumably Safari) reports 'table-cell' here initially, although this does change to 'inline-table' if the style is later changed with JavaScript.

This spoils the principle a bit, but I'm going to guess here that such irregularities are quite rare and, in this case, could even be a bug in Chrome.

So, the detection code will either read

if ($("#testCell").css("display") == "block")

Open in new window

if ($("#testCell").css("display").indexOf("table") == -1)

Open in new window

Here is a full example to set a string to be used as a style, depending on the support for a particular CSS style, not useragent parsing or object detection.

For a more extended example, please see my related article Hiding/displaying HTML table columns on wide tables

<html>
                      <head>
                      	<style type="text/css">
                      	table td
                      	{
                      	    border:solid 1px black; 
                      	    border-collapse:collapse;
                      	    padding: 1px;
                      	}
                      	.cg1 {
                      		width:150px;
                      		display:inline-table;
                      	}
                      	
                      </style>
                       
                      <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
                      <script type="text/javascript">
                          // This value is updated when the document is loaded is inline-table style is not supported
                          var showStyle = "inline-table";
                          function cssTest() {
                              if ($("#testCell").css("display").indexOf("table") == -1) showStyle = "inline";
                              alert (showStyle);
                          } 
                      </script>
                      	
                      </head>	
                      <body onload="cssTest()">
                      	
                      	<table>
                      		<tr>
                      			<td class="cg1" id="testCell">Test Cell</td>
                      		</tr> 
                      	</table>
                       
                      </body>
                      </html>

Open in new window

Detecting cross browser CSS style support

Comments (0)