Analyzing Form Element and CSS Support in Web Browsers

Last week, Kimberly Blessing and I gave a presentaion on Designing Our Way Through Web Forms at Web Visions in Portland, OR. 

It was a bit more advanced talk in some ways than the one we gave at SXSW.

For this session, I dove into my research of the Web Form Elements to analyze which CSS properties and form elements are poorly supported in browsers. 

I looked at each of the Web form elements to see if CSS property was supported on the form element–assigning it a value of Y for yes, N for no, S for somewhat and N/A for the CSS properties that didn’t apply. 

You can look at the start of this reseach in the lookup tables for Appendix D of the CSS Cookbook. It’s available as a free download from the O’Reilly Web site.

To see which form elements and CSS properties did well, you can look into the presentation itself from my SlideShare account (see pages 33 and 37) or you skip down this blog post to read the lists. 

Support for CSS Properties (Best to Worst)

  1. margin
  2. background-color
  3. width
  4. font-size
  5. border-style
  6. letter-spacing
  7. padding
  8. height
  9. color
  10. background-image
  11. border
  12. font-family
  13. border-width
  14. border-color
  15. font-weight
  16. word-spacing
  17. text-indent
  18. text-decoration
  19. text-align
  20. line-height

Support for Form Elements (Best to Worst)

  1. textarea
  2. input text
  3. submit buttons
  4. select (one item)
  5. select (multiple items)
  6. file uploads
  7. checkboxes
  8. radio buttons