Good CSSHack

From CSS Discuss

Jump to: navigation, search


The Attributes of a Good CSS Hack

As new Css Hacks appear constantly, we must make sure that, if we must use them, our CSS hacks will not do more harm than good. This document outlines some qualities of a "good" CSS hack. A good CSS hack...

Does not penalize browsers with better CSS parsers (future-proof)

Have in mind an ideal style sheet (meaning what you would serve to a 100% compliant browser) and make sure more compliant parsers will always result in use of your ideal values, rather than fudged ones.

In simple selector hacks, always have the ideal ruleset applied to the most specific selector, and use equal care not to invalidate your SS when taking advantage of comment and escaped character parsing bugs.

The following hack is future-proof because all future (more compliant) UAs will apply the second rule.

body {
  margin: -10px 0 0 -10px; /* fudged value */
body {
  margin: 50px; /* ideal value by more specific selector */

Uses valid syntax, and standard properties and values

Although UAs should ignore rules with non-standard properties or unrecognized values, this is not always the case due to lenient and less-fault-tolerant parsers.

The following ruleset is on the fence because the non-standard value "hand" could potentially lead to an error in an otherwise compliant parser.

#myPointer {
  cursor: hand; /* for IE/win */
  cursor: pointer; /* ideal value */

Does not leave a style sheet difficult to maintain

This is more of a usability issue for CSS authors. For a style sheet to be maintained by a human, it must remain human-understandable. Strange-looking hacks (like most versions of the Box Model Hack) should be well-documented, and, in general, all the values of the "ideal" style sheet should be clear.

body {
  margin: -10px 0 0 -10px;
  /* ideal: */} html body {
  margin: 0;

In particular, although the Import Hack is very useful, it can leave the set of "ideal" rulesets scattered across 2 or more files, creating somewhat of hassle for the author. Making a change to the linked SS may or may not affect compliant browsers, so the author is forced to view the imported file to see if the property is defined there.

As CSS authoring tools improve, this will be less of an issue. For example, when viewing a linked SS, a tool could automatically display the "compliant" value (computed by correctly parsing multiple CSS files) next to the currently selected rule.-

Personal tools