CSS hack

This is an old revision of this page, as edited by LLarson (talk | contribs) at 03:49, 21 December 2006 (Star HTML hack: Closing the comment). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

A CSS filter is a coding technique that aims to effectively hide or show parts of the CSS to different browsers, either by exploiting CSS-handling quirks or bugs in the browser or by taking advantage of lack of support for parts of the CSS specifications. Using CSS filters, some designers have gone as far as delivering entirely different CSS to certain browsers in order to ensure that designs are rendered as expected. Because very early web browsers either were completely incapable of handling CSS or rendered CSS very poorly, designers today often routinely use CSS filters that completely prevent these ancient browsers from 'seeing' any of the CSS. For example, CSS filters are very often put in place to exclude Netscape 4.xx and Internet Explorer 4, ensuring that only more recent 'v5' browsers 'see' the CSS.

Conditional Comments

Conditional Comments are a proprietary HTML tag supported by Microsoft Internet Explorer (version 6 onwards) that allow web developers to show or hide html code based on the version of the viewer's browser. 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. For example:

<!--[if IE 7]>
<style type="text/css">
p {text-decoration:underline;  /* Underlines paragraph text in Internet Explorer 7, but no other browser  */}
</style>
<![endif]-->

"Hacks"

"Hacks" are style definitions that exploit known peculiarities and bugs to control whether style rules are seen by a specific browser version.

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:

* html p {font-size: 5em;  /* Specifies text size in Internet Explorer 5.5 and 6, but not in any other browsers */ }
html>body hack

Internet Explorer does not support the "child selector" (>), allowing rules to be specified for all browsers except Internet Explorer. For example:

html>body p {color: blue;  /* Turns paragraph text blue in Firefox, but not in IE    */}
  • CSS Filters - A fairly complete table of CSS "hacks" which show and hide rules from specific browsers