Fixed Invalid CSS3 gradients for .quoteExpand

[Arty]

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".

References:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx

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%);

 

[CyberAP]

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.

 

[Arty]

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.

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.

 

[CyberAP]

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.

 

[Arty]

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.

 

[refael]

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.

 

[CyberAP]

Plus, your two lines code isn't complete. There is also the "filter" property that can implement the gradient on IE<9.

Please no.

 

[Mike]

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.