RGBA test on web browsers

Dear reader,

After having installed the horrific Firefox 2.0 beta when it came out, I have been quite sceptical about installing Firefox beta versions ever again, but today decided to do so after a while of gathering courage. ūüôā

Don’t get me wrong, I definitely consider Firefox my primary browser, but the experience I got from the 2.0 betas was terrible and after that I decided ‘firmly’ to stick with the main releases — that is, until now.

Now, after installing the 3.0b2 version I viewed the what’s new section, especially about what’s new with Firefox’s CSS support. To my delight I found out that it now supports the RGBA definition (Red-Green-Blue-Alpha) in elements, enabling to not just adjust their colors, but their “alpha value” or transparency as well.

I just had to test it, and to make it more interesting, I tried it with the other Windows browsers installed on my computer as well, namely:

The HTML code used to test this can be found below.

<html>
<head>
<title>Firefox 3.0 Beta 2 test: CSS, RGBA (alpha)</title>
<style type="text/css">
p {
 font: bold 12px/14px helvetica,verdana,sans-serif;
 color: rgba(064,030,044,0.4);
}

#leftrect {
 position: absolute;
 padding: 15px;
 width: 200px;
 height: 200px;
 border: 1px solid rgb(255,25,25);
 background-color: rgba(255,0,0,0.7);
}
#middlerect {
 position: absolute;
 margin-left: 75px;
 margin-top: 75px;
 padding: 15px;
 width: 200px;
 height: 200px;
 border: 1px solid rgb(25,25,255);
 background-color: rgba(0,0,255,0.7);
}
#rightrect {
 position: absolute;
 margin-left: 150px;
 margin-top: 150px;
 padding: 15px;
 width: 200px;
 height: 200px;
 border: 1px solid rgb(25,255,25);
 background-color: rgba(0,255,0,0.7);
}
</style>
</head>
<body>
<div id="leftrect">
<p>
Some text on a red bgr.
</p>
</div>
<div id="middlerect">
<p>
Another text, but on a blue bgr.
</p>
</div>
<div id="rightrect">
<p>
Third text, this time on a green bgr.
</p>
</div>
</body>
</html>

Guess which browsers managed to render it properly? The answer can be found in the picture below (click to enlarge).

RGBA test result on web browsers

%d bloggers like this: