Send As SMS



Credits

Ten thousand years of Roboshrub.

Fangs for the memories.




In today’s state, Roboshrub Incorporated is an entity entirely devoted
to the execution of what normal people would refer to as “bad ideas.”

It was the creator’s original idea that all concepts, whether
useful or not, contribute to the global subconscious level of progress
for the human race. Therefore, we contend that no idea is an unfit
idea, and vow to act on each and every one of them.

Roboshrub Inc.
Public Communications Department






Changes may not fully take effect until you reload the page.




For your insolence, I condemn you to...

Suffer the Fate of a Thousand Bees!
(Before they go extinct)

Print Logo

8.01.2009

CSS Gradients in Firefox

Over a year ago, the Webkit project introduced a fantastic new kind of Internet technology — the ability to create color gradients via CSS. This solves an age-old deficiency in the language which confined web developers and designers to either solid colors or images.

Today, that ability had taken root in the mighty rendering engine that powers Firefox.

There are some major differences between the implementations, which this article will now explain:

(1) Placement of Type

Webkit includes the type of gradient as an argument of a gradient function; Gecko (Mozilla Firefox) includes this definition in the property name. Hence, to declare a radial gradient:

background: -moz-radial-gradient(…);
background: -webkit-gradient(radial, …);


The Webkit implementation would probably be much more practical if there were many types of gradients. Currently, there are only linear and radial supported. One could argue that because the rest of the syntax is identical for both linear and radials, the type is interchangeable and two separate properties are unneeded for what is essentially the same function.

That argument will certainly come up when this feature is standardized.

EDIT: I forgot that radials require an additional radii argument. The two functions then have different parameters, and are NOT essentially the same.

(2) Units of Measurement

Webkit supports only positioning keywords, percentages, and unitless numbers (<number>) that end up interpreted as pixels (<point>). Gecko, instead of supporting unitless numbers, mandates actual units of measurement (<length>):

background: -moz-linear-gradient(0 0, 50px 50px, …);
background: -webkit-gradient(linear, 0 0, 50 50, …);


I really hope the Mozilla syntax is adopted here, it would be a great boon to liquid layout. The Webkit implementation’s lack of relative units is something I see as a flaw. The same discrepancy exists in the Mozilla and Webkit implementations of 2D Transforms.

(3) Repeating Background

This one’s a doozy. By default, Gecko treats gradients just like it would any other background image, and repeats them. This turns radials into spirals and linears into pinstripes. Webkit will not repeat gradients at all:

Webkit (Google Chrome 2.0.172.37)
Screenshot of gradients in Webkit.

Gecko (Build 20090801124215)
Screenshot of gradients in Gecko.

I generated these images using a modified version of a Webkit test case. You can force Gecko to render gradients in the same way as Webkit by declaring the background as non-repeating:

background: -moz-linear-gradient(…) no-repeat;
background: -webkit-gradient(linear, …);


When you consider that the next version of Firefox, and the current version of Webkit, already have support for multiple backgrounds and background-sizing (-moz-background-size and -webkit-background-size respectively), some amazing designs are becoming possible.

Let’s hope the standards catch up.

Labels:


Processing 2×100 Robo-Comments:

Blogger Karl the Sorcerer gesticulated...

Pixels ARE relative.

8/02/2009 5:29 PM  
Blogger His Majesty gesticulated...

So is your mom.

8/02/2009 5:52 PM