CSS effects: Convenience at a price

 David Nuon

CSS has come a long way since it's first spec was created in 1996. Back then, all you could really do was change the color of text or backgrounds of elements, but now we can easily create great effects without having to use a single image. But be careful—the convenience of CSS effects comes at a price.

However, not paying attention can cause poor performance like slow scrolling, and no one likes slow scrolling. Here are some things to keep in mind when writing CSS.

Gradients can be really slow

CSS has some pretty neat features and I love them—including gradients. So, does that mean we're done awkwardly cutting out 1px images in Photoshop? Well, not really. Using CSS gradients means the browser has to spend time calculating each step in the gradient and, depending on the complexity, it can slow down display time quite a bit.

border-radius and box-shadow

I love rounded corners and I love box shadows but I also like smooth scrolling. These two can certainly get in the way of it. All things considered, adding a little shadow to a box won't slow down an entire page, however, adding it to many, many elements can cause some problems. Rounding off corners requires more math that browsers are responsible for while drawing shadows have the same issue gradients do.

You may want to look into alternatives like border-image if you are experiencing slowdowns.

Image Filters

Image filters are a great way to save time and avoid trips back and forth into Photoshop to generate images for effects. Want to have a color change on hover? Just add filter:hue-rotate() to the CSS :hover rule.

Again, convenience comes at a price. Having too many images that have filters or large values can take a toll on the CPU. I wrote a simple demothat generates CSS filter declarations and you can see for yourself what that means. Try playing around with the sliders a bit. You'll notice that the more the sliders are to the right, the less responsive the page becomes.

But I know some of you are thinking "don't we want to reduce the number of network transactions?" Yes, we do, but we have to take into account CPU performance. It's really easy to think computers are getting better and better but we sometimes forget to consider that most mobile devices in use still aren't as performant as desktops and laptops.

Ultimately, what I've suggested are only small things you can do to improve your pages performace. It really boils down to putting the effort to optimize your CSS and do lots and lots of testing.

via:http://zunostudios.com/blog/development/170-css-effects-convenience-at-a-price?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+zunostudios%2FGzuP+%28Zuno+Design+Studios+Blog%29