Transparency CSS3 Solved for older browsers!!!

  • Just a quickie to pass on a little workaround for using RGBA values in CSS3, having it render fine in Safari and Firefox and rendering a solid in non compliant browsers.
    Basically just input two ‘background’ values into the stylesheet.

    example.
    #sidebar-container{
    float: left;
    width: 100%;
    padding: 0 0 10px;
    text-align: left;
    vertical-align: top;
    position:fixed;
    top:0px;
    background: #000;
    background: rgba(0, 0, 0, .75);
    color: #FFF;
    clear: both;
    }

    The first is picked up by non CSS3 compliant browsers and the second by those that are compliant with CSS3.

    Can’t tell you how relieved and easy this was, I had been thinking about it for quite some time.
    Hopefully it’s of use to someone.
    Best.

    M.

    Example here. https://michaelclements.co.uk/

Viewing 1 replies (of 1 total)

  • Except that the CSS3 compliant browsers actually pick up both (although the second value over-writes the first) and your CSS becomes invalid. Far better to have the second value in a separate sheet.

Viewing 1 replies (of 1 total)
  • The topic ‘Transparency CSS3 Solved for older browsers!!!’ is closed to new replies.