CSS opacity vs rgba: which one is better?

Question

Assuming you\'re applying a CSS opacity to a solid color. Is it better, in terms of memory and performance, to use an rgba value or the color+opacity?

Answer 1

At first, you must know that rgb() is cross-browser, but choosing transparency between rgba() and opacity() depending on your case, if you have a division with DOM tree children and you don't wanna make transparent its children better choose rgba() but if it's a lonely division I prefer to use opacity().

Because browsers use Hardware Acceleration for rendering opacity(). filter: alfa(opacity=x) is same as opacity() but it is for IE8 and earlier versions.

The rgba() is a function that forces browsers to calculate a color, but not using GPU Acceleration, and if you use rgba() frequently in a page may be your browser work pretty slow. If you use a simple color I prefer to use hexadecimal color, because it is a pre-calculated color and browsers don't calculate and just paint it.

After all, if your case summons you to use rgba() but you wanna GPU Acceleration, you can use transform: translateZ(0);, nothing happens but your browser force to use GPU. it is a trick for better performance, but don't use it frequently.

Note: the transparent key for color maps to rgba(0, 0, 0, 0). it's just a key, not a exact value.