Home > Web > Behavior helping cross browser transparency

Behavior helping cross browser transparency


One of the things that I hate the most when developing DHTML applications is that I have to write code for at least 3 browsers. And nowadays the differences between them are not so big, but 5 years ago …
If you write some DHTML code you have to consider at least Firefox (>=2), Internet Explorer (>=6) and Safari. These are the most common web browsers. Google Chrome is gaining lately some popularity, but you can assimilate it with Firefox. Opera and other browsers have such a low percentage usage that you can safely ignore them.
Every time you will see some JavaScript code that shows you how to do some tricks, you will probably see a notice that is cross-browser. And if you dig deep inside the code, you will probably see lots of code that does nothing else but testing for the browser and then applying specific code for it.
It would be so nice if all the browsers will implement the standard(W3C) and only the standard. Then you will have an environment by default cross-browser.
A compromise are the existing cross-browser frameworks. But … you have to learn a new framework and you’re stuck with that framework, as your code will not work without it. And, if in the future browsers will become more and more compliant (it’s not a joke, IE8 seems to make small steps in that direction), you are still stuck with that framework.
Nice will be a framework that will ensure the cross-browser thingy in a transparent way.
Let’s be more practical. Some time ago I wrote an article about how you can make HTML elements transparent in a cross-browser way. But you actually had to write code for three browsers. Safari follows the standards here, Firefox >= 1.x as well (we can ignore FF 0.x – nobody is probably using it anymore). So I will focus on a workaround to help you write

element.style.opacity = 0.7;

and to have the desired result even in IE. Let’s admit, IE has always been the “rebel kid”, but also the most used.
The idea is simple. Every time I modify the “opacity” property of an element style in IE, I will run some code to do the necessary translation and ensure the cross-browser in a transparent way.
Now, for this we will use behaviors, an IE specific feature. Which in this case is good, as the code will be ignored by other browsers.
First of all attach a behavior, described in cb-opacity.htc, to all the elements, through CSS code (put it in a STYLE tag or a separate .css file):

* { behavior: url(cb-opacity.htc);}

.
And now the most interesting part – cb-opacity.htc

<PUBLIC:COMPONENT lightWeight="true"> 

<PUBLIC:ATTACH event="onpropertychange" handler="doOnPropertyChange"/>
<PUBLIC:ATTACH event="oncontentready" handler="doOnContentReady"/>

<SCRIPT>
function doOnContentReady() {
    // when this behavior is attached to an element, then check if the opacity was not already set
    // most likely through CSS code
    if (element.currentStyle.opacity != null) {
        element.style.filter = 'alpha(opacity=' + (element.currentStyle.opacity * 100) + ')';
    } else if (element.style.opacity != null) {
        element.style.filter = 'alpha(opacity=' + (element.style.opacity * 100) + ')';
    }    
}

function doOnPropertyChange() {
    // every time the style opacity is changed through JavaScript, then modify the CSS filter too
    if (window.event.propertyName == "style.opacity") {
        element.style.filter = 'alpha(opacity=' + (element.style.opacity * 100) + ')';
    }
}
</SCRIPT>
</PUBLIC:COMPONENT>

And now IE has support for style.opacity. Pretty nice, isn’t it?

Later edit: The same can be applied to cssFloat and styleFloat.

Categories: Web Tags: , ,
  1. sherone
    August 19, 2009 at 9:26 am

    This CSS is good, but it has a small problems with validating. It is not validated by W3, causes of filter, -khtml-opacity and -moz-opacity attributes (W3 accepts only opacity attribute, and only in CSS3).
    Is proper validation really that big of a deal? I mean, seriously, what honestly matters is that the code works well with everything. Validation should be a secondary priority.
    […]
    True, validation is not top priority, but IMO proprietary stuff should be avoided, since they lead to a non-standardized mess – making life difficult for everyone.
    […]
    There’s also this lovely little collection:

    div.bg-trans
    {
    border:5px solid #000000;
    /* FF2 & Opera Hack */
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAA1JREFUCNdjYGBgOAMAANEAzdAP7DMAAAAASUVORK5CYII=);

    /* Safari and FF3 support CSS3 syntax already */
    background:rgba(0,0,0,0.8);
    }


    /* For Your IEs Only */
    div.bg-trans
    {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient
    (startColorstr=#DD000000,endColorstr=#DD000000);
    zoom:1;
    }

    […]
    .opaque {
    // first!
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
    // second!
    filter: alpha(opacity=50);
    }

    I havent used i.e. 8 yet so its not a big problem but might as well fix things now for the future.
    […]

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: