Internet Explorer Filter or Hack Using Character Escapes

Jens Meiert, January 9, 2007 / June 16, 2008.

This entry is filed under Web Development.

Searching for a valid and “safe” way to circumnavigate some nasty problems in Internet Explorer I digged out this – known? – filter that does not work in any IE version (including IE 7, that is):

html[lang='\
en'] {}

The “hack” simply takes advantage of the CSS syntax. Apparently, all Internet Explorer versions fail to support character escapes in strings, at least in this construction, though technically, it is valid CSS. (And presumably, you can tinker your own hack by considering this “character escapes in strings” approach yet.)

Example

HTML

<html lang="en" />

CSS

html[lang='\
en'] body {
  background: green;
}

… will result in green document background in all newer browsers except IE.

Notes

On usage: As far as I remember both spec and tests,

the filter needs a consecutive selector (the example uses body);
the second row must not be indented.

On drawbacks:

Obviously, the proposed use of this hack attaches you to the language of the affected documents, as defined by the lang attribute. In many cases, this might be okay, but it can also become a problem (that might be addressed by either selector grouping or a simple selector modification that does not depend on lang).
Most important, please be aware that this is not really a safe filter or workaround or hack! For starters, read Peter-Paul Koch’s article on hacks and stuff to receive an impression of the problem.

Tested In …

In alphabetical order. Tested with whatever was in cursor reach.

Windows

Firebird 0.7
Firefox 2.0.0.1
Internet Explorer 5.0 (selector does not match)
Internet Explorer 6.0 (selector does not match)
Internet Explorer 7.0 (selector does not match)
Mozilla 1.0.2
Mozilla 1.7.13
Opera 6.06
Opera 7.54
Opera 9.0

Mac

Firefox 2.0.0.1
Safari 2.0.4

PS.

I don’t like such stuff, either, I just happen to test and play a lot while building complex web sites. And please, never ever tell me to use “Conditional Comments”. It’s still not worth it …

Enjoy the most popular posts, probably including:

Comments

On January 31, 13:02 CET, Jens Nedal said:

The only gripe i have with css hacks is, that once browsers become more compliant, some of those hacks will not work anymore, as we saw that with the release of IE 7.

I like Tantek Çelik’s thoughts in that direction, calling the CSS hacks a pandora’s box, which he participated in opening.

Concerning hacks vs. conditional comments. Both are not compliant (hacks in most cases). With hacks you utilize rendering bugs in some browsers to exclude them. With conditional comments you do it the other way round.

The fact information that whatever appears between comments has no special meaning, is correct too, since all compliant browers will ignore those comments and only IE will accept them. So using those comments is actually compliant, since the compliant browers will ignore the information totally.

Until the world consists of compliant browsers only, i think both hacks and conditional comments are the way to help, when one knows the consequences.

regards, Jens Nedal
On January 31, 14:01 CET, Jens Meiert said:

Jens – thank you for your remarks, and it’s indeed important to point out the risks of using CSS “hacks”.

Regarding “Conditional Comments”, well, don’t use them anyway, not only because they are unstandardized and not even compliant to the HTML specification, but rather because you may want to avoid to change the HTML of your documents at all costs. CSS filters at least keep the advantage that you can adjust your style sheets once that is desired. Or necessary.

(I keep this short since I’ll write about that stuff in more detail soon.)
On February 5, 18:04 CET, Barney said:

@Jens N.:

There is a fundamental failure in this thinking. IE7 is a radically different browser and should not inherit crucial IE6 hacks (eg: * html) for the good of the developers or hack users. It has not, thank God.

IE6 has been radically superseded by IE7, and as such is no longer updated, rather replaced. Those who still use IE6 will still benefit from IE6 hacks. This is for the good of developers and hack users, and is also true.

The hypothetical problem often presented by people opposed to hacks does not hold true in any kind of real practice. The way the theories involved manifest themselves in recorded history, in accordance with common sense, is entirely to the advantage of hack users (and everyone else except those looking for ways to rubbish hacks).
On May 7, 15:14 CEST, Jens Meiert said:

Update: Working on my book I discovered problems with that “hack”, it wasn’t working in a simple test case. I’m not exactly sure about it, but I’ll try to reproduce it. Notes will follow here.

Also note the following alternative (via Timo Wirth):
```
html>/**/body .foo { /* modern browsers only (not IE 7) */
   float: left;
}
```
On April 7, 15:17 CEST, mixmagtmb said:

Its really powerfull Filter, great work.
On April 16, 16:18 CEST, Vincent Krown said:

Since IE/Win will misbehave in this manner, when a dimension is needed to fix a float bug, a very small height, such as {height: 1%}, can be applied to the float container, and IE/Win will just make the box taller anyway. Thus, a small height does not change the appearance of the box, but IE seems to think the box is now “dimensioned,” and so our magic bullet strikes home. Scratch one bug.

Jens Meiert