Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Update gradient syntax to save bytes and to be future-proof #2795

Closed
myakura opened this Issue · 0 comments

2 participants

@myakura

The latest CSS3 Images has changed the syntax of linear-gradient. 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.

@myakura myakura referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
@toddparker toddparker closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.