Fixing Browser Compatibility Issues With CSS Opacity & RGBA | LambdaTest

Image for post
Image for post

Very often web designers encounter the need to spice of their websites by playing with CSS opacity for backgrounds, texts and images to build modern subdued styling effects. Opacity is also extensively utilised in creating a subtle shadow effect on text and boxes to make a webpage more attractive for users. This can be achieved either by using the CSS opacity property or by using RGBA colour, each way has its own merit and shortcomings. We will explore some of their most popular practical uses and cross browser compatibility solution to make them work on legacy browsers like IE8 and below versions that offer either partial or no browser support altogether.

CSS Opacity Property

Before we deep dive in this article, you may have a look at the sample code I used to represent CSS Opacity for background on one of our LambdaTest Experiments, here you can visualize the output with respect to the difference in CSS opacity value.

Syntax For Using CSS Opacity

  • Number : specifies the alpha channel value- the opacity/transparency level. Ranges from 0(zero opacity) to 1(full opacity)
  • Initial : Sets to default value which is 1 — full opacity
  • Inherit : inherit value from parent element

Sample Code To Represent Cross Browser Compatibility Issue In CSS Opacity For Background Color

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
div {
width: 50%;
margin: 0 auto;
background-color: #f1c40f;
padding: 10px;
}
.opacity25 {
opacity: 0.25;
}
.opacity50 {
opacity: 0.5;
}
.opacity75 {
opacity: 0.75;
}
</style>
</head>
<body>
<h1>CSS OPACITY PROPERTY</h1>
<div class=”opacity25">
<p>opacity 25%</p>
</div>
<div class=”opacity50">
<p>opacity 50%</p>
</div>
<div class=”opacity75">
<p>opacity 75%</p>
</div>
<div>
<p>opacity 100%</p>
</div>
</body>
</html>
Image for post
Image for post
CSS Opacity for Background Color

Note: If CSS opacity number is set to a value that is outside the defined range 0 to 1, it is still a valid syntax. The value is rounded to the nearest limit point. For instance, if CSS opacity is set to -0.5 it will be rounded to 0. Similarly, if CSS opacity is set to 1.25, it will be rounded to 1.

Image for post
Image for post
Rounding value of CSS Opacity for Background Color

Browser Support For CSS Opacity Property

Image for post
Image for post
<> CanIUse browser compatibility & Support Table of CSS Opacity for Background Color

CSS3 provides a short single line style rule to add CSS opacity for background color, which is supported by all modern browsers. However, earlier due to cross browser compatibility and feature support issues, making CSS opacity work was quite cumbersome, and required extensive browser specific rules and fallbacks shown below.

Image for post
Image for post
CSS Opacity Background Color is not supported by IE8 and below- LambdaTest Real Time Testing

To access my webpage on legacy browsers I have performed browser compatibility testing using LambdaTest to ensure that my code renders as intended. LambdaTest is a cross browser testing tool offering more than 2000 real browsers and browser versions running on numerous operating systems. For this experiment of CSS opacity for background color, I used live-interactive feature of LambdaTest called Real Time Testing. Real time testing helps you to interact with your webapp across thousands of browser and browser versions by running a virtual machine, hosted on LambdaTest cloud servers.

I also made use of Lambda Tunnel, which allowed me to test my locally hosted webpages on LambdaTest platform by establishing an SSH(Secure Shell) connection.

Cross Browser Compatible Solution For CSS Opacity

div{
/* IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

/* IE 5, IE6 and IE7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x Pre webkit */
-khtml-opacity: 0.5;

/* Modern browsers */
opacity: 0.5;
}

But it is quite evident that this is not a practical solution for modern use. Today, there is a short modern hack for making CSS opacity work for all browsers including legacy versions of Internet Explorer — IE6-IE8.

div {
opacity: 1;
filter: alpha(opacity=100); /* IE8 and lower */
zoom: 1; /* Triggers “hasLayout” in IE 7 and lower */
}
Image for post
Image for post
CSS Opacity property is now supported by IE8, IE7 and IE6 — LambdaTest Realtime testing

The code mentioned above will not work in IE, specially in IE8 if ‘zoom :1’ is not specified. IE doesn’t apply several CSS style rules to elements that don’t have layout. ‘zoom:1’ or ‘width :100%’ will trigger — “has layout” for the element and enable CSS opacity for background color or images to be applied.

Opacity Polyfill For Internet Explorer (IE6 — IE8)

USAGE —
Use IE conditional statement to load polyfill JS file in Internet Explorer IE8, IE7 and IE6.

<! — [if lte IE 8]> <script src=”jquery.ie-opacity-polyfill.js”></script> <![endif] →

This will not be interpreted by any modern browsers and will be simply discarded as a comment. If you want to learn more about IE conditional statements and CSS feature queries, check out my article here.

<!doctype html>
<html>

