Jens Oliver Meiert

Internet Explorer Filter or Hack Using Character Escapes

Post from January 9, 2007 (↻ August 15, 2014), reflecting Jens the .

Searching for a valid and “safe” way to circumnavigate some nasty problems in Internet Explorer I discovered this filter that does not work in any version of IE (including IE 7):

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’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 complex websites. Yet please, never ever suggest me to use something like “Conditional Comments.” It’s still not worth it…

Update (March 15, 2014)

The guys 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.

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

Read More

Have a look at the most popular posts, eventually including:

Or maybe say hi on Google+, Twitter, or LinkedIn?

Found a mistake? Reward! Email me, jens@meiert.com.

You are here: HomeArchive for 2007 → Internet Explorer Filter or Hack Using Character Escapes

Last update: August 15, 2014.