new syntax for mozilla gradients

[Eric Meyer]

I noticed today after installing FireFox 3.6 (which supports CSS
Gradients) that Compass CSS Gradients still weren't working, but all
the demos on the Mozilla site were. Obviously something was wrong.

Turns out they've changed the syntax on us, and not in small ways.
Honestly I think it's a simpler syntax, though a bit harder to convert
to a Sass mixin.

Here's the old syntax:
background: -moz-linear-gradient(left top, left bottom, from(blue),
to(red), color-stop(50%,yellow));

And the new syntax:
background-image: -moz-linear-gradient(top, blue, yellow, red);

There are, of course, options within that. The first argument can be
either be a point or an angle or both:
background-image: -moz-linear-gradient(top left, blue, yellow, red);
background-image: -moz-linear-gradient(45deg, blue, yellow, red);
background-image: -moz-linear-gradient(top 45deg, blue, yellow, red);

And colors can have positions attached to them:
background-image: -moz-linear-gradient(top, blue, yellow 25%, red);

etc.

Radial gradients have also changed, though I haven't had the time to
look into that as much. They've even add repeating gradients.
Craziness.

You can read up on all of it here:
https://developer.mozilla.org/en/Using_gradients

I'll start looking into ways to get our gradient mixin working again,
but I'd be glad for ideas on which syntax to prefer if anyone has
some.

Cheers,
Eric Meyer

[Eric Meyer]

While we are looking into this I have a few larger recommendations to
consider:

Because gradients are written as a mixin they return not only the
value ("-moz-linear-gradient(etc.)"), but also the property
("background:"). That severely limits the possible uses of gradients
overlapping background-colors or or image, or even multiple background-
images (as is now possible in both Webkit and Mozilla).

We can get part way there simply by changing the property to
"background-image" so that we don't conflict with other background
properties.

But what if we went farther? most of our CSS3 mixins are dealing with
experimental CSS properties (-webkit-box-shadow, -moz-box-shadow, box-
shadow), and so it makes perfect sense to use a mixin and return the
various properties needed. CSS gradients are different. Even in CSS
they are not properties, but functions. Why would we change that
format here? Shouldn't Gradients be written as a function? Wouldn't
that also make it easier for us to handle the fact that this new
syntax use an arbitrary number of arguments?

Of course, I don't know Ruby, so...

My $0.02

-e

[Chris Eppstein]

I think we need a combination of functions and mixins to create a
cross browser capability, this is because you cannot "progressively
enhance" with just functions. You have to repeat the property several
times with different values.

Hunt & pecked on my iPhone... Sorry if it's brief!

> --
> You received this message because you are subscribed to the Google
> Groups "Compass" group.
> To post to this group, send email to compas...@googlegroups.com.
> To unsubscribe from this group, send email to compass-user...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/compass-users?hl=en
> .
>