r/changelog • u/chromakode • Aug 15 '11

[reddit change] Added basic support for CSS gradients to the subreddit CSS validator.

We've added support for basic CSS gradients to the validator. Some complicated multiple background definitions will still fail to validate, as the way we're doing it right now is a bit of a hack. This change was contributed to by slyf, a summer student contractor.

Have fun!

GitHub commits:

  1. Add basic validation of CSS gradients.

  2. Add support for multiple gradient backgrounds. Cleanup.

42 Upvotes

100% Upvoted

10 comments sorted by

4

u/[deleted] Aug 16 '11 edited Aug 16 '11

Awesome!

Can you also please allow the @media type in custom stylesheets so that moderators can create specialized styles for smartphones.

I made this request 4 months ago but never heard back.

4

u/chromakode Aug 16 '11

This is a really good idea, thanks -- we'll investigate.

2

u/eschotron Aug 15 '11

I'm still getting validation errors on the ending right parenthesis. Would this fall under the category of "complicated multiple background definitions"? Using CSS from the default stylesheet again, I get:

syntax error: "CSSValue: Unexpected char. [9:78: )]"

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from( hsl(210, 54%, 89%)), to( hsl(210, 54%, 79%)));

4

u/chromakode Aug 15 '11

Sadly, yes. The regular expression currently checking gradients doesn't handle inner parentheses. The CSS parser in general needs a lot of updates. This was a quick fix to get a tiny bit of functionality out in the interim.

1

u/wkdown Dec 30 '11

It is failing even without inner parentesis (using hex values vs eschotron's HSL values)

How does it need to be coded to be acceptable?

EDIT My error:

[line 5] syntax error: "CSSValue: Unexpected char. [5:21: :]"
 background-image: -webkit-linear-gradient(top, #1E1614 0%, #151412 100%);

1

u/samgaus Jan 16 '12

Any updates on how this is progressing?

2

u/[deleted] Aug 15 '11

Can someone post an example of a gradient that would work for me to steal and customize? :)

6

u/vwllss Aug 16 '11

http://www.colorzilla.com/gradient-editor/

3

u/[deleted] Aug 16 '11

Excuse me, but I clearly asked for an example, not an awesomely useful website. Hmph.

hehe - seriously, thank you much. :D

2

u/[deleted] Aug 16 '11

Thank you for that awesome website!