Internet Explorer Filter or Hack Using Character Escapes
Published on January 9, 2007 (↻ February 5, 2024), filed under Development (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,
- 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 onlang
). - 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 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 views and experiences. (Be critical, interpret charitably, and send feedback.)
Comments (Closed)
-
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
-
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.)
-
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).
-
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; }
-
On April 7, 2008, 15:17 CEST, mixmagtmb said:
Its really powerfull Filter, great work.
-
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.
-
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+htmlYour hack it was nice long time ago!
-
On February 10, 2011, 12:35 CET, edgardo valeza said:
thnx for the info this was a good help to us beginners
Read More
Maybe of interest to you, too:
- Next: Web Design: 15 Important Research Findings You Should Know
- Previous: Evangelists, Focus on Standard Ad Code
- More under Development
- More from 2007
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.