1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fixed Invalid CSS3 gradients for .quoteExpand

Discussion in 'Resolved Bug Reports' started by Arty, Jul 19, 2013.

  1. Arty

    Arty Well-Known Member

    In bb_code.css selector .bbCodeQuote .quoteContainer .quoteExpand has following CSS3 gradients:
        background: -webkit-linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
         background: -moz-linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
         background: -ms-linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
         background: -o-linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
         background: linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
    That format has been replaced by new format over a year ago.

    Direction of gradient should be not where gradient is originating from, but where it is going with "to" word before it. So correct syntax is "to bottom" instead of "top".


    Also all prefixed versions except for -webkit can be removed:
    -ms- prefix existed only in IE10 platform preview.
    Opera has supported unprefixed version for long time, so -o- version isn't needed ether.
    -moz- prefix is needed only for really ancient Firefox browsers.

    So it can be cut to 2 lines using new syntax for unprefixed version:
        background: -webkit-linear-gradient(top, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
         background: linear-gradient(to bottom, {xen:helper rgba, @bbCodeQuoteMessage.background-color, 0} 0%, {xen:helper unrgba, @bbCodeQuoteMessage.background-color} 80%);
    Adam Howard, John, Alien and 3 others like this.
  2. CyberAP

    CyberAP Well-Known Member

    I'd suggest to make it fully automatic. We just write linear-gradient value and XF adds all the prefixes on template compile. The same as it's done with box-shadow, transforms, etc.
    rellect likes this.
  3. Arty

    Arty Well-Known Member

    I'd prefer if it didn't. Correct syntax is only 2 lines long: one original line and one with -webkit- prefix. Its easier to copy it than deal with potential mess that fully automatic copying could make.
    AlexT likes this.
  4. CyberAP

    CyberAP Well-Known Member

    If it's done in a correct way it's better. Imagine you have lot's of gradients with a degree rotation. You'll have to calculate them each time you want to have a -webkit- compatibility.
  5. Arty

    Arty Well-Known Member

    Problem is such things are not always done correctly. Until 1.1.4 (or was it .5?) gradients couldn't be used at all inside style properties because XF tried to automatically "fix" things. Now it just doesn't try to fix it and things work out correctly.
  6. rellect

    rellect Well-Known Member

    Well my personal opinion is "if it ain't broke, don't fix it".
    In addition, you can say the same thing about border-radius and box-shadow. These uses fallbacks for "old" browsers as well.
    Plus, your two lines code isn't complete. There is also the "filter" property that can implement the gradient on IE<9.
  7. CyberAP

    CyberAP Well-Known Member

    Please no.
    Adam Howard, Jay and Arty like this.
  8. Mike

    Mike XenForo Developer Staff Member

    You're right about the unprefixed version being wrong and the MS version not being in a released version, but I don't see the harm in leaving the -moz and -o versions.
    SonicRC likes this.

Share This Page