jquery/jquery-mobile — Issue #2795: Update gradient syntax to save bytes and to be future-proof
Author: myakura
Created: 2011-10-21 14:01:37+00:00
State: open

The latest CSS3 Images has [changed the syntax of `linear-gradient`](http://www.w3.org/TR/2011/WD-css3-images-20110908/#linear-gradients). If we want a top-to-bottom gradient we write `linear-gradient(to bottom, [...])` instead of `linear-gradient(top, [...])`. So we need to update unprefixed rules in theme CSS.

However, the spec has been stating that if the gradient goes from top to bottom we can omit keywords. And browsers that support gradients understand this omission.

So why don't we update the whole gradient syntax by dropping all the `top, ` s, like:

background-image: -webkit-linear-gradient(#3c3c3c, #111);
background-image: -moz-linear-gradient(#3c3c3c, #111);
background-image: -ms-linear-gradient(#3c3c3c, #111);
background-image: -o-linear-gradient(#3c3c3c, #111);
background-image: linear-gradient(#3c3c3c, #111);

rather than changing only the unprefixed rules like:

background-image: -webkit-linear-gradient(top, #3c3c3c, #111);
background-image: -moz-linear-gradient(top, #3c3c3c, #111);
background-image: -ms-linear-gradient(top, #3c3c3c, #111);
background-image: -o-linear-gradient(top, #3c3c3c, #111);
background-image: linear-gradient(to bottom, #3c3c3c, #111);

The former is future-proof too and it also saves a few bytes.