Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gradient minimisation #107

Open
kizu opened this issue Nov 9, 2012 · 1 comment
Open

Gradient minimisation #107

kizu opened this issue Nov 9, 2012 · 1 comment
Labels

Comments

@kizu
Copy link

kizu commented Nov 9, 2012

There are a lot of ways to minify gradients' code, I'll try to list there different things I'll remember over time.

Linear gradients

Direction

  1. to bottom in new syntax, top in old, 270deg in old and 0deg in new can be omitted, so linear-gradient(to bottom,#FFF,#000) etc. could be minified to linear-gradient(#FFF,#000).
  2. Other values like to top, to left etc. could be minified to the angles in degrees, see this article to see the differences between syntaxes for minifying it. This way, linear-gradient(to right,#FFF,#000) can be minified to linear-gradient(90deg,#FFF,#000), but in the old syntax 180deg can be minified to right etc.
  3. Since angles are circular, we could minify degrees like 1215deg to 45deg. But be careful with different syntaxes and in feature (when the gradients could be animated/transitioned) that could become somewhat non-safe magnification.

Color-stops

  1. The first and last color-stops have default stops at 0 and 100%, so #000 0,#FFF 100% could be minified to #000,#FFF.
  2. We could use the fact that if a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop. So, we could minify #000,#FFF 25%,#000 50%,#FFF 75%,#000 to #000,#FFF,#000,#FFF,#000 etc.
  3. If some of the consecutive color-stops at the start or the end share the color, they can be merged. #000,#000 25%,#FFF 75%,#FFF is the same as #000 25%,#FFF 75%.
  4. In consecutive stops with the same position only the first one should have the full number, the next ones can be set to zeroes. So, #000 50%,#FFF 50%,#FFF 75%,#000 75% is the same as #000 50%,#FFF 0,#FFF 75%,#000 0

That's it for now, see it in action there (in webkit for now, 'cause there are bugs in prefix-free used there, I'll make examples with all the prefixes later).

When I'll remember other things or get to the repeating and radial gradients, I'll update this issue.

@sansmischevia
Copy link

Any progress on this? Would be awesome to get gradients working. Right now

  background-image: linear-gradient(black, rgb(148, 34, 34) 52%, white);

gets turned into:

  background-image:linear-gradient(#000, #94222252%, #fff)

where the hex color and the % lacks a space in between them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants