3 ms·

Very cool. But one question from a JS/CSS noob: there seems to be a rash of people doing a lot of things in pure CSS. Is this more for fun and as an experimen

Very cool. But one question from a JS/CSS noob: there seems to be a rash of people doing a lot of things in pure CSS. Is this more for fun and as an experiment, or is there an actual technological reason to do it strictly through CSS? Is pure CSS the way things are heading, or is using javascript the real way to do things?

kristofferR 15y ago
A few people who are (overly, in my opinion) concerned about their privacy and security don't have Javascript enabled in their browser, so stuff that requires it wont work. Thats the only real reason I can see for trying to do as much in CSS3 as possible other than just for the challenge.
- Wilya 15y ago
  Turning Javascript off (or at least manually whitelisting via NoScript) also can give a quite big performance boost, by simply turning off many useless effects. Making CPU-hungry CSS3 kind of defeats that purpose, of course.
  - silvestrov 15y ago
    Some CSS3 effects are implemented using the GPU, so animating using CSS can be much faster than animating using Javascript. See the Netflix talk which has a lot of info about using GPU accelerated animations for e.g. scrolling: http://www.youtube.com/watch?v=xuMWhto62Eo http://www.youtube.com/watch?v=xuMWhto62Eo
runaway 15y ago
Also, as I understand it, pure CSS transitions and effects are often much faster than using javascript.
gjulianm 15y ago
CSS animations and graphic jobs can be hardware accelerated, so it's way faster and doesn't affect the performance of the browser. There was an article posted here on HN about this exact topic, comparing animations in JavaScript vs CSS. I'm sorry I can't find it :(
exDM69 15y ago
It is certainly valuable to do stuff in CSS instead of Javascript to a certain degree. Especially the small gimmicks that add a little visual touch but isn't part of your core functionality. E.g. some CSS3 transition animations. Doing stuff in JavaScript is slower and more error prone. The recent trend of trying to do everything in only CSS3 without Javascript is mostly a challenge for the developer and some of that stuff serves no actual value. For example, many people have been doing some icons with CSS3, by creating a bazillion elements in the DOM tree and adding CSS3 styles. That serves no practical purpose whatsoever, since the HTML+CSS required probably takes more space than the image it's replacing and is very slow to process and render for the browser. CSS can be used to do practical icons and buttons, though. Instead of trying to create a pixel perfect replica of a bitmap, you can do pretty nice icons by using a nice unicode symbol (or text), and put some rounded corners, a neat gradient and a drop shadow. If only people would stop using absolute pixel sizes in their CSS stylesheets, we could get pretty nice scalable (as in screen size) Web UI's.

kristofferR 15y ago

A few people who are (overly, in my opinion) concerned about their privacy and security don't have Javascript enabled in their browser, so stuff that requires it wont work. Thats the only real reason I can see for trying to do as much in CSS3 as possible other than just for the challenge.

Wilya 15y ago
Turning Javascript off (or at least manually whitelisting via NoScript) also can give a quite big performance boost, by simply turning off many useless effects. Making CPU-hungry CSS3 kind of defeats that purpose, of course.
- silvestrov 15y ago
  Some CSS3 effects are implemented using the GPU, so animating using CSS can be much faster than animating using Javascript. See the Netflix talk which has a lot of info about using GPU accelerated animations for e.g. scrolling: http://www.youtube.com/watch?v=xuMWhto62Eo http://www.youtube.com/watch?v=xuMWhto62Eo

runaway 15y ago

Also, as I understand it, pure CSS transitions and effects are often much faster than using javascript.

gjulianm 15y ago

CSS animations and graphic jobs can be hardware accelerated, so it's way faster and doesn't affect the performance of the browser. There was an article posted here on HN about this exact topic, comparing animations in JavaScript vs CSS. I'm sorry I can't find it :(

exDM69 15y ago

It is certainly valuable to do stuff in CSS instead of Javascript to a certain degree. Especially the small gimmicks that add a little visual touch but isn't part of your core functionality. E.g. some CSS3 transition animations. Doing stuff in JavaScript is slower and more error prone. The recent trend of trying to do everything in only CSS3 without Javascript is mostly a challenge for the developer and some of that stuff serves no actual value. For example, many people have been doing some icons with CSS3, by creating a bazillion elements in the DOM tree and adding CSS3 styles. That serves no practical purpose whatsoever, since the HTML+CSS required probably takes more space than the image it's replacing and is very slow to process and render for the browser. CSS can be used to do practical icons and buttons, though. Instead of trying to create a pixel perfect replica of a bitmap, you can do pretty nice icons by using a nice unicode symbol (or text), and put some rounded corners, a neat gradient and a drop shadow. If only people would stop using absolute pixel sizes in their CSS stylesheets, we could get pretty nice scalable (as in screen size) Web UI's.