• 0

CSS3 + Webkit


Question

I have been confortable using CSS for the last few years and have recently started using javascript for fancy effects. However, I would like to achieve a lot of the same effects using pure CSS if I can.

So CSS3 is the latest version, but a lot of the cool animations I see on other sites seem to use the -webkit CSS notation.

Is this standard CSS or does this only work on webkit browsers (Chrome + Safari).

Would I have to implement another solution for the other browser engines? - Internet Explorer (Trident) and Firefox (Gecko).

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Yes, -webkit- is specific to webkit browsers only so it would only work for Chrome and Safari.

If you were to go crazy with CSS3 animations, you would either need to find a way to support IE9, Firefox and Opera.. or just let them have no animations and let webkit have all the fun.

You should bookmark http://findmebyip.com/litmus--awesome reference chart to see what will be support and what isn't by browser.

Some other odd ones:

http://www.webdevout.net/browser-support-css

http://www.webkitbits.com/

http://webkit.org

Link to comment
Share on other sites

  • 0

Yes, the -webkit ones only work on webkit browsers. CSS3 still isn't finished yet, so the spec for certain things can change at any time. If say you use -moz-box-shadow currently and the final spec calls for a completely different syntax, they can introduce the final box-shadow without breaking your old sites.

For example, recently webkit updated their CSS3 gradient support to match Mozillas.

Hope that helps!

Link to comment
Share on other sites

  • 0

Thanks guys, very helpful links too cupcakes :p

Guess I just want to know why these browsers are going ahead and implementing these features independent of one another. I thought that browsers were trying to conform to web standards these days to avoid the same mess that earlier versions of Internet Explorer got us into.

So... are all these -webkit and -moz features part of the CSS3 road plan... its just that they havent been finalised yet?

Link to comment
Share on other sites

  • 0

Said best from a stackoverflow answer:

The -moz-border-radius describes Mozilla's semantics. If CSS3 gets published with different semantics, then Mozilla can always implement border-radius using those semantics and they won't break anyone's website.

Meanwhile, if they just used border-radius directly, then if CSS3 gets published with different semantics, Mozilla has to choose between breaking people's sites, or forever supporting nonstandard CSS.

source

Link to comment
Share on other sites

  • 0

I've been putting all three just to make sure that it works in the browsers that support it now, and will support it later. Though I do hate those engine specific things.

Link to comment
Share on other sites

  • 0

Said best from a stackoverflow answer:

source

That's kinda wrong, as in Gecko doesn't do it (but WebKit does).

WebKit treats the two properties as unique, so a bug effecting the prefixed variant will stick around, but not if you use the un-prefixed variant (which is why you specify it last, not first as people are starting to do for some reason) Gecko on the other hand treats the prefixed variant as an "alias" for the un-prefixed variant, and both share the common underlying code, so if any bugs or changes happen it'll effect both properties equally.

And that being said, both box-shadow and border-radius have lost their prefixes in Gecko 2 (Firefox 4), and box-shadow at least got updated to match an updated spec (after it was realised that no browser implemented it the same as any other browser)

Link to comment
Share on other sites

  • 0

Except the quote I used was for the interpretation of the prefixes--It wasn't to literally use border-radius (or anything that's been updated for FF4/Gecko2) as an example. If you even view the stackoverflow, you can see an updated comment that links to the update to the prefix being dropped for FF4.

But thanks for your interpretation on the prefixes.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.