CSS compatibility: Difference between revisions

Revision as of 11:03, 28 November 2011

Browser Compatibility References and Tables

When Can I Use...

This website is a good reference that shows compatibility for HTML5, CSS3, and SVG the most commonly used browsers, for both desktop and mobile

Cross Browser Compatibility Tools

These tools are divided into two kinds: paid, and free tools. However most non-paid tools do not work for Mac OS. When they do, they offer limited use, such as only providing static screenshots of a webpage on the requested browser. On the other hand, most paid tools provide their paying users with remote test machines which they can access to dynamically check browser compatibility.

Xenocode Browser Sandbox

Free
Windows only
Dynamic testing

BrowserCam

Paid
Web-based: Cross-platform
Flexible browser/OS combinations available to test, including mobile devices
Dynamic and static testing

Cross Browser Testing

Paid
Web-based: Cross-platform
Dynamic and static testing

Litmus: Alkaline

Paid: 8 different browsers - Free: IE 7 and Firefox 2 only
Mac only
Static testing (screenshots only)

Browser Shots

Free
Web-based: Cross-platform
Wide selection of browsers available to test
Static testing (screenshots only)

IE Tester

Free
Computer software: Windows only
Tests IE browsers only
Dynamic testing

IE NetRenderer

Free
Web-based: Cross-platform
Tests IE browsers only
Static testing (screenshots only)

Adobe BrowserLab

Paid
Web-based
Static testing (screenshots only)

Hacks and Work-Arounds

Browser Detection

Hacks

The problem with hacks is that, naturally, they often do not validate.

Hack #1: The Backslash

This is a valid hack that uses the backslash as a character escape. Most modern browsers would disregard the backslash and accept the CSS declaration. However IE 5.5 and its predecessors would ignore the entire declaration altogether. **The backslash hack will not work at the beginning of the the property declaration, or before a/A --> f/F, or before 0 --> 9

.test {
  height: 500px;
  he\ight: 400px;
}

Hack #2: The Underscore

This is another valid CSS hack. It uses the underscore(_) at the beginning of a property declaration in order to have it ignored by the browser. This hack is directed IE 6 and pre-IE 6 browsers, which disregard the underscore and apply the property anyway. Most other browsers ignore the property when preceded by an underscore.

.test {
  position: fixed;
  _position: absolute;
}

Hack #3: The Voice-family Hack

This hack uses the code voice-family:"\"}\"" to end the declaration in IE 5 and omit subsequent properties. However, the same result occurs in Opera, so adding the following code at the end html>body .test{width: 400px;} would give the possibility to re-define omitted code for Opera only.

.test {
  width: 500px;
  padding: 50px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 400px;
}
html>body .test{
 width: 400px;
}

Hack #4: The Star Selector Hack

This hack uses the star selector on the html element. The trick lies in the fact that html is a root element and cannot be a descendant of anything, so most standard compliant browsers will rightfully ignore the element all together. While IE 5 and IE 6 will accept it.

.element {
width: 300px;
padding: 0 10px;
}

* html .element {
width: 320px;
}

More specifics on how hacks work

Here is a list of some browser specific CSS hacks

browser hack support table1 browser hack support table2

Conditional comments

The drawback in using conditional comments for alternate browser specific stylesheets is that there will be multiple HTTP requests to download. Plus, the page will have to wait for them to be completely loaded before displaying since they are located in the <head>.

<!--[if IE]>
        <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

The better way to use conditional comments is to define a specific css class that addresses a specific browser. This avoids linking to other css files which will create more HTTP requests, and will still allow your css to validate.

<!--[if IE 6 ]> <html class="ie6"> <![endif]-->  
<!--[if (gt IE 6)|!(IE)]><!--> <html> <!--<![endif]-->

And then, in the same css file, identify the class like this:

.ie6 #footer {  
        color: #111000;  
}

Some developers are reluctant to use conditional comments too liberally, stating that it is not good practice to so easily resort to the complete disregard of IE in the main css design. Some suggest that most issues be solved by writing clear and specific code, and that this should be enough to solve most issues that arise on IE7+. After exhausting these options, it may be acceptable to use conditional comments for browser detection.

Script Browser Detection: