unsexy css3 and html5

what standards?

Since a couple of months there's been a real explosion of html5 and css3 talk. Several big web issues (like online video) have helped in gaining great support for these new standards, but like all things web, abuse is always just around the corner.

One thing web standards don't include is standard of quality. The past has learned us that with each new big technology introduced on the web, quality standards are the first to go. Maybe it's because the web is governed by techies who mainly care about technical achievements, but it's a given that when a new technology is launched on the web it gets fucked over for a couple of years before its actual benefits come to the surface.

you say sexy, i say ugly

Bloggers need attention. Fact. With all the css3 demos, techniques and experimentations going on grabbing the reader's attention is getting more and more difficult with each passing day. Hence all the posts with titles including words like 'sexy', 'cool', 'amazing', 'fresh' and other positive buzz words floating around the web, just to pull readers in. Checking them out usually amounts to watching demos of sluggish animations, graphically poor visuals and often completely unusable, even inappropriate techniques.

Web standards have fought for years to give semantics and accessibility a place on the web, all that is thrown overboard in the blink of an eye just to create a couple of ugly animations which serve little to no goal at all. People are trying to mimic the capabilities of Flash and failing horrible in the process, but it doesn't seem to be a big issue since they are at least using the latest technologies. That's the current state of the web, and the community of web developers are actively encouraging it.

Animation on the web has always been poor. Javascript isn't really suitable, Flash only to some extent (when it fits the typical Flash style). With css3 we seem to have hit a new low. A couple of rotations in sequence with some transformations are being sold as actual animations, ruining 80 years of professionalism in that particular field. If that's sexy, I'm just not interested in sexy anymore.

html5 is not css3

Another hot topic is whether html5 is going to replace Flash. Most people don't even realize it's not so much html5 but the canvas element in html5 that's the real threat to Flash. Most people won't realize that animation comes from css3, which is no way related to html5. And an even smaller group asks itself whether css is actually the right technology to define these animations.

The function of css has always been styling. Animation can be used for styling purposes, but much of it is treading on behavioral grounds. Just think of collapse and expand structures or other animations revealing hidden information. If your browser doesn't support the animation, more often than not you won't get to the content (unless you disable css). And it's not just the little ones doing it. You can find examples on the Apple site if you wander around a little.

And yeah, I'm quite confident this is only a temporary phase. In two years time we'll start questioning the purpose of all these horrid effects and animations, weeding out all the garbage and learning from our mistakes, but it would be frustrating to wait for another two years to see this process kick in. The web is slow enough as it is.

my redesign

Looking at my redesign, you might be wondering why I'm complaining so much about css3. The new design clearly includes overuse of css3 properties, which is true enough. Part of that is because I set out to use my blog as an experimentation platform for testing css3. It's fun to test and play around with css3 but in due time the unnecessary bells and whistles will be taken off again.

In addition I've compiled a little list of bugs, shortcomings and mis-renderings I've seen on my blog so far, just to indicate how buggy and/or incomplete most css3 implementations still are:

• Safari and Chrome: no support for inset on box-shadow
• Chrome: anti-aliasing on rounded corners sub-par
• Chrome: fuzzy box-shadow rendering
• All: multiple rounded corners stacked on top of each other result in rendering issues (check articles on homepage)
• Opera: box-shadow is clipped on tab navigation (homepage). Reappears when hovering certain elements
• Safari and Chrome: can't get rgba colors to work in gradients
• Safari and Chrome: crappy gradient control (no px allowed for stop points)
• Firefox: radial gradients are ugly as hell. Looks more like concentric circles than an actual gradient. Linear gradient not perfect either.
• Firefox: hover with text-shadow or box-shadow is extremely laggy
• All: no gradients possible (X)px from the end. Very typical css shortcoming.

Sure, not every browser should be pixel-perfect in its design rendering, but the list above gives a good indication of just how sub-par most css3 implementations are at the moment.

conclusion

It's not that I don't welcome html5 and css3. Far from it actually. But for now, people seem more interested in abusing these technologies rather than giving it some good thought first. And I really do understand the need to experiment, trying to find novel and breakthrough uses for these new technologies, but without a word of warning and with a big bold 'sexy' in the topic title these techniques will find their way to the live web, greatly diminishing the web experience for many out there.

Think wisely when coming up with css3 and html5 articles. Warn against the pitfalls and don't advertise everything as sexy or cool just because it is html5 and css3. Think of what web design stands for, not about how cool you look using one or other new, flashy and hip technology. Just my two cents and sorry if this rant spoiled your fun working with these new technologies.