Help with webkit, css3, and media queries

HTML & CSS
1

Hey guys, I have two questions that I was wondering if you could help me with.

First, using media-queries or some other technique is there a way to link a CSS stylesheet only if the browser is Safari?

The reason behind this my second question.
I found this really cool graphic-animation using CSS3 & webkit, but for some reason it is laggy in Chrome, which is also a webkit browser, but fins in Safari.

Would you be willing to help me fine tune the code so that it is less laggy in Chrome or help me develop a way that the suer only sees it; in other words, the stylesheet is only attached, if the browser is Safari?

Here is the animation in action.
And here is the CSS behind it.

2

there is a truck load of info on the www on how to detect browser type

3

I know, but I wanted to post a topic in case someone else wanted to know. :slight_smile:
As soon as I get something that works, Ill post it

4

With my research there is no way to detect the browser with CSS3 @media-queries.
As Kalon suggested above, Javscript is the way to go

5

You can target webkit browsers with this

@media screen and (-webkit-min-device-pixel-ratio:0) {
    div { property:value }/* target  webKit browsers*/
}

It’s hacky though and I would prefer a js method for a public site.

6

t’s hacky though and I would prefer a js method for a public site.

I agree it is hacky. If the JS solution Kalon is helping me with here doesn’t end up working, which I am very thankful for the help by the way Kalon, then I may have to resort to that. Also CSS3 doesnt seem, especially @media queries doesn’t seem to be supported much at least not yet, but then you still have post-legacy, but older browsers such as firefox 2.0, chrome 2.0, safari 3.0, and IE 8,7,& 6