CSS WG Blog – Radial Gradient Readability

This is a page from the Cascading Style Sheets Working Group Blog. Some other places to find information are the “current work” page, the www-style mailing list, the Future of CSS syndicator, and the issue list on Github.

Do you want to know how the CSS WG works? Fantasai has written about:csswg, An Inside View of the CSS Working Group at W3C.

Radial Gradient Readability

By fantasai November 10, 2011 (Permalink)
Categories: general

At the CSSWG F2F last week, I raised the issue that the radial gradients we were discussing were unreadable to me, and probably therefore to much of the intended audience. It was not at all obvious by looking at the gradient syntax what the various numbers and lengths might be.

radial-gradient(60% 43%, 25px 25px, #b03 99%, transparent)

So Tab Atkins, David Baron, Brad Kemper, Brian Manthos and I hashed out an alternative syntax.

radial-gradient(circle to 25px at 60% 43%, #b03 99%, transparent)

We’d like your opinion on which is preferred and why.

Examples
Current WD	Current ED
`radial-gradient(white, black)`	`radial-gradient(white, black)`
`radial-gradient(farthest-corner ellipse, center, white, black)`	`radial-gradient(ellipse to farthest-corner at center, white, black)`
`radial-gradient(top left, white, black)`	`radial-gradient(at top left, white, black)`
`radial-gradient(top left, farthest-corner ellipse, white, black)`	`radial-gradient(ellipse at top left to farthest-corner, white, black)`
`radial-gradient(circle, white, black)`	`radial-gradient(circle, white, black)`
`radial-gradient(circle, center, white, black)`	`radial-gradient(circle at center, white, black)`
`radial-gradient(center, 5em 5em, white, black)`	`radial-gradient(to 5em, white, black)`
`radial-gradient(center, 5em 5em, white, black)`	`radial-gradient(circle to 5em at center, white, black)`
`radial-gradient(75% 75%, closest-side circle, white, black)`	`radial-gradient(circle to closest-side at 75% 75%, white, black)`
`radial-gradient(25% 2em, 15px 30%, white, black)`	`radial-gradient(ellipse to 15px 30% at 25% 2em, white, black)`

The generic forms are (very roughly speaking):

General Syntax
Current WD	Current ED
`radial-gradient(position, [size \|\| shape], color-stops)`	`radial-gradient(shape [to size \|\| at position], color-stops)`
Shape/size and position are optional, unless the shape/size is given with explicit lengths, in which case the position must also be specified	Each of shape, size, and position are optional. The size and shape clauses can be reordered.

As a side effect, the keyword-based syntax more easily allows us to add other capabilities in the future. For example, offset radials could be expressed using a from position clause for the color origin.

So, which is better or easier to read, the current WD syntax or the current ED syntax (and why)?

You can respond on CSS3.info or on www-style.

« Previous article Next article »

Comments

Stuart Robson 2011-11-16 08:26:56 I think this alternative syntax is much better for readability. I say we should have this in the WD now.

Comment form

You can use this form to send a comment to the author. A selection of the comments may be published on this page. Comments may be shortened. If you don't want your comment to be published, please, say so in your message, or send it by e-mail instead.

Your e-mail address will not be published. Required fields are marked *