Re: Gradients in CSS3?

Matthew Raymond wrote:
> Ben Ward wrote:
>   
>>> There's one problem with all this by the way: in most cases, it isn't
>>> incrementally renderable.
>>>       
>> OK, my brain's gone like butter. Could you possibly slap up a quick
>> example of the problem that I can look at when I get home. I'm pretty
>> sure I know what you're getting at but would like to be sure! Thanks.
>>     
>    He means that if the gradient is a function and it's not supported,
> then you could end up with a situation where no color is specified.
> Pretty easy to get around, though:
>
> | background-color: blue;
> | background-color: gradient(blue, red, 90deg);
>   
No, that’s not what I mean...

What I mean is that, to determine the colour to draw at a certain 
position in a gradient, you need to know the total size of the gradient. 
In CSS, the height of a block is usually determined by the content, 
which can be loaded incrementally. In the case of inline blocks and 
floats, the width is, too.

So, if you have the background or borders of that block be a gradient, 
they have to be redrawn all the time. Especially in the case of a 
gradient background, that means redrawing all the contents. If I apply a 
gradient to the background of my website (probably not an uncommon thing 
to do), that means continuous reflows.

For borders, it is less of a problem because they are (in normal flow) 
layered on top of the background and the contents. Which is why e.g. 
border-radius has few incremental reflow problems.

In addition to the incremental reflow problem, I see another:

Desktop browsers may be capable of handling such big reflows, although 
even they don’t handle it well - the XPath 2.0 specifications already 
load very slowly on the computer I use at work. Anyways, there are 
mobile and all sorts of other browsers which are not capable of that, so 
they will not support gradients.

The cascading can in theory make it degrade well as Matthew pointed out, 
but: will authors specify a fallback colour? For every author that 
doesn’t, the page is probably impossible or very hard to use on browsers 
that don’t support those gradients. So, the syntax would at least need 
to inherently provide a fallback, like:

background-color: blue;
background-color-gradient-to: top-bottom red;

Because of the above mentioned reason, this is a better syntax than 
gradient().

Of course, this doesn’t necessarily prevent a gradient colour function 
from appearing in CSS, but they are certainly not arguments in favour, 
and show that even a thing that seems so simple needs to be thought out 
thoroughly...


~Grauw

-- 
Ushiko-san! Kimi wa doushite, Ushiko-san!!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Laurens Holst, student, university of Utrecht, the Netherlands.
Website: www.grauw.nl. Backbase employee; www.backbase.com.

Received on Monday, 15 August 2005 19:01:01 UTC