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

Advertisements

One Response

  1. really help me:) thanks for described it.

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: