CSS hack

A CSS Filter is a coding technique used to hide or show CSS markup depending on the browser's brand and/or version number. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. Web developers will implement CSS Filters when attempting to achieve consistent layout appearance in browsers that do not have a consistent CSS behavior.

Some of these CSS Filters make use of expected tags called Conditional Comments to denote special instructions. Other developers have exploited the rendering flaws of certain browsers when Conditional Comments were not available or were perceived to be a better solution at the time.

The practice of exploiting rendering flaws in different browsers is commonly referred to as CSS Hacks. These hacks may provide desired results across all the browsers the developers chooses to support at the time, however, they may not have the same results when new browsers are released.

Conditional Comments

Conditional Comments are supported by Microsoft Internet Explorer (version 5 or greater[1]). They allow web developers to show or hide HTML code based on the version of the viewer's browser.

There are two types of conditional comments, downlevel revealed which is a proprietary Microsoft HTML tag and downlevel hidden which are ignored by non Microsoft browsers because they are treated as a standard comment.

Conditional comments can be used to hide certain styles from a specific browser, or even to supply a tailored style sheets for individual browser versions.

Below is an example of a "downlevel hidden" conditional comment:

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7only.css">
<![endif]-->

or

<!--[if lte IE 7]>
<style>
some css tags
</style>
<![endif]-->

This tag will let IE 7 read the specified CSS file while IE 6 or less will ignore it. Browsers other then IE will also ignore it because it looks like a standard HTML comment. With different uses of this tag you can also single out IE 6, IE 5, or versions of IE that are greater or lesser then a specified version.

Below is an example of a "downlevel revealed" conditional comment:

<![if !IE]>
<link rel="stylesheet" type="text/css" href="non-ie.css">
<![endif]>

This is recommended by microsoft for when the content should be exposed to non-IE browsers.

Microsoft acknowledges this method is not standardized markup for comments[2], intending these tags to be overlooked by other browsers and expose the content in the middle. Some web developers use an alternative technique[3] for downlevel-revealed conditional comments in order to only use standardize markup.

<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="non-ie.css">
<!--<![endif]-->

Adding the dashes before and after each if statement tag completes them as a valid HTML comment and leaves center code open to rendering on non-IE browsers.

While this method is functional in current versions of Internet Explorer, there is no guarantee that future versions will continue to operate this way.

Note: Internet Explorer 4 and below do not support conditional comments.

"Hacks"

"Hacks" are style definitions that exploit known peculiarities and bugs to control whether style rules are seen by a specific browser version. Care should be taken when using hacks: website authors should check that hacks still work as intended when new version of browsers are released.

Import Hacks

The @import statement is not supported at all in Netscape 4, so many sites will import their real stylesheets from a small inline stylesheet to hide it from IE. IE 5 mac has parsing bugs related to the import statement.

Parsing Hacks

There are many hacks based on CSS parser bugs in particular browsers, particularly parsing of comments, and backslash-escaping.

Commented Backslash

This hack uses a bug in Internet Explorer for Mac related to comment parsing. A comment ending in "\*/" is not properly closed in IE Mac, so rules that need to be ignored in IE mac can be placed after such a comment. Another comment is needed after the rule to close the comment for IE mac.

/* Ignore the next rule in IE mac \*/
selector { ...styles... }
/* Stop ignoring in IE mac */

"Box Model Hack"

Called the "Box Model Hack" because the bug it is most often used to work around is the Internet Explorer box model bug, this hack provides a different set of properties to IE and other browsers.

#elem { 
  width: [IE width]; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width: [Other browser width];
}
html>body #elem {
  width:[Other browser width];
} 

The first "voice-family" statement is set to the string '"}"', but an IE parser bug will interpret it as a string with a single backslash followed by a } for the end of the rule. voice-family is chosen because it will not affect rendering on a screen stylesheet. The second rule uses the html>body hack for browsers such as Opera 5 that have the parsing bug but do not have the box model bug (and, additionally, which support the child selector)

Selector Hacks

Star HTML hack

The html element is the root element of the W3C standard DOM, but Internet explorer versions 5.5 and 6 include a mysterious parent element. Fully-compliant browsers will ignore the * html selector, while IE 5.5 and 6 will process it normally. This enables rules to be specified for these versions of Internet Explorer which will be ignored by all other browsers. For example, this rule specifies text size in Internet Explorer 5.5 and 6, but not in any other browsers.

* html p {font-size: 5em; }

html>body hack

Versions of Internet Explorer before version 7 do not support the "child selector" (>), allowing rules to be specified for all browsers except Internet Explorer. For example, this rule will turn paragraph text blue in Firefox, but not in IE.

html>body p {color: blue; }

Negation pseudo class hack

All versions of Internet Explorer and Opera do not support the "negation pseudo class" (not()).

.yourSelector {
color: black;
} /* values for IE */

html:not([dummy]) .yourSelector {
color: red;
} /* values for Safari and Firefox */

@media all and (min-width: 0px) { #adminmenu a {
color: blue;
} } /* values for Opera */

Criticisms of Hacks

Hiding code using hacks often leads to pages being incorrectly displayed when browsers are updated. Many Hacks that used to hide CSS from Internet Explorer 6 and lower no longer work in Internet Explorer 7 due to Internet Explorer 7 improved support for CSS standards. The Microsoft Internet Explorer development team have asked that people use conditional comments instead[4] of hacks.

External links

• CSS Filters - A fairly complete table of CSS "hacks" which show and hide rules from specific browsers