Prefixed gradients

[miketaylr]

cf. https://groups.google.com/forum/#!topic/mozilla.compatibility/ekZBqfOnzTc

If UAs need to support some version of -webkit-gradient and the standard (prefixless) for compatibility, it's worth exploring if other prefixes can be safely dropped, i.e., -moz-linear-gradient, -moz-radial-gradient.

[miketaylr]

I'm gonna pile on this issue for the following:

• [ ] -webkit-gradient()
• [x] -webkit-linear-gradient()
• [x] -webkit-radial-gradient()
• [x] -webkit-repeating-linear-gradient()
• [x] -webkit-repeating-radial-gradient()

[miketaylr]

-webkit-gradient() was introduced in https://webkit.org/blog/175/introducing-css-gradients/, and there's also https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34.

And here's the bug where @dholbert implemented -webkit-gradient() in Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1217643

[karlcow]

This seems to be the WebKit Bugzilla issue for CSS gradients (from 2008-04-07) https://bugs.webkit.org/show_bug.cgi?id=18349

[karlcow]

See also for WebKit https://trac.webkit.org/browser/releases/WebKitGTK/webkit-2.10/Source/WebCore/css/CSSGradientValue.cpp https://trac.webkit.org/browser/releases/WebKitGTK/webkit-2.10/Source/WebCore/css/CSSGradientValue.h

[miketaylr]

Notes on -webkit-gradient() emulation in Gecko:

[1] Details on -webkit-gradient(radial, ...) and Mozilla's plans for
imperfectly emulating it:
 * The -webkit-gradient(radial,...) syntax requires the web developer to
specify *two arbitrary circles*, and webkit renders a gradient that
progresses from one circle's edge to the other circle's edge.
 * In contrast, modern "radial-gradient()" syntax only uses a *single*
circle (or ellipse), and the gradient always progresses from that
circle's center to its edge.
 * For simplicity/code-sharing, Mozilla's emulation of this prefixed
feature (in Nightly, preffed off) works by converting it to a
hopefully-similar modern radial-gradient() expression. We choose the
smaller of the two circles that the author provided, and we pretend that
smaller circle is just a point at the center of the larger circle.
Then, we create a modern radial-gradient() expression to represent that
result. This seems to be "good enough" for usability, on the sites that
we've seen which depend on this feature.

(via https://lists.w3.org/Archives/Public/www-style/2015Dec/0152.html)

[dholbert]

Note: I've got an easier-to-spec/explain implementation queued up for -webkit-gradient(linear, ...) in https://bugzilla.mozilla.org/show_bug.cgi?id=1241623

It looks like that spelling of the webkit prefixed gradients is not yet mentioned in the compat spec (but should be included, eventually -- I guess that's why this issue is open & not closed).

[miketaylr]

Thanks @dholbert, the plan is to include it. I'd like to prioritize this soon.... maybe a heading that points to this issue to at least give a hint would be more useful than nothing in the meantime.