Ie7-js | Hacker News Reader

Ie7-js

code.google.com

111 pointsolalonde28 comments

I've recently started using CSS3PIE (http://www.css3pie.com) in production and can only recommend it. It enables you to use CSS3 declarations such as box-shadow and border-radius in Internet Explorer, even under version 6!

It's trivial to use and much faster than IE7.js since it relies on the browser engine to do most of the work parsing selectors etc. The author Jason Johnston is very responsive in the forums as well. Even better, the upcoming version 0.11 of Compass (http://beta.compass-style.org) includes a mixin for PIE which makes adding cross-browser rounded corners a matter of two lines.

Didn't think I'd see this happen in my lifetime...

This is a great/easy solution - thanks for posting this.

I spent maybe 5 minutes adding this to my site, and I have to say I'm impressed. Copy the file to your server, add one new tag to your css wherever your radius css defs are and viola, done.

Prior to using this I was able to get IE looking nearly identical to Chrome/FF/Safar - except for drop-shadows and rounded corners. I've been pretty strict about not deviating from the open standards and this has actually caused several arguments between me and one of my biz partners (he just doesn't get why I refuse to 'fix' the issue in IE with one of the graphic hacks out there - and has been seeking advice from designers about this even!).

So yeah, huge thanks again because not only does this solution thorough rocks for what I needed and took no time to implement, but also now my biz partner is going to have one less thing to fight with me about (and probably move back on to telling clients about new features he wants that I have't started yet...).

You're very welcome. I see now that it was submitted before (http://news.ycombinator.com/item?id=1736030) but didn't get any upvotes. Bad timing, I guess.

I submitted it again in the hopes that it will help others (http://news.ycombinator.com/item?id=2086498).

Have you found anything adds text-shadow support to IE?

I haven't looked into that; the designer we used didn't use that effect and I've been strictly 'painting by numbers' trying to visually match IE to everything else. Sounds like a pain though.

Text shadow is easy to do, just not always gonna look great:

filter: dropshadow(color=#333333, offx=1, offy=1);

Before using this make sure you write valid HTML and valid CSS. I found this to be the best remedy for IE issues. Not that IE is particularly fond of standards, however, sometimes adding something like "position:relative" to the stylesheet will solve confusing problems.

For JS use Prototype or jQuery and voila, IE renders quite fine.

adding position:relative without knowing what it does... great advice

I didn't express myself well. It was an example where a style attribute may be implicit in one browser, but lead to incorrect rendering in another. In other cases it may be a hack. So I guess the advice is: be explicit.

btw: Microsoft must be the least "green" software-company ever. All the electricity spent on figuring out how to write css for IE.. :)

position:relative helps fix a number of overflow and box model bugs in the IEs (especially IE7)

Don't forget the even more magic cure-all: zoom: 1;

It doesn't cause z-index bugs like position relative does! :)

The png fix included in this is terrible. Give me DD_BelatedPNG over this any day. It doesn't support background-position.

However, while we're talking about fixing IE6, who wants to port WebKit to Javascript with me?

I've pondered if writing your entire website in canvas/svg (a la Raphael) is the only way have it (100%) consistent across IE6-8, Chrome, and Firefox. That way you throw the html renderer of the browser out of the window and you're drawing your own vectors.

But even so, you'll probably hit some weirdness in IE6's jscript implementation.

However, excanvas was quite slow though, at least last I tried it.

Of course it's not the only way, have you seen Google's homepage?

Also, JScript is actually surprising good and is nothing like the DOM or CSS, AFAIK the only known bugs are Named Function Expressions being parsed as Function Declarations (http://kangax.github.com/nfe/#jscript-bugs), and a couple RegExp bugs (http://blog.stevenlevithan.com/category/cross-browser).

I suppose if you count DOM bugs, like the memory leak, that's a problem. That's where jQuery is amazingly helpful(and presumably other libraries like it).

Considering Raphael is as slow as excanvas in IE (but much faster in other browsers), it's probably IE's fault, not excanvases.

Another JS bug in older versions of IE (6 for sure, not sure about later ones) occurs when you end an array or hash with a comma after the last element, e.g. {foo: bar,}

IIRC, this is actually invalid Javascript syntax that Chrome/Firefox/Safari choose to ignore.

JSLint picks it up:

  Error:
  Problem at line 1 character 22: Extra comma.

  var x = { foo : "bar", };

Canvas rendering is not 100% consistent across canvas implementations.

So you would be losing the ability to have the browser do layout for you, losing the ability to scroll sanely, etc, and gaining perhaps some improvement in consistency, maybe. And maybe not.

Your comment makes me incredibly sad because not using HTML will have many hidden disadvantages to your end-users, and ruining many user agents' functionalities, not the least of which would be machine translation and accessibility/addictive devices.

However, while we're talking about fixing IE6, who wants to port WebKit to Javascript with me?

I think you'd have better luck porting it to Alchemy[1] and running it through Flash. Even if users don't have the plugin (many will[2]) you could take advantage of Adobe's drive-by Flash installation (something I strangely find myself wishing Microsoft would adopt for IE updates).

[1]http://labs.adobe.com/technologies/alchemy/ [2]http://www.adobe.com/products/player_census/flashplayer/vers...

The last update of ie7.js was in March: http://dean.edwards.name/weblog/2010/03/ie7js-update/ Supports up to IE9.

Does it play nicely with content loaded via ajax? I would hate to have rerun it on every ajax callback.

You do have to rerun it.

It would be more useful if it were part of a toolkit like Dojo or jQuery, and would automatically happen when you use their AJAX functions.

On the other hand, how hard can it be to curry yourself a function that does so?

Wasn't this up here some time ago? What's changed since then?

Anybody has tried this in a real production evironment? Does it play well with jQuery and plugins?

I'll test it at work on monday and get back with the results, this looks promising

It works well for static pages. Once you have html injection and such, you need to rerun this code on the new stuff.

Yes and I wouldn't recommend it if you have visitors with old computers and your HTML isn't rather simple (depth and multiple class names for an element). It will make older computers (+5 years... or even less, depends on the hardware) simply block for almost a minute (or more) when trying to run that JS.

Does it fix floats and margins?

Reply on news.ycombinator.com