-
Notifications
You must be signed in to change notification settings - Fork 188
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
Labels
Comments
Any progress on this? Would be awesome to get gradients working. Right now
gets turned into:
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
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
to bottom
in new syntax,top
in old,270deg
in old and0deg
in new can be omitted, solinear-gradient(to bottom,#FFF,#000)
etc. could be minified tolinear-gradient(#FFF,#000)
.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 tolinear-gradient(90deg,#FFF,#000)
, but in the old syntax180deg
can be minified toright
etc.1215deg
to45deg
. 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
0
and100%
, so#000 0,#FFF 100%
could be minified to#000,#FFF
.#000,#FFF 25%,#000 50%,#FFF 75%,#000
to#000,#FFF,#000,#FFF,#000
etc.#000,#000 25%,#FFF 75%,#FFF
is the same as#000 25%,#FFF 75%
.#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.
The text was updated successfully, but these errors were encountered: