CSS compatibility
About
What's on this page?
This page is intended as an overview of CSS browser compatibility. It includes links and brief discussions on various topics covering the state of CSS handling across all major web browsers that are currently in use. Since not all browsers share the same rendering engine, there are differences in how they handle the visual representation of websites based on Cascading Style Sheets. This page contains information on the ways and tools people have found/created to help them deal with these discrepancies.
Why care about CSS compatibility?
CSS provides a standardized way to style websites. In order for this standardization to have meaning, all web browsers must implement robust support for it. The ultimate goal is for any properly CSS-styled website to retain a consistent visual representation regardless of which browser is used and on which computing platform.
What about mobile devices?
Mobile devices present a new and different challenge in the present context. Because screen sizes are significantly smaller on mobile phones as well as tablet computers, websites that aim to be accessible on such devices must adapt their designs to accommodate this change in screen size. A website that is optimized for viewing on a laptop or desktop computer will not load as quickly, look as good or be as user-friendly on a mobile device with a smaller screen. The solution is to create a mobile version of the site that is optimized for viewing on small screens.
Within the scope of mobile devices, however, the same ultimate goal described above applies: universally consistent visual representation across different devices running different browsers.
Browser Compatibility References and Tables
This page is intended as an overview of CSS browser compatibility. It includes links and brief discussions on various topics covering the state of CSS handling across all the major web browsers that are currently in use. Since not all browsers share the same rendering engine, differences arise in how they handle the visual representation of websites based on Cascading Style Sheets. With the ultimate goal of having any website's look remain consistent across any given combination of computing platform and browser, CSS compatibility is an extremely important topic for anyone involved in website design.
A Handful of Links to Websites Tracking Browser Compatibility for Modern Web Technologies
When Can I Use...
This website is a good reference that shows the state of compatibility for HTML5, CSS3, and SVG in the most commonly used browsers, for both desktop and mobile.
Quirksmode
quirksmode.org describes itself as "... the prime source for browser compatibility information on the Internet." "QuirksMode.org is the home of the Browser Compatibility Tables, where you’ll find hype-free assessments of the major browsers’ CSS and JavaScript capabilities, as well as their adherence to the W3C standards."
Web Browser Standards Support
Similar to When Can I Use... and quirksmode.org, Web Browser Standards Support aims to "... summarize the level of support for web standards and maturing technologies in popular web browsers. It covers the Internet Explorer, Firefox, and Opera web browsers, with focus on the HTML, CSS, DOM, and ECMAScript technologies."
haz.io
By far the prettiest of the bunch, haz.io is a Modernizr-powered partner site to the web development tool kit of the same name. It will show the compatibility with modern web technologies of whichever browser is used to view the page.
Cross Browser Compatibility Tools
These tools are divided into two kinds: paid, and free. Most non-paid tools, however, do not work for Mac OS. When they do, they are of limited use, such as providing only static screenshots of a webpage on the requested browser rather than a live-preview that uses the browser's rendering engine. On the other hand most paid tools provide their paying users with remote test machines which they can access to dynamically check browser compatibility, making them platform-independent.
| Name | Price | Platform | Type of Testing | Other |
|---|---|---|---|---|
| Xenocode Browser Sandbox | Free | Windows | Dynamic | - |
| BrowserCam | Paid | Web-based: Cross-platform | Dynamic and static | Flexible browser/OS combinations available to test, including mobile devices |
| Cross Browser Testing | Paid | Web-based: Cross-platform | Dynamic and static | - |
| Litmus: Alkaline | Paid and Free (see "Other") | OS X | Static | Paid: 8 different browsers - Free: IE 7 and Firefox 2 only |
| Browser Shots | Free | Web-based: Cross-platform | Static | Wide selection of browsers available to test |
| IE Tester | Free | Windows | Dynamic | Tests IE browsers only |
| Adobe BrowserLab | Paid | Web-based: Cross-platform | Static | - |
| IE NetRenderer | Free | Web-based: Cross-platform | Static | Tests IE browsers only |
Hacks and Work-Arounds
Hacks are unsupported, non-standard uses and/or implementations of otherwise standardized programming/scripting or markup languages such as HTML and CSS, among others. Hacks are dangerous, though it is important to acknowledge their existence. For a great discussion of the dangers and meaning of CSS hacks, see Peter-Paul Koch's (creator and maintainer of quirksmode.org) article entitled Keep CSS Simple. See this section for examples of CSS hacks.
Browser Detection
Hacks
A natural problem of using hacks is documents that use them will, in most cases, not pass validation testing.
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
.element {
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.
.element {
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.
.element {
width: 500px;
padding: 50px;
voice-family: "\"}\"";
voice-family: inherit;
width: 400px;
}
html>body .element{
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;
}
Hack #5: The Commented Backslash Hack
This hack is directed at IE 5 for Mac. By placing a backslash at the end of a comment, IE5 for Mac thinks that the comment is ongoing, and would continue to the end of the next comment. Other browsers will see that the comment has ended in spite of the backslash. The backslash can also be used to create a declaration that is only read by IE 5 for Mac.
/* hide from IE5 Mac \*/
.element {
color: red;
}
/* end */
/* apply ONLY to IE5 Mac \*//*/
.element {
color: red;
}
/* end */
Hack #6: The High Pass Filter
This is another valid CSS hack. This hack targets browsers older than Internet Explorer 6, Internet Explorer 5 for Mac, Netscape 6, and Opera 5. The purpose of the hack is to block certain browsers from loading an entire stylesheet.
@import "null.css?\"\{";
@import "highpass.css";
Go to Sitepoint.com for more about these hacks
Here is another list of some browser specific CSS hacks
Browser Hack Support Tables
To check whether certain hacks affect specific browsers, and how they do so, you can refer to 'browser hack support tables.' Here are some links to such tables:
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 load completely before displaying since they are located in the <head> block.
<!--[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.
Scripts
Browser detection has been a very important issue over the years. As a result, these days there are many advanced ways to accomplish the task. For example, Javascript and PHP methods have been developed to tackle this precise problem.
Modernizr
By providing a carefully constructed library, Modernizr makes it relatively simple to take advantage of the latest CSS3 and HTML5 features, regardless of what browser/platform combination is used to visit a website. It's an extremely valuable tool in the ever-raging battle for cross-browser and cross-platform compatibility.
"Modernizr is an open-source JavaScript library that uses a script that detects native CSS3 and HTML5 features available in the current User Agent(UA) and provides an object containing all features with a true/false value, depending on whether the UA has native support for it or not."
'Modernizr will also add classes to the element of the page, one for each feature it detects. If the UA supports it, a class like "cssgradients" will be added. If not, the class name will be "no-cssgradients". This allows for simple if-conditionals in your CSS, giving you fine control over the look & feel of your website."
Descriptions taken from the Modernizr website.
HTML5 BOILERPLATE
Similar in concept to Modernizr, HTML5 BOILERPLATE describes itself best:
HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site.
After more than three years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.
Boilerplate is not a framework, nor does it prescribe any philosophy of development, it's just got some tricks to get your project off the ground quickly and right-footed.
CSS Reset
The purpose of reseting CSS is to standardize rendering across browsers in order to neutralize the inconsistent default styling of HTML elements in browsers' built-in stylesheets.
Yahoo! YUI Resest
Yahoo has developed their own suggested YUI CSS Reset code for this same purpose.
Eric's Reset
Among other popular CSS reset codes, there's Eric's Reset Reloaded.
Mobile Testing
Valuable External Links On Topics Covered
- Workarounds, Filters, and Hacks (SitePoint)