Top Appeals of HTML5 & CSS3 - and Why It's Not Yet Enough

Taking a quite subjective viewpoint here to this much discussed topic, this article is about what I find to be the most appealing features of HTML5 and CSS3, and then again the reasons why I still don't use them (at least not much), in my line of work.

I create branding solutions according to graphic layouts created by graphic designers at advertisement agencies. Most of the branding solutions are for company intranets/extranets, quite often with a pre-defined set of browsers, quite often with a clausule "most of our employees still have Internet Explorer 7". Look at eg. the chart here to see how much use there is of HTML5 and CSS3 with the IE7! So yes, this is the uttermost reason for me to not to use HTML5 just yet. CSS3 I do use a bit, knowing that the IE7 users will be missing the fun.

As for the appeals, or should I say, the things that I most anticipate, waiting to be able to fully start to utilize these newer web technologies:

1. rounded corners
2. drop shadows
   The designers and the customers love this stuff! And yeah, they look nice. But did you know that in order to build a box with rounded corners (and/or drop shadows) takes either a fixed size (you can use a single background image), 3 div-elements (partial sccalability), or all of 6 divs (full scalability)? And when the borders and shadows and fills are different colors here and something else there, you need a new set of classes for each box. It's not a walk in the park with CSS3 yet either, what with the different browser supports, but it has potential.
3. transparency
   You can do it without CSS3 too - but you need a different atribute for each browser.
4. multiple background images
   Multiple background images? Not without multiple divs - but with CSS3 it's possible and this would be extremely useful in many cases, especially when the designers decide to make web parts look extra fancy.
5. the new css selectors such as nth-child, last-of-type etc.
   How many times is the request to have "every other line (eg. of a SharePoint generated list) with light gray background or the first one looking like this and the last one like that and maybe we could even have the second last look a bit different"? With CSS3 you can.

So actually, the top 5 for one working with SharePoint branding is all about CSS3. Then again, SharePoint branding is more about CSS than (X)HTML. The site wire frame is such basic html that whether I use div class="footer" or simply footer-element, is mostly irrelevant. But if I needed to choose the two most appealing HTML5 features in general, they would be:

1. video embedding
   Now, if we could forget the IE7 (and even IE8), this would be one of the best working features in these single-browser environments (since the whole video format support part of this is still a mess) like we have in quite many companies.
2. easier forms
   This would be an extremely cool thing if only the browsers would support the features for real. I made a little experiment on my own (non-SharePoint) test site, out of curiosity. I made an HTML5 form, using all of the new features available, and NONE of the browsers (Opera, Safari, Chrome, IE7-9, Firefox - the newest versions available at the time, Aug. 2011) supported everything and in most cases most of the more useful features simply were lost. And as for me again, I don't really need to create forms, or if I do it's InfoPath.

Ok, among the other cool things, there is also the canvas, the geolocation, the local storage and session storage etc. etc. But they don't really play any role in my line of work, so I'll leave it to someone else to sing their praise. With SharePoint, especially with intranets, especially with the older IEs still in the picture, I'm still waiting for the right time to switch to HTML5, and CSS3 for good.

P.S. The mobile browsers generally have a pretty good support for HTML5 and CSS3
Most of the mobile browsers, eg. for the Safari for iOS, and most Android browsers, have a nice support for the most common HTML5 and CSS3 features. Take a look at this here chart. Looks nice, huh?