Skip to main content
Inspiring
March 21, 2017
Answered

How safe is it to use rgba values for transparency everywhere?

  • March 21, 2017
  • 5 replies
  • 2050 views

Would it be 1) possible, and 2) relatively harmless for me to replace all grays on a website with 50% alpha black (via rgba values)? The reasoning being that a 50% black should mix better with most site bg colors than a solid neutral gray will. They would look identical on solid white, though.

Are rgba values that safe to use across the board, I guess is the question I'm really asking.

    This topic has been closed for replies.
    Correct answer BenPleysier

    Nothing safer than using RGBa

    5 replies

    Under S.Author
    Inspiring
    March 21, 2017

    How do browsers handle stacked alpha values?

    For instance, a small div within a medium div within a large div, each one with 25% black (ie, a light gray) : do the divs get darker as they get smaller (ie, more nested) on screen?

    This won't create an artificial black hole if opened with the wrong browser, will it?

    PS: RGBa values also require more characters than the average #FFFFFF style value. I'm going to assume the difference isn't worth taking into account with 2017 bandwidth limits. I remember way back when we'd avoid an idea like this one simply because it might've required more chrs every time a color was defined, and that adds up.

    Nancy OShea
    Community Expert
    Community Expert
    March 21, 2017

    It's cumulative.  25% + 25% + 25% = 75%.

    Nancy O'Shea— Product User & Community Expert
    Jon Fritz
    Community Expert
    Community Expert
    March 21, 2017

    Aside from the obvious issue of a screened black allowing other colors to show through vs a solid gray, rgba will show correctly in every modern browser.

    HTML email however, is another story.

    RGBA colors won't work in Outlook 07/10/13, Outlook 03/Express/Mail, Outlook.com or Yahoo Mail...

    CSS Support Guide for Email Clients | Campaign Monitor

    So if you're doing an email campaign, you'll need to use the fallback.

    pziecina
    Legend
    March 21, 2017

    There comes a point when old browsers should no longer be supported, and for IE8 and below that came a few years ago.

    Microsoft dropped support for IE8 3 years ago, and no updates have been issued for that browser since they did so., not even security updates. This means for users of such browsers that they are taking a risk every time they use the browsers, if a client still wants to support them then you have no choice but to do so, but point out to them that MS also says that older IE browsers should not be used.

    rayek.elfin
    Legend
    March 21, 2017

    Agreed, check caniuse: http://caniuse.com/#search=css3%20colors

    http://caniuse.com/#search=css3%20colors

    I'd say that with 97.88% global support you'd be fine. If you REALLY need to, provide a fallback for IE like so:

    background-color: #020202; /* rgb() with background-color fails in IE6&7 */

    background-color rgba(f2,f2,f2,0.8);

    Or something similar. But I would suggest to just stick with rgba only nowadays - unless your client requires stone-age IE support.

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    March 21, 2017

    Nothing safer than using RGBa

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!