Comments on: background-clip: text

By: Nicholas Shanks

Nicholas Shanks — Tue, 25 Mar 2008 14:37:47 +0000

@hyatt: Actually your example doesn’t degrade gracefully because it uses color: transparent. Both the background and background-clip are ignored by older/other UAs, leaving transparent text on a white page.

By: Dave Hyatt

Dave Hyatt — Fri, 21 Mar 2008 20:25:05 +0000

kL: Actually it’s pretty easy to make it degrade gracefully just by using multiple background layers. Other browsers reject multiple backgrounds.

By: Fyrd

Fyrd — Fri, 21 Mar 2008 18:28:42 +0000

@Robert Blaut

I see. Seems rather limiting to me, so I hope support for variable width SVG files will be added eventually too.

By: Robert Blaut

Robert Blaut — Fri, 21 Mar 2008 17:08:27 +0000

@Fyrd: Using SVG in this case and also as src attribute for img element is currently limited to svg files with explicit width
and height set. Check this comment for details: http://bugs.webkit.org/show_bug.cgi?id=5971#c23

By: kL

kL — Fri, 21 Mar 2008 15:16:10 +0000

If I understand this correctly, the whole background will be visible in browsers that don’t support background-clip:text. I don’t think that’s nice degradation. I’d rather have fallback to similar, solid text color, but that is not possible if there’s risk of background being shown behind the text.

I think making this a completely new property, like text-background:, would be much better.

By: eAi

eAi — Fri, 21 Mar 2008 12:27:00 +0000

Well, I can’t believe using SVG for a background image can be hard to implement. I imagine it could be quite useful for other things, such as generating ‘button’ images etc, assuming the SVG can be scaled neatly to fill a div…

By: Fyrd

Fyrd — Fri, 21 Mar 2008 12:25:32 +0000

Hmm, an interesting and quite logical proposal. On the subject of SVG files as CSS backgrounds, I've read that this is supposed to be supported in Safari 3.1. However, it doesn't actually appear to work in most examples I've seen that do work in Opera 9.5. Is this a bug that is being worked on?

By: Rijk

Rijk — Fri, 21 Mar 2008 11:26:50 +0000

Yes, gradient backgrounds have been suggested for CSS3, but nothing has been decided yet. With browsers implementing SVG, it should soon become possible to use a SVG file as background image, which makes it relatively easy to add a gradient background. This is already working in the Opera 9.5 test builds. I’ve used this on my site http://people.opera.com/rijk/opera/ . I have to say though that something in support for simple gradients in CSS would still be easier.

By: theallan

theallan — Fri, 21 Mar 2008 09:35:55 +0000

My understanding of gradients in CSS backgrounds, is that, although it has been discussed, it won’t be included as this is the area of the SVG working group. There is no real point in overlapping the work that the CSS and SVG people are doing. And as we are seeing, the SVG support in browsers is now starting to come along quite nicely.

Very nice work on the background-clip!

By: eAi

eAi — Fri, 21 Mar 2008 04:35:04 +0000

Googling shows gradients have been suggested for CSS3 for many years, I agree they seem an obvious and easy thing to include and very widely used – just look at this page for example! Someone who knows more may be able to point out that it’s already in a spec or a good reason why it isn’t…