Have There Been Measurements On How Much Faster Css Is Than Javascript For Coding An Effect?

I recently came across a CSS pseudo class that can do an effect for highlighting a form field, rather than using some custom javascript to do the same thing. Another example is hi

Solution 1:

Any stylistic effect that can be reasonably accomplished in CSS should absolutely be done in CSS rather than javascript. It will almost certainly perform better. The real benefit, though, is that using CSS to style things makes sense. That's what CSS is for.

Using javascript to style things that could be styled with CSS doesn't strike me as being any better than using tables for layout, or deprecated tags like <font> or <center> to get the appearance you desire... it's an unwelcome hack.

As for performance, unfortunately this kind of thing is hard to test. Normally you'd do performance testing by doing something over and over as fast as possible in a loop for, say, 5 seconds, and then doing something else as fast as possible for 5 seconds, and then seeing which thing was able to execute the most times in the allotted time. Since there's no way to automate hovering/unhovering an element without adding a bunch of overhead that would skew test results, it's difficult to test.

Solution 2:

I do appreciate the other answers but there is also a bad side to css:

No, css isn't always faster