Detecting cross browser CSS style support

Published on
9,906 Points
1 Endorsement
Last Modified:
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

	<style type="text/css">
	table td
	    border:solid 1px black; 
	    padding: 1px;
	.cg1 {
<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);
<body onload="cssTest()">
			<td class="cg1" id="testCell">Test Cell</td>

Open in new window


Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Join & Write a Comment

This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month