CSS compatibility: Difference between revisions
No edit summary |
No edit summary |
||
| Line 49: | Line 49: | ||
| [http://ipinfo.info/netrenderer/ IE NetRenderer] || Free || Web-based: Cross-platform || Static || Tests IE browsers only | | [http://ipinfo.info/netrenderer/ IE NetRenderer] || Free || Web-based: Cross-platform || Static || Tests IE browsers only | ||
|} | |} | ||
===Hacks and Work-Arounds=== | ===Hacks and Work-Arounds=== | ||
Revision as of 05:43, 12 December 2011
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."
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
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:
Browser Detection: 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>.
<!--[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.
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
"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."
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
Other popular CSS reset codes include Eric's Reset Reloaded.
- Workarounds, Filters, and Hacks (SitePoint)