History

Definition of "Hack"

A "hack" in our case means:

A piece of HTML, CSS and/or JS code that will be interpreted by one or more of the supported browsers while being ignored by the others.

This has to be avoided if we want to get valid and clean code that won't break the output in future versions of any of the supported browsers.
Especially when it comes to hacks that make use of certain browser bugs you should avoid these hacks under all circumstances.
If there is any other solution available, do it that way instead of using a hack.

Try to avoid
  • Conditional Comments
  • CSS expressions
  • html*
  • * html
  • * + html
  • X-UA-Compatible Meta-Tags
  • CSS3 selectors
  • pound past semicolon
  • double slash, single quote background url

or the like!

You might say that "modern" browsers already support CSS3, but this again is not our business, since for the upcoming versions of TYPO3 IE6 is setting the lowest common denominator.
Frankly said this means: Anything that is not going to work in IE6 must be avoided whereever possible!

There might be some exceptions, i.e. when it comes to transparent PNG based icons or other stuff that is really necessary for the other teams working on the backend output and doesn't work in IE6 without hacks, but you should try to stick to the "no hacks" rule as long as possible.

Possible workarounds especially for IE6 bugs

  • Don't use padding and width/height for the same element
  • Use position:absolute or display:inline-block instead of float wherever possible
  • Use display:inline-block for "natural" inline elements (like span) only, since it won't work with block elements in IE6
  • Use float:left and float:right with proper width instead of float:left only and margin-right to position 2 column elements side by side
  • If you had to use float, use a clearing HTML element instead of the clearfix hack
  • Use zoom:1 or display:inline-block to trigger "hasLayout"
  • Use filter for transparent PNG files