CSS Hacks- The good, the bad, and the ugly
This tutorial is written by David Hammond, a 20-year-old web technology enthusiast from California who is currently juggling this site, work, college, and other pet projects. He mantains the site Web Devout educating people on web development and standards.
Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately. The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences.
Due to its relatively poor level of standards support, Internet Explorer tends to be the subject of most CSS hacks. Luckily, as of version 5, it deliberately supports a rather safe-to-use hack called "conditional comments". Conditional comments are specially constructed HTML comments that Internet Explorer on Windows may treat differently from other browsers, optionally based on IE's version number. They can cause Internet Explorer to ignore the markup between comments or to include part of a comment as if it was regular markup. Conditional comments apply specifically to browsers using Internet Explorer's Trident layout engine, meaning IE-based browsers like Maxthon and Avant handle them like Internet Explorer does while browsers using other layout engines see them simply as regular comments. Internet Explorer on the Mac uses a different layout engine and doesn't support conditional comments.
The most beneficial aspect of conditional comments is that you are not relying on browser bugs when using them. When you use CSS hacks that rely on browser bugs, you run into the possibility of those bugs being fixed at an unwanted time or other browsers showing the same bugs. Conditional comments only work in browsers that specifically support them and claim to be based on Internet Explorer, which in this case all known browsers are honest about.
There are two forms of conditional comments: positive and negative. A positive conditional comment will expose the included markup only to web browsers that match the condition (meaning only the selected versions of Internet Explorer). A negative conditional comment will expose the markup only to web browsers that don't match the condition (meaning all non-IE web browsers and any versions of IE that the condition didn't match). Note that, since versions of IE older than IE 5 don't support conditional comments, you may get unexpected results in those browsers.
The syntax for conditional comments is as follows:
condition is one of the following:
version is the version of Internet Explorer, typically
HTML is the HTML to be included if the condition does or doesn't match, depending on the type of conditional comment. When included, the HTML is placed right where the conditional comment is in the source.
For negative conditions,
Fixing stand-alone versions of Internet Explorer
Internet Explorer was not designed to allow multiple versions to be installed at once, and Microsoft doesn't officially support any such configurations. If you use one of the hacked third party packages that attempts to do this, you will experience problems with version-specific conditional comments, among other things. This is because the different stand-alone copies still rely on a common centralized registry for certain data, including version information.
Although there is no simple way to cut through all of the issues with
stand-alone versions of Internet Explorer, it is possible to force them to
look elsewhere for their version information, thus fixing this issue with
conditional comments. The trick is to remove the normal centralized version
indicator. To do this, first open up
Stand-alone versions of Internet Explorer have a number of other issues, and it therefore may be better to instead use a separate virtual machine for each version of Internet Explorer to ensure that what you see is what your users will see. I recommend VMware Server, which is completely free of charge and fairly easy to set up.
Conditional comments as a CSS hack
Conditional comments can be used as a CSS hack by including links to stylesheets based on the layout engine. Here is an example of how stylesheets can be separated in this way:
In the above example,
See also: Conditional Comments of IE