Palm webOS CSS Targeting Hack?

Question

Although it is not good practice, I am looking for a CSS hack to target Palm webOS.

The problem is that Safari 3+ is awesome, and I can do some things like gradient background animations on text, but only in Safari.

Right now I use @media screen and (-webkit-min-device-pixel-ratio:0) {} and it works like a charm, no Opera, Firefox, or whatever, because if I set the background to the image as I do in Safari they will all be ruined.

But Palm's browser is based on webkit, and it uses the rules inside, and Palm's browser doesn't support text backgrounds so all I get is the image moving, no text.

I would prefer a CSS hack, but if need be a Javascript one will do.

Answer 1

Easiest way I've ever foundof targeting browsers is the CSS Browser Selector plugin. You have one CSS file and tell it to target browsers with a selector like

.ie .myelement div 
{ 
border: 1px #ccc solid; 
}

.webkit .myelement div
{
border: 1px #f0f dashed;
}

Works great for me!

Hope it helps you out.