Internet Explorer Filter or Hack Using Character Escapes

Published on January 9, 2007 (↻ February 5, 2024), filed under (RSS feed for all categories).

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

Searching for a valid and “safe” way to circumnavigate an ugly layout problem in Internet Explorer I discovered the following filter that does not work in [IE â‰¤6]:

html[lang='\
en'] {}

The hack takes advantage of the CSS syntax. Apparently, all Internet Explorer versions fail to support character escapes in strings, at least in this construct. Technically, it’s valid CSS. (You can probably come up with your own hack using this “character escapes in strings” flaw.)

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,

On drawbacks:

Tested In…

…whatever was in cursor reach. In alphabetical order.

Windows

Mac

❧ I don’t like such stuff, either, I just happen to test and play a lot while building websites. Yet please, don’t suggest me to use something like “Conditional Comments.” It’s still not worth it.

Update (March 15, 2014)

The friends from Browserhacks have included this hack in their hack database after verifying that it works everywhere except for Internet Explorer 9 and below. Which makes it a more specific hack.

Update (November 1, 2016)

I don’t know what had happened (sloppy test setup? Microsoft updating old browsers?), however Browserhacks could not find the hack to be working anymore, and hence kicked out the hack. The hack does still work, however, though apparently only in IE 6 and lower. I’ve finally set up a proper test page and updated the Browserhacks team.

Was this useful or interesting? Share (toot) this post, become a one-time nano-sponsor, or support my work by learning with my ebooks.

About Me

Jens Oliver Meiert, on November 9, 2024.

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)

Comments (Closed)

  1. On January 31, 2007, 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

  2. On January 31, 2007, 14:01 CET, Jens Oliver 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, 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.)

  3. On February 5, 2007, 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).

  4. On May 7, 2007, 15:14 CEST, Jens Oliver 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;
}

  5. On April 7, 2008, 15:17 CEST, mixmagtmb said:

    Its really powerfull Filter, great work.

  6. On April 16, 2008, 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.

  7. On October 26, 2009, 22:27 CET, Chris Fabrics said:

    This is out of date. Doesn’t work on Chrome, Opera 9 and Safari 4.
    I prefer to use for IE hacks like *html and *:first-child+html

    Your hack it was nice long time ago!

  8. On February 10, 2011, 12:35 CET, edgardo valeza said:

    thnx for the info this was a good help to us beginners