<head>
<meta charset=”utf-8">
<title>CSS Opacity Polyfill for IE</title>
<! — [if lte IE 8]><script src=”jquery.ie-opacity-polyfill.js”></script><![endif] →
<style type=”text/css”>
.square {
float: left;
width: 90px;
height: 90px;
padding: 5px;
margin: 25px;
background: #000;
color: #fff;
}
.opacity75 {
opacity: .75;
}
.opacity50 {
opacity: .5;
}
.opacity25 {
opacity: .25;
}
</style>
</head>
<body>
<div class=”square”>Opacity: 100%</div>
<div class=”square opacity75">Opacity: 75%</div>
<div class=”square opacity50">Opacity: 50%</div>
<div class=”square opacity25">Opacity: 25%</div>
</body>
</html>

CSS offers another alternative to CSS opacity to achieve a similar kind of opacity or transparency effect by the use of RGBA color. This is quite popular for creating overlay backgrounds, gradient backgrounds, text and box shadow, gradient text etc.

RGBA Color

Syntax Of Using RGBA For Opacity

  • R/B/G: Specifies the value or intensity of Red, Blue and green colors respectively either by an integer value ranging from 0 to 255 or % value ranging from 0–100%.
  • Alpha-channel : species the opacity value as a range between 0 and 1. 0 represents 0% opacity(or 100% transparency) and 1 represents 100% opacity(or 0% transparency).

Sample Code To Represent Cross Browser Compatibility Issue In RGBA Opacity For Background Color

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
div {
width: 50%;
margin: 0 auto;
padding: 10px;
}
.opacity0{
background: rgba(46, 204, 113,0);
}
.opacity25{
background: rgba(46, 204, 113,0.25);
}
.opacity50{
background: rgba(46, 204, 113,0.5);
}
.opacity75{
background: rgba(46, 204, 113,0.75);
}
.opacity100{
background: rgba(46, 204, 113,1.0);
}

</style>
</head>
<body>
<h1>RGBA COLOR</h1>
<div class=”opacity0">
<p>opacity 0%</p>
</div>
<div class=”opacity25">
<p>opacity 25%</p>
</div>
<div class=”opacity50">
<p>opacity 50%</p>
</div>
<div class=”opacity75">
<p>opacity 75%</p>
</div>
<div class=”opacity100">
<p>opacity 75%</p>
</div>
</body>
</html>
Image for post
Image for post

Browser Support Of RGBA Color Type

Image for post
Image for post
CanIUse browser compatibility and support table for RGBA color

Although RGBA color enjoys excellent support across all major browsers and is largely cross browser compatible. However noticeable exceptions are IE6 — IE8 which do not support this feature. One solution is to use a fallback solid color(100% opacity) without any alpha value, ie without any opacity/transparency value. Browsers which do not comprehend RGBA value will render the fallback color. However we will explore ways to make RGBA cross browser compatible and work in IE6-IE8 versions as well.

Image for post
Image for post
RGBA color is not supported by IE8 and below- Lambdatest Realtime testing

Cross Browser Compatible Solution Of Using RGBA For Opacity

Here’s a table showing alpha value in % and its corresponding alpha value in #ARGB format — If you have RGBA value — rgba(F,0,0,0.5), then the corresponding value in #ARGB format will be #80FF0000 where first 2 characters ‘80’ represent 0.5 or 50% opacity.

Add the following code snippets to your code to enable support for RGBA in IE6, IE7 and IE8

  • For IE6-IE7
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=’#6523BE38', EndColorStr=’#6523BE38');
  • For IE8
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr=’#6523BE38', EndColorStr=’#6523BE38')”;
  • ‘hasLayout’ for IE
Add zoom:1; to trigger ‘hasLayout’

Now after combining all the fallbacks, our final code shapes up to be -

<!DOCTYPE html>
<html>

<head>
<style>
h1 {
text-align: center;
}

div {
width: 50%;
margin: 0 auto;
padding: 10px;
}

.opacity25 {
/* default fallback for unsupported browsers*/
background: transparent;
/*or some solid color background : red; */
/* for modern browsers */
background: rgba(230, 126, 34,0.25);
/* For IE8 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr=’#40e67e22', EndColorStr=’#40e67e22')”;
/* For IE6,IE7 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=’#40e67e22', EndColorStr=’#40e67e22');
/* Trigger hasLayout for IE */
zoom: 1 !important;
}
.opacity50 {
background: transparent;
background: rgba(230, 126, 34,0.5);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr=’#80e67e22', EndColorStr=’#80e67e22')”;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=’#80e67e22', EndColorStr=’#80e67e22');
zoom: 1 !important;
}
.opacity75 {
background: transparent;
background: rgba(230, 126, 34,.75);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr=’#bfe67e22', EndColorStr=’#bfe67e22')”;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=’#bfe67e22', EndColorStr=’#bfe67e22');
zoom: 1 !important;
}
</style>
</head>

<body>
<h1>RGBA COLOR SUPPORT FOR IE</h1>
<div class=”opacity25">
<p>opacity 25%</p>
</div>
<div class=”opacity50">
<p>opacity 50%</p>
</div>
<div class=”opacity75">
<p>opacity 75%</p>
</div>
</body>

</html>
Image for post
Image for post
RGBA color is now supported by IE8, IE7 and IE6 — LambdaTest Realtime testing

Conclusion

Originally published at LambdaTest

Author Nikhil

Image for post
Image for post

Written by

Product Growth at @lambdatesting (www.lambdatest.com)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store