
ITunes + CSS3  - jasonlbaptiste
http://judsoncollier.com/blog/fullstory/21/
======
unalone
<http://files.willnorris.com/misc/iTunes9/response.html>

The page rendered in Webkit-compatible HTML. Pretty damn impressive on Apple's
part.

~~~
tolmasky
Not really sure what you mean. This is the way just about every, no, every
single online store is rendered. The only outlier until this morning was
iTunes, which for some obscure reason (legacy, historical) chose to have
proprietary XML and a proprietary renderer. If anything, this is what should
have been done ages ago, considering they invented all this technology.

Arguably, the store continues to be hindered by not being web enough. I've
often wanted to have multiple tabs since (gasp) I may want to look at more
than just one item simultaneously. Its also still difficult and confusing to
send links to iTunes pages to people. Individual items are a bit easier with
iTunes 9, but linking to the "Movies" section, not so much.

~~~
unalone
Pretty damn impressive because it's gorgeous. Most online stores look like
they're made out of HTML. iTunes looks wholly different. It's a reminder to me
as a designer that the web is capable of handling much more than I put it
through at the moment.

------
dcurtis
Just to be clear: a huge amount of this stuff isn't really in CSS3. A lot of
it (most of it?) is custom-built Webkit stuff.

I'd been curious about why each release of Webkit added more of these obscure
features. Now we know.

~~~
Jakob
Check your regexes. The webkit-only tags used are

-webkit-appearance -webkit-appearence [sic] -webkit-background-clip -webkit-border-image -webkit-border-radius -webkit-box-reflect -webkit-box-shadow -webkit-box-sizing -webkit-gradient -webkit-mask-box-image -webkit-resizer -webkit-scrollbar -webkit-tap-highlight-color -webkit-track-piece -webkit-transform -webkit-transition -webkit-user-select

Many of them will be in the final CSS3 spec, e.g. box-shadow and border-
radius.

Great work pushing HTML5 and CSS3.

~~~
tlrobinson
I'm curious what HTML5 features are being used? Are they using <audio> or
<video> tags? That seems like the most likely. Or <canvas>.

I've noticed "HTML5" is getting thrown around a lot lately. It's the new
"AJAX".

~~~
judsoncollier
From the very limited view we have so far, they aren't specifically calling
out for an audio or video tag in the CSS.

They are _definitely_ using canvas though. Going through the inspector, the
round audio buttons are made with canvas.

~~~
silvestrov
It seems to be the animated part of the button that is a canvas. The static
part you see before starting the sound is a background picture on the div,
created using inline image data in the css.

------
btn
Remember when people chastised Microsoft for doing similar things (using IE-
specific HTML/CSS for parts of an application interface)? I guess Apple have
the web standards street cred to get away with it.

(I know it's not entirely the same, but... just sayin'...)

~~~
martey
I think this is entirely different. Apple is using CSS3 to generate compliant
HTML files for their application interface (see the link to Will Norris' post,
which includes a link to a HTML file you can view in any browser).

I think this is interesting not simply because Apple moved the iTunes Music
Store interface from proprietary XML to HTML, but because this might allow for
(unauthorized) third party iTMS interfaces, similar to pymusique/SharpMusique:
<http://en.wikipedia.org/wiki/SharpMusique>

~~~
btn
_using CSS3 to generate compliant HTML files_

A significant chunk of the CSS is vendor-specific. Similarly, the HTML
contains Apple-only attributes and segments designed to only be interpreted by
iTunes. Neither the HTML nor CSS is "compliant" (ie. validating).

 _to a HTML file you can view in any browser_

Except it's completely broken in anything but WebKit-based browsers, and isn't
functional outside of iTunes.

They've moved from proprietary XML to proprietary HTML. This doesn't open up
any new doors for third-parties; it's just a convenience for the people at
Apple to design new content for the store.

~~~
tewks
This design choice is significant because most of these properties, or their
equivalents, will be or are already implemented in several CSS3 rendering
engines: it's a great demonstration of what we will soon be able to do with
cross-browser support.

The fact that IE or browser x can't browse the iTunes store is less important
than some other tactics on Apple's part such as lack of non Apple device
support...

