iTunes + CSS3
You know, web design innovation only really occurs when your entire user base uses the same browser. And you know, who just so happens to have a very stripped down, hidden web browser inside their app? Apple.
The iTunes store, is in essence, a hidden website that can only be accessed by iTunes itself, which uses WebKit to render all the pages. It’s a web designer’s heaven, and it also means you can use all of those meticulous features inside CSS3.
Today, Apple unleashed the new iTunes 9, and needless to say, they definitely take advantage of their position. It didn’t take long for a packet sniffer to catch the URL to an HTML page, which is now hosted on Will Norris’ blog (thanks, by the way). Noone had pointed out the CSS link, which is immediately where i dived to find.
Now it should be made clear, this is not any web app. If you don’t find the site’s visuals appealing, all you need to do is look under the hood to find the beauty: this is a seriously, amazing work of art. There’s not a drop of flash on this website, from the rotating banners to the music preview player. Everything is straight HTML5, CSS3.
I assume you want to see the CSS file now. I must warn you: it’s mondo. Uncompressed, there are 7858 lines of CSS, and that’s when it’s compressed, no thanks to the immensely confusing links to images. It crashed TextMate (yes, TextMate! I’m utterly shocked, as CSS Edit handles it with so much ease) three times. You can download the css file here.
I’ve been tackling it by taking large bits of it one at a time. TextMate users can click “Plain Text” on the bottom row and switch it to CSS for color coding, and then click “Format CSS” in the CSS Bundle to uncompress and format the file to make it more readable.
CSSEdit users can hold the css all at once. Go to Format > Re-Indent to make it readable.
Some CSS notes (things that I’m curious about and like).
They use some serious parameters in this file.
Apple added a special property for iPhones: -webkit-tap-highlight-color, for the color that shows behind a link when you tap it on the iPhone.
<span class="highlight-html">-webkit-mask-box-image</span> is used to mask images, just like you would in photoshop, but I can’t find a specific example used in the one page that we have in html.
Apple used -webkit-gradient for every single gradient in iTunes. To create text gradients, they simply added the word ‘text’ to the end of the property value.
background: <span class="highlight-html">-webkit-gradient(linear,left top,left bottom,from(#5c7b99),to(#102337)) text</span>;I also had no idea you could specify the direction for the gradient.
