Poll Results: CSS3 Features

Almost 7,000 people have weighed in on this poll so far, making it the biggest yet! The question was:

If CSS2 and CSS3 was fully supported in all browsers tomorrow, what would you be MOST excited about?

As always, very interesting results. It was EXTREMELY close for first place, going back and forth a number of times between the three top contenders.

#1) Border Radius (22.0%, 1,541 Votes) - This is the attribute in the most widespread use already, through the mozilla and webkit browser extensions. Clearly a huge desire for designers. Still no signs of support in IE.

#2) Multiple Backgrounds (22.0%, 1,523 Votes) - This is what I voted for! This is going to make some cool things possible with very little markup. The backward compatibility of it is rough though, so this one will be a while.

#3) @font-face (21.0%, 1,424 Votes) - With the new Firefox soon to be supporting this, as well as Safari, Opera, and even IE (!), this is going to start seeing some serious widespread use very soon. The legal implications of what we can and can't use are the problem now.

#4) Animations / Transitions (12.0%, 818 Votes) - WebKit is leading the pack here, with some pretty stunning possibilities. Clearly, animations are part of design, and belong in the stylesheet. These can be applied in a progressive enhancement fashion, so as soon as they move beyond only WebKit I think we'll start seeing more of it.

#5) Gradients (8.0%, 535 Votes) - Defining solid color backgrounds is trivial, but as soon as a gradient is needed, images usually get involved. Yet, gradients are mathematically defined and a perfect candidate for defining with code. WebKit is first to the fray here, and the results are pretty great.

#6) Box Shadow (4.0%, 271 Votes) - Drop shadows are forms of gradients that also typically require the use of images. These can be even more complex than typical gradients as they need to fade in different directions, often requiring use of lots of extra markup and images. Box shadow makes adding drop shadows to elements trivially easy.

#7) RGBa (3.0%, 234 Votes) - The "a" part of RGBa stands for "alpha", as in, transparency. Being able to declare a color with transparency without having to effect all child elements is fantastic for designers. This is seeing widespread support, except for IE of course.

#8) Text Shadow (2.0%, 140 Votes) - Gradients again, only applied behind the vector shapes that make up web text. This isn't even possible with images, so this will bring design possibilities for web text that simply haven't been possible before.

It’s pretty sad how slowly the web moves ahead. How long have we been talking about these new features of CSS? It seems like 3 or 4 years now — yet most of them are still a long way from being commonplace.

I already use Border Radius, Animations / Transitions, Box Shadow & Text Shadow on my site for browsers that will support them. I like to think of this as a gift to users who don’t use IE. I can see why border-radius took first place as it is the most painful CSS3 property to emulate. Multiple-Backgrounds, while cool isn’t something I need real soon as I can just nest a bunch of DIVs, each with their own BG.

Multiple backgrounds would be most helpful in my opinion. I think it would be cool to be able to add a foreground image as well. I can kinda see it useful when you can get transparent images overlaying elements.

I’m mostly exciting about the support for animations with CSS and being able to create rounded borders through CSS alone. I have to admit, I hadn’t really grasped the power of CSS until I mastered the parent and child relationship that is involved with CSS development work. Being able to replace JavaScript for some commonplace features is certainly something to be proud of (pokes CSS).

I’d like to do…something like a header that switches images during intervals but it’s hard to imagine that without a language being involved. Gradients would be fun, although I’m not too sure of what multiple backgrounds is all about.

Personally, I found a neat little trick for rounded corners myself. Instead of doing the usual split “four” piece images, I use three. I use a rounded top and bottom, while I place the middle between the top and the bottom. So it automatically scales based on the content inside and it works just as well (plus it’s easier to deal with).

I am dubious about adding new font faces to the toolbox and wonder how others feel about this. As a designer I feel informed about how fonts are used in visual communication and try to use them purposefully. I have seen how print pieces are abused by some who use too many fonts on a page just because they can. I personally like the fact that going from site to site, fonts are mostly similar and reading is as expected. Am I way off base on this?

You’re not way off base Robert. Not at all. There’s no way we can avoid poorly designed sites when we’re searching/browsing/researching something on the web. I have nightmares of not being able to read something I need to because a whole paragraph is in silkscreen font, size 8.

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

How many people touch the CSS in your current main project?

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.