CSS3 vs JavaScript: What is the advantage?

Question

With HTML5 / CSS3, there seems to be a bigger push for animations, effects, navigation, etc. CSS only.

Is it just because of the tendency of C / Java / etc developers to use JavaScript “incorrectly” (mostly in a semantic sense, I think)?

Or is there an advantage to CSS over JavaScript? If so, why is CSS better? It's faster?

Also, semantically speaking, shouldn't CSS be used only for styling / positioning? So, CSS is starting to go beyond what it is for?

Answer 1

Is it just because of the tendency of C / Java / etc developers to use JavaScript “incorrectly” (mostly in a semantic sense, I think)?

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

Or is there an advantage to CSS over JavaScript? If so, why is CSS better? It's faster?

Yes, because the browser knows better how to use system resources to perform animations, and it can do this better when implemented using CSS (for example, hardware acceleration). With JavaScript, you rely on a browser script engine to calculate animations for you, which can become very expensive.

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

Also, semantically speaking, shouldn't CSS be used only for styling / positioning? So, CSS is starting to go beyond what it was intended for?

In a broad sense, it was always intended for presentation - separating it as a problem from content and structure when HTML was riddled with presentation attributes, confusing everywhere, creating a hell of a hell for any interface developer of its time.

All these bizarre effects that you describe can be easily classified under the presentation (i.e., they have nothing to do with the application logic, business logic, content, data, etc.), so it would seem that they should be made with CSS. And that brings us where we are today.

So, we summarize:

• JavaScript is used when browser support is a top priority (and in business applications it is almost always there). It is also often supported, as if it were too expensive to convert or transfer to another technology.

• Otherwise, CSS is used. Of course, a javascript reserve is often provided. You will often see this in experiments or new / launches.

Answer 2

I do not see VS here. In fact, I think a great web application should be mixed with both of them!

I like to think of JavaScript for user interactions and CSS for design. This is how I decide which one I should use for a specific purpose.

Currently, you have a lot of great work from brilliant people to solve compatibility issues. For example: http://modernizr.com/

Answer 3

One of the main problems is that not all browsers have Javascript enabled. Therefore, if you can achieve the same effect using HTML5 / CSS3, it has the advantage that it will work on all modern browsers, regardless of whether Javascript is enabled or not.

Answer 4

Yes, css is faster than javascript. In addition, javascript requires an additional HTTP request, while you can avoid this if you use only css.