Re: Automatic spec annotations

On Tue, May 10, 2011 at 11:34 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> BK:
> Has there been much experience with the repeating varieties [of
> linear-gradient and radial-gradient]? Most of the examples I've seen in the
> wild are using background-repeat to do the repeating. I'm not saying I've
> seen everything though, not by a long shot. But I haven't heard or seen much
> about people using that, even though I assume it is implemented too.
>
> Tab:
> Yes, check out Lea Verou's CSS Patterns Gallery
> <http://leaverou.me/css3patterns/>. Several of them use repeating
> gradients in the obvious way.
>
> BK:
> I disagree that using a special version of linear-gradient to make
> backgrounds repeat is "the obvious" way. The obvious way to repeat
> backgrounds is with background-repeat. And that is what most of the ones I
> looked at did.

Like I said, mostly for bandwidth savings, as the point of the
patterns gallery is to create images that are smaller than the
equivalent PNG would be.


> Tab:
> A few that use background-position
> instead do so for bandwidth savings, such as the blueprint grid, where
> it happens that you can create a repeating square grid in slightly
> fewer bytes by defining a two-color gradient and an explicit
> background-size.  (This is largely because defining stripes rather
> than smooth gradients is relatively verbose, as you have to write each
> color twice - a stripe generator is on my list of potential Images 4
> things.)
>
> BK:
> I see that "argyle" uses two layers of repeating-linear-gradient to do the
> repeats and two layers of background-repeat to do the repeating. Otherwise,
> most of the others I looked at used normal background properties, and I
> think they all use background-size. I didn't look at each and every example,
> but that was my impression after looking at many of them. From these
> examples, I would say that using normal background repeating properties is
> the norm, and using the mutated version of gradients to do the repeating is
> an unnecessary exception.

For argyle, the two layers that use background-repeat *cannot* be
replaced by repeating-linear-gradient - they're setting up the
checkerboard, which employs a completely different technique.

Otherwise, the patterns that can potentially use repeating gradients
are tartan, madras, blueprint grid, tablecloth, and the three stripes.
 Of those, blueprint grid, tablecloth, and horizontal and vertical
stripes can also potentially use background-repeat, and they do.  If
the pattern you're repeating is a simple two-color alternating
pattern, you do get significant character savings by using
background-position, and that's exactly what those four are, so there
you go.

That said, on Chrome Linux at least, blueprint grid has messed up
spacing, and I think it would be a lot easier to understand in general
if it just used four repeating linear gradients (if we had a stripe
generator, doing it as two would be reasonable, but it's too verbose
to do that with the gradient generator).

~TJ

Received on Tuesday, 10 May 2011 21:07:56 UTC