Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

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

@myakura

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions