Webkit-based Xbox dashboard
Webkit – and Safari in particular – have been really aggressive in adding support for upcoming CSS 3 features – and some CSS features not yet part of any spec.
As much of this is still Webkit-specific it isn’t really something I get to use much on client work, but not being one to shy away from new, shiny things, I though it would be fun to dig into this.
I decided to recreate an interface familiar to Xbox players, namely the Xbox Dashboard. It seemed like a good candidate to try out techniques like CSS animations, font-face, multiple backgrounds, gradients, RGBA colors, drop shadows, and custom scrollbars to name a few.
The original theme looks like:
My recreated version looks like:
I have tried to be generous with the comments in the source, feel free to dig in and see how things are made. Hopefully this can serve as inspiration/education for someone as it did for me.
The framerate in Safari is pretty bad. The framerate in mobile Safari on my iPod Touch is ghastly (and I totally miss not being able to swipe there). Chrome delivers the best performance by far.
When navigating between the panels and the animation is in progress, Safari doesn’t render the custom scrollbars. Instead it renders a transparent box there for some reason. Chrome handles that correctly.
I tried to add the reflections that’s visible on the actual Xbox Dashboard, but it simply caused too many visual artifacts in Safari. I’m guessing the combination of border-radius, scale, and rounding errors was tripping up the -webkit-reflection.
Should this ever be used in production?
Features that are only supported by browsers used by 10% of the internet-browsing population? I think not.
It definitely could be interesting to see how well this could be made to work in other browsers. Most modern browsers aren’t far behind Safari, and it might be possible to make it degrade gracefully enough in Internet Explorer. That is, however, far outside the scope of my experiment.