CSS compatibility: Difference between revisions
| Line 59: | Line 59: | ||
===Hacks and Work-Arounds=== | ===Hacks and Work-Arounds=== | ||
====Browser Detection | ====Browser Detection: Hacks==== | ||
The problem with hacks is that, naturally, they often do not validate. | The problem with hacks is that, naturally, they often do not validate. | ||
=====Hack #1: The Backslash===== | =====Hack #1: The Backslash===== | ||
Revision as of 13:30, 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
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 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
.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 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:
- Workarounds, Filters, and Hacks (SitePoint)