32 Javascript Alternatives with Pure CSS – Updated | Hacker News Reader

32 Javascript Alternatives with Pure CSS – Updated

speckyboy.com

111 pointsjanektm15 comments

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 ;)

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;".

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?

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.

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.

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.

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.

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.

Good point. Especially about browser compatibility.

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

See NoScript, the greatest browser extension ever created.

Are there security concerns related to enabling CSS?

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

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.

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

Reply on news.ycombinator.com