32 Javascript Alternatives with Pure CSS – Updated

http://speckyboy.com/2011/01/03/32-javascript-alternatives-with-pure-css-updated/

by janektm • 15 years ago

111 15 15 years ago

RoyG• 15 years ago

This is pretty interesting, but can someone please tell me the advantage of using CSS instead of Javascript? Is it to reduce code cruft in each page, or because some people turn Javascript off?

MostExtremeCake• 15 years ago

It's mostly a cruft/style issue. Some people prefer to have as much of their style-related code in pure css as possible. People having javascript off is not really a concern anymore as long as you're providing them with a baseline experience.

For more complicated animation, css can perform better than javascript because the browser is allowed to optimize css animation as it sees fit.

For example: a browser will stop trying to figure out the position of an element animated using css when you switch to a different tab. It will then "catch up" when you switch back. With javascript, it does not have that option an will continue to animate all elements even when you can't actually see the tab. This can eat into battery life.

jonsmock• 15 years ago

In addition to the argument for keeping your styles together, CSS is declarative while Javascript is imperative. There are just less moving parts in CSS, and the browser keeps track of any "state" that you would be tracking in Javascript.

PetrolMan• 15 years ago

Some of the demos were pretty lightweight in comparison to their javascript equivalents.

fuzionmonkey• 15 years ago

This is unrelated to some of the demos, but one advantage to using CSS as opposed JavaScript, particularly regarding animations, is that CSS animations can be hardware-accelerated.

uriel• 15 years ago

See NoScript, the greatest browser extension ever created.

dgunn2• 15 years ago

While I haven't used many of the techniques described in the article, I would imagine in many cases that using the CSS option would produce a smaller web page. This is because all the elements you are modifying (in some way) with JavaScript also are likely to have styles associated with them.

Also, if you're using jQuery (or some other framework) you necessarily add several kB to the file size before you even write any code. While a single style might be on the order of a few hundred bytes. Remember, bandwidth is money and cutting down anywhere you can is important (just ask Google).

This won't hold true for all cases, but seeing these examples has already cause me to think of several ways in which it would. Anyway, creativity loves options! So it’s definitely worth reading.

mcdaid• 15 years ago

This is only the case if the user has not got a cached version of jQuery, which is likely if something like google's hosting service. In this case the jQuery code may well be shorter than the css especially with all the browser specific rules. In addition the jQuery version will work in all browsers.

ez772• 15 years ago

Are there security concerns related to enabling CSS?

netghost2• 15 years ago

Absolutely! The styling could be entirely offensive, cause blindness, or unpleasant reactions.

rudasn• 15 years ago

I am not about now but there were a few. Google css xss.

There was/is(?) the background-image on visited links "hack". Put simply, you could specify a background-image on a link to, let's say, facebook.com and you would know if the user has visited facebook because they would have loaded the image.

I'm pretty sure today's browsers don't let you specify background images on visited links because of this.

ez772• 15 years ago

Thanks, that led me to http://scarybeastsecurity.blogspot.com/2009/12/generic-cross... .

netghost2• 15 years ago

If anyone is curious about some other neat things you can do in css, I wrote up a little article about drawing lines with it: http://monkeyandcrow.com/blog/drawing_lines_with_css3/

I'll leave it as an exercise to the reader to come up with practical applications ;)

romaniv• 15 years ago

Interesting techniques, but some of these styles don't work on IE8, and some are way too hackish. I really feel that there should be a way do a CSS dropdown without using stuff like "text-indent:-9999px;".

32 Javascript Alternatives with Pure CSS – Updated

Related Stories