Conditional Webkit

[ChocolateLover]

I'd like to include some CSS that only webkit supports.

What's the best way of adding the CSS conditionally? Something like

<!--[if webkit]>

or would I have to include each supported browser, and if so were could I find the codes for the browser, for example Internet Explorer 6 is IE 6.

Any help appreciated, thanks.

[chrishirst]

Only Internet Explorer has conditional comments.

Just use the -webkit- vendor prefix to the CSS properties.

[ChocolateLover]

Thanks but I'm using

-webkit-background-clip: text;

to create gradient text and where it's not supported I get the gradient background, so I do need to apply it only to browsers that support webkit.

[chrishirst]

????

Only browsers built with the webkit rendering engine support the -webkit- prefix.

That's Safari and Chrome.

[ChocolateLover]

Sorry, I should have posted the CSS to be more clear.

To give the text a gradient I'm giving the background a gradient and then using the text as a mask. If the browser doesn't support clipping to the text, I'll just use a single colour. It's the clipping to text that's only supported by webkit, so other browsers I guess show the background but don't clip to the text. It's not essential, just a nice to have and a learning experience.

background-color: #c86476;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c86476), to(#b44b57));
background-image: -webkit-linear-gradient(top, #c86476, #b44b57);
background-image: -moz-linear-gradient(top, #c86476, #b44b57);
background-image: -o-linear-gradient(top, #c86476, #b44b57);
background-image: -ms-linear-gradient(top, #c86476, #b44b57);
background-image: linear-gradient(top, #c86476, #b44b57);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#c86476', EndColorStr='#b44b57');
background-clip:

  -webkit-background-clip: text;

Thanks for your help.