Topic: CSS compliance at last?

As promised in some other thread, this is a re-post of some tool I just found.  I'm excited by it, because there are some nice things that are in the CSS spec that honestly are "just broken" by IE 5.5 & IE 6 (well -- eralier browsers also, but probably are not worth my time anyhow).

Javascript CSS-and-png-fixer-upper script:

http://dean.edwards.name/IE7/

So it appears that this would allow me to write CSS code that works say in firefox, and without too much worrying, would probably also work in IE 5.5 and IE 6.  I personally think it's a reasonable approach -- certainly an improvement over me bashing in my own head with a baseball bat because some stupid "alternative CSS implementation" in IE seems to screw something up.

I'm not saying here, that without this you can't possibly implement a good looking website.  But, there are things that unquestionably simply don't work in most versions of IE, that ought to.  So either you simply "don't use these features", or you start hacking around with your CSS that only are noticed by IE and not firefox (or vice-versa). 

Some examples that I was interested in are addressed by this script.  Examples are:

http://dean.edwards.name/IE7/compatibil … /demo.html
http://dean.edwards.name/IE7/compatibility/png.html

Has anyone here used it?  If so what do you think? 
If you have not yet used it, are you going to think about it?  If not, why not?
Are there other libraries out there that do the same thing (better?, different?)

Again, I'm not saying that this is the only solution that makes sense, but to me it is quite appealing because it would seem I could code CSS once -- correctly, and have it pretty much work as expected.

I did see the following warning with the code:

IE7 is not dynamic. That is, if you change the structure of your document programatically, then you must refresh the IE7 CSS rules. Do this by calling document.recalc() after you have finished altering the document

Last edited by Slurpy (2007-02-02 16:30:07)

Re: CSS compliance at last?

Grumble!

Looks like the "pure javascript" isn't.  There is a .php file in the ointment...

<?php
$data = split(";", $_SERVER["REDIRECT_QUERY_STRING"]);
$type = $data[0];
$data = split(",", $data[1]);
header("Content-type: ".$type);
echo base64_decode($data[1]);
?>

I'm guessing this can be replaced by ruby. I'll take a look at another version.

Re: CSS compliance at last?

About the "IE7 is not dynamic" warning, I have a hard time believing this will be as big of a problem as it sounds. Has anyone done any testing with this? Perhaps it is just referring to changing the CSS and not the structure of the HTML document with javascript.

Railscasts - Free Ruby on Rails Screencasts

Re: CSS compliance at last?

Thoughts on the base64_decode?

Re: CSS compliance at last?

Are you looking for a Ruby alternative to base64_decode? See this message in the mailing list. As for translating the rest of the PHP code, you can probably do it through the request object in the controller (for setting the content type, etc.)

Railscasts - Free Ruby on Rails Screencasts

Re: CSS compliance at last?

I looked at when it makes use of that functionality, and it is here (ie7-graphics.js)

if (ie7HTML) {
// -----------------------------------------------------------------------
//  fix PNG transparency (HTML images)
// -----------------------------------------------------------------------

    ie7HTML.addRecalc("img,input", function($element) {
        if ($element.tagName == "INPUT" && $element.type != "image") return;
        _fixImg($element);
        addEventHandler($element, "onpropertychange", function() {
            if (!_printing && event.propertyName == "src" &&
                $element.src.indexOf(BLANK_GIF) == -1) _fixImg($element);
        });
    });
    var $BASE64 = /^data:.*;base64/i;
    var _base64Path = makePath("ie7-base64.php", path);
    function _fixImg($element) {
        if (_pngTest.test($element.src)) {
            // we have to preserve width and height
            var $image = new Image($element.width, $element.height);
            $image.onload = function() {
                $element.width = $image.width;
                $element.height = $image.height;
                $image = null;
            };
            $image.src = $element.src;
            // store the original url (we'll put it back when it's printed)
            $element.pngSrc = $element.src;
            // add the AlphaImageLoader thingy
            _addFilter($element);
        } else if ($BASE64.test($element.src)) {
            $element.src = _base64Path + "?" + $element.src.slice(5);
        }
    };


A few thoughts:

1. The above will only call the php code if the png file is base64 encoded (which my guess is, none of my fixed-content images would be).

2. Though my javascript is quite elementary (I've never done much javascript, and heavily rely on other people's work to have anything cool happen), my guess is that a pure javascript solution ought to be possible to implement.  A base64 data decoder isn't something terribly difficult to implement in principle (hey I'm a C++ guy), and my guess this could have been done in javascript -- unless I'm missing something:  Which I might be!

Oh look: http://www.webtoolkit.info/javascript-base64.html

So why use the php thing? (or ruby) if you're gonna have a javascript solution to all this, why not keep it client-side?

Last edited by Slurpy (2007-02-02 17:49:56)

Re: CSS compliance at last?

ryanb wrote:

About the "IE7 is not dynamic" warning, I have a hard time believing this will be as big of a problem as it sounds. Has anyone done any testing with this? Perhaps it is just referring to changing the CSS and not the structure of the HTML document with javascript.

Hmm... I seem to be having this problem now.  Anyone know where I'd stick document.refresh(); so it runs for ie-based browsers for html-replace type of operations?

Posts [ 7 ]

Pages 1