Grow your CSS skills. Land your dream job.

Poll Results: CSS3 Features

Published by Chris Coyier

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.
  • #9) Other (2.0%, 168 Votes) - Do share!

I have a new poll idea cooked up, which I'll put out later this week.

Comments

  1. I chose other because am personally much more excited about the proposed layout features of CSS 3 such as multi-columns and Advanced layout.

    Plus some of the new selectors in CSS3 are going to make our jobs a lot easier!

  2. GoOz

    I do agree !
    CSS3 selectors are so powerful that sometimes i dream about a DOM without any class or id.
    But everything else is so welcome too :)

  3. 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.

  4. Steven Gardner

    I would be most excited about knowing that my designs will look and behave in the way in which I decide and not the way the browser decides.

  5. 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.

  6. 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.

  7. Adar

    there is 1 Major problem: Stupid IE is way back, too early to be happy.

  8. 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).

    • Roland Porth

      That works if you only need to expand up and down (Y-axis) but sometimes you need X and Y… sliding doors for 2 dimensions.

  9. Roland Porth

    I actually wish I could have chosen multiple answers – lots of stuff to inspire designs (and make them easier save for the dreaded IE6)

  10. TeMc

    Nice results indeed !

    1) Border Radius (22.0%, 1,541 Votes

    I voted for this aswell

    PS: What did you use to create the 3D Pie chart ?

  11. Uhm.. I just want all of them. :D

    I think I’ll use RGBa and multiple backgrounds the most.

  12. Ashly

    The most requested feature, border-radius is working on almost all browsers including IE.

    http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

    Here is how to get it

  13. I belong to the majority…:)

  14. WOW! That was close between Border Radius and Multiple Backgrounds!

  15. oh man oh man oh man. can’t wait! ;)

  16. 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?

    Great poll by the way!

  17. James

    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.

    The legal angle should at least partially limit it to readable fonts…

  18. Bilge

    “without having to effect all child elements”
    affect.

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

*May or may not contain any actual "CSS" or "Tricks".