Menu

#21 -webkit-gradient values incorrectly parsed

open
nobody
None
5
2010-04-04
2010-04-04
Pixelastic
No

Hello,

When using the latest Webkit goodies, -webkit-gradient values get incorrectly parsed. The position properties (left top) gets incorrectly merged into lefttop. It also happens with numeric values : 45 45 gets transformed into 4545.

Here is my original CSS
.linear {
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
}
.radial {
background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62));
}

Here is the result (using high_compression) :
.linear{background:-webkit-gradient(linear,lefttop,leftbottom,from(#00abeb), to(#fff), color-stop(0.5,#fff), color-stop(0.5,#66cc00))}
.radial{background:-webkit-gradient(radial,4545,10,5250,30,from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%,#019F62))}

And it should be
.linear{background:-webkit-gradient(linear,left top,left bottom,from(#00abeb), to(#fff), color-stop(0.5,#fff), color-stop(0.5,#66cc00))}
.radial{background:-webkit-gradient(radial,45 45,10,52 50,30,from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%,#019F62))}

I coded a dummy patch to avoid this issue, but it really is no good, it only correct this property. Anyway, here it is, on class.csstidy.php, I changed the block code around line 925 to :
if (!($this->str_char === ')' && in_array($string{$i}, $GLOBALS['csstidy']['whitespace']) && !$this->str_in_str)) {
$this->cur_string .= $temp_add;
} else {
// Dummy patch
if ($this->sub_value=="-webkit-gradient") {
$this->cur_string.=' ';
}
}

Discussion

  • Pixelastic

    Pixelastic - 2010-04-04

    More informations about Webkit gradients here : http://webkit.org/blog/175/introducing-css-gradients/

     
  • Anonymous

    Anonymous - 2010-06-29

    I updated my local CSSTidy installation to allow for multiple background: declaration, in order to cope with the multiple gradient implementations in webkit and Firefox browsers.

    You can read it here : http://www.pixelastic.com/blog/188:css3-gradients-with-csstidy

     

Log in to post a comment.