CSS compatibility
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
Quirksmode
Web Browser Standards Support
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 do not validate.
Here is a list of browser specific hacks:
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
Here is the reference to the original post
Conditional comments
The drawback in using conditional comments to use alternate, browser specific stylesheets is that there will be multiple HTTP requests to download. Plus, the page will wait for them to be completely loaded before displaying the page since they are located in the
<head>
.
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
Script Browser Detection:
- Workarounds, Filters, and Hacks (SitePoint)