Comments on: Essentials of CSS Hacking For Internet Explorer

By: Vitaly Friedman

Vitaly Friedman — Wed, 29 Jun 2005 19:37:54 +0000

Thanks, I've been looking for such a summary for a loooooong time now. I am willing to add it to my "Web-Dev-Bookmarks". Thanks!

By: Cecil Ward

Cecil Ward — Wed, 29 Jun 2005 10:07:25 +0000

A really useful concise article. Looking ahead, it would be helpful to add a follow-up when we have had a chance to play with the first preview versions of Internet Explorer 7, seeing as the arrival of this product will transform the landscape of hacks.(The ‘hackscape’? Would that be a useful new coinage?)

By: Chris Valenti

Chris Valenti — Wed, 22 Jun 2005 14:01:55 +0000

The write-up is excellent. (My last comment sounded cynical, but was not intended to be negative.) I’ve fixed one of my IE bugs using the “magic bullet” described here (I know I said I would “boycott”, IE…but I was just exaggerating.) Your post could not have come at the most opportune time! Thank you!

By: Tunnuz

Tunnuz — Wed, 22 Jun 2005 06:04:26 +0000

I know, and that’s the trick! Try displaying the page I provided to you and see by yourself how it works!

By: Rachel

Rachel — Tue, 21 Jun 2005 22:51:04 +0000

I’d just like to say a big thank you! I think this is definately the best and easiest to understand summary of hacks I’ve read.

By: claire

claire — Tue, 21 Jun 2005 16:33:24 +0000

Nice summary :)

IE’s support of !important is for overwriting inline styles, so as long as u have separated all the css, IE won’t ever appear to take any notice of !important.

By: Trey Piepmeier

Trey Piepmeier — Tue, 21 Jun 2005 15:10:58 +0000

Conditional comments really have been a lifesaver for me. Another very helpful technique, is the mid-pass filter. You can put the one for IE5/Win inside of the document you reference in your conditional comment for "lte IE 6", and save a little space in your HTML document, and the one for IE5/Mac is the only way to go for that browser.

By: marko

marko — Tue, 21 Jun 2005 14:26:01 +0000

Keith, thanks for clearing things out.

By: Keith Bell

Keith Bell — Tue, 21 Jun 2005 13:56:45 +0000

Marko, Jon B: underscore hack In practice, Jon B is correct. Bear in mind that, for example, _width: 100px is not the same as width: 100px. When writing _width: 100px, you are in effect creating a new property, _width, following rules allowed by the specification for valid characters and their position. But as it is neither standard CSS nor a recognised vendor-specific property, it is simply ignored by compliant browsers. However due to a bug in IE5+/Win, it does not "see" the initial underscore, and reads it as width: 100px instead of _width: 100px and sets the width of the element accordingly. Another salient part of the CSS 2.1 spec, from clause 4.1.2: "An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS. Thus typical CSS implementations may not recognize such properties and may ignore them according to the rules for handling parsing errors. However, because the initial dash or underscore is part of the grammar, CSS2.1 implementers should always be able to use a CSS-conforming parser, whether or not they support any vendor-specific extensions."

By: Jon B

Jon B — Tue, 21 Jun 2005 13:15:33 +0000

!important is supported by IE, just not in the way that it should be and hence it can be exploited. Also the underscore hack is valid but only with the _ at the beginning as I understand it.

By: marko

marko — Tue, 21 Jun 2005 12:24:59 +0000

Keith, thanks for you insight. However, I must disagree that _property: value; is correct, because then the p_r_o_p_e_r_t_y: value; would be correct also, and IE wouldn’t ignore it. From what you have quoted, it does’n say we can write CSS properties whatever way we want, it just says about which characters certain elements can contain of. This means that property -moz-radius has correct charset, even though it’s not w3c recommended property.

By: Keith Bell

Keith Bell — Tue, 21 Jun 2005 10:48:52 +0000

Marko, Jon B and Ozh: underscore hack The underscore hack fails the W3C CSS validator, but in spite of that, it IS valid CSS. According to the CSS 2.1 specification (clause 4.1.3) the initial underscore is permissible in identifiers: "In CSS 2.1, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Only properties, values, units, pseudo-classes, pseudo-elements, and at-rules may start with a hyphen (-); other identifiers (e.g. element names, classes, or IDs) may not." This freedom allows for the creation of vendor-specific extensions, as in clause 4.1.2.1 of the specification, which is likely why the validator does not recognise the construction even though it is permitted by the spec. The hack is explained neatly here. As always, there are considerations when using one browser bug to solve another, as Simon Willison points out here.

By: marko

marko — Tue, 21 Jun 2005 08:35:46 +0000

@Wayne M: IE doesn’t support !important in the following scenario:

someselector {
    property: value !important;
    same-property: another-value;
}

It will always take the last value set for the same property within the same set of rules. Apologies for not being precise.

By: Ozh

Ozh — Tue, 21 Jun 2005 08:22:17 +0000

Nice summary. Any argument on backslash hack vs underscore hack ?

By: Wayne M

Wayne M — Tue, 21 Jun 2005 07:48:27 +0000

I was always under the impression that IE did not support !important rules.

By: marko

marko — Tue, 21 Jun 2005 06:27:55 +0000

@Tunnuz: IE does support !important rules.

By: Tunnuz

Tunnuz — Tue, 21 Jun 2005 06:02:44 +0000

I rather use the Shaun Inman’s trick with the div[id=idname] (that IE does not support) to write the non-IE code, and then adding !important instruction to make non-IE instructions prevail with the other browsers :) it’s nice and cool, because IE does not support also the !important instruction so he reads only the “standard” instructions. :) clear? Try it at: http://www.csszengarden.com/?cssfile=057%2F057%2Ecss

By: Rex Chung

Rex Chung — Tue, 21 Jun 2005 05:59:36 +0000

I usually use * html .mystyle { } for IE specific styles.

By: marko

marko — Mon, 20 Jun 2005 21:41:26 +0000

@Jon B: IE 5.x will render width: 200px;, but will fail to recognize w\idth: 180px;. IE 6 on the other hand doesn’t have problems with backslashes inside property name, so it will render 180 pixels, since it’s the last rule for width property. I never worked in quirks mode, so I wouldn’t really know. Underscore hack is not valid CSS. Backslash is. User testing is usually for usability issues, browser testing is for browser issues. You can download standalone versions of Internet Explorer from skyzyx.com.

By: Jon B

Jon B — Mon, 20 Jun 2005 21:13:07 +0000

Your write up on the “Backslash hack for IE 5.x broken box model” doesn’t mention that IE6 when given a correct doctype will actually use the correct box model and this hack will break it.

Also as far as I was aware you can’t put the backslash before an “i” – there are certain letters that mean something else when escaped.

Plus I thought the backslash hack only worked in IE6 and the underscore hack worked in IE5+.

I would be greatful for some user tests and clarification on these things. I don’t have IE5 so I can’t check it.