I decided to play around with some of the new(ish) HTML5 form elements and at the same time try to create a responsive form matrix. I'm not entirely convinced that having form elements next to each other is a good idea, but it was a nice little exercise.
I've only really tested this in the latest versions of Chrome (13.0.782.107), Firefox (5.01) and Opera (11.50), and Opera has the best - and ugliest - support for the new HTML5 form elements. Chrome and Firefox does what any decent browser should do (and does) and degrades gracefully to a standard input type="text" element when it doesn't support the new type of form element.
There are visual differences in the different browsers, especially on the datalist-element, but please remember: websites do not have to look the same in every browser. I tried using modernizr to detect datalist browser support, but it did not give me the CSS classes needed to make it look good in all three browsers. With Opera usage being as low as it is, I optimized the design for Chrome and Firefox.
Thanx goes out to Jeremy Keith for his great solution to creating the datalist with graceful degradation.
Spot any errors or got suggestions? Hit me at kimblim[at]gmail[dot]com.
I need to shamelessly (is that even a word?) promote my outdated (it's uuuugly), but still heavily used CSS selectors and pseudo selectors browser compatibility overview page, which has a lot of examples and I still use it myself all the time. Don't believe me? Take it from one of the CSS greats then: Eric Meyer.