Internet Explorer Filter or Hack Using Character Escapes

Published on Jan 9, 2007 (updated Feb 5, 2024), filed under development, css (feed). (Share this on Mastodon or Bluesky?)

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,

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

On drawbacks:

The proposed use of this hack ties you to the language of the affected documents as defined by the lang attribute. In many cases, this should be okay, but it can become a problem (that might be solved by either selector grouping or a selector modification that does not depend on lang).
Most importantly, please be aware that this isn’t a safe filter or workaround or hack (yet)! For starters, read Peter-Paul Koch’s article on hacks for a good summary of the problem.

Tested In…

…whatever was in cursor reach. In alphabetical order.

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

❧ 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.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), 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. (I value you being critical, interpreting charitably, and giving feedback.)