CSS3 vs JavaScript: What is the advantage? [closed]

Question

It seems with HTML5/CSS3, there is a larger push towards CSS-only animations, effects, navigations, etc.

Is this purely because of the tendency of C/Java/etc developers to use JavaScript 'incorrectly' (mostly in a semantic sense, I guess)?

Or is there an advantage of CSS over JavaScript? If so, why would CSS be better? Is it faster?

Also, semantically-speaking, shouldn't CSS only be used for styling/positioning? So is CSS starting to go outside the bounds of what it was designed for?

Answer 1

Is this purely because of the tendency of C/Java/etc developers to use JavaScript 'incorrectly' (mostly in a semantic sense, I guess)?

No, you've just about missed the point by a mile. The main reason people use JavaScript is because they want to support as many browsers as possible. CSS3 is a new technology, which only the latest and greatest browsers understand, whereas JavaScript has been around for decades.

Or is there an advantage of CSS over JavaScript? If so, why would CSS be better? Is it faster?

Yes, because the browser knows best how to make use of system resources to perform animations, and it can do that job best when implementing them natively using CSS (e.g. hardware acceleration). With JavaScript, you're relying on a browser's scripting engine to calculate animations for you, which can get very expensive.

But as mentioned above, the greatest drawback is lackluster support.

Also, semantically-speaking, shouldn't CSS only be used for styling/positioning? So is CSS starting to go outside the bounds of what it was designed for?

Broadly speaking, it has always been meant for presentation — separating that as a concern from content and structure, when HTML was riddled with presentational attributes munged all over the place, spelling development hell for any frontend developer of their time.

All these fancy effects you describe can easily be categorized under presentation (i.e. they don't have anything to do with application logic, business logic, content, data, etc), so it would seem apt that they should be done with CSS. And that brings us where we are today.

So, to summarize:

• JavaScript is used when browser support is a foremost priority (and in business applications it almost always is). It is also often maintained as is if it's too costly to convert or migrate to another technology.

• Otherwise, CSS is used. Of course, a JavaScript fallback is often provided. You'll often see this in experiments or new/startup projects.