ITunes + CSS3 | Hacker News Reader

ITunes + CSS3

judsoncollier.com

http://files.willnorris.com/misc/iTunes9/response.html

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

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.

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.

If you use GlimmerBlocker, you can browse the iTunes store in Safari by subscribing to the filter below. The filter adds the required http header.

http://glimmerblocker.org/site/filters/browse-itunes-store.x...

How do I subscribe to a filter?

Open the GlimmerBlocker System Preferences Pane. Select the "Filters" tab. From the gear-menu below the filter list, select "Subscribe to filter".

Every day I like GlimmerBlocker more. It can do anything.

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.

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.

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".

None, not even HTML 5 but XHTML 1.1. I was mistaken/too eager to see it.

I hope it'll be the new AJAX, like in my clients saying "I want that".

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.

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.

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'...)

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

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.

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...

They are using http://www.apple.com/itms/ namespace, not the w3c one. It does not make much sense for XHTML1.1, but trying to validate their markup is not making any more sense either.

I personally think its an utter joke that you need a client side app to view the ITunes website. That isn't how the internet is supposed to work.

If M$ did that there would be hell to pay, but Apple is "cool" so it's just FINE, apparently.

That's exactly how internet is supposed to work. Or did you mean www? That is not the same.

We're talking about a friend passing you a link that leads to page that redirects you to download some software to view that page. At the level of "consumer goods" the technical pedantry of www. being on the address can hang. Even AllOfMp3 had a web AND client side application to view their store.

This is certainly not the first time in history that a non-browser application has embedded a browser rendering engine for its own purposes. If you have ever used a kiosk, you've probably seen it yourself. In fact, I believe the Outlook mail client uses Trident for HTML email.

This is also not the first time in history that a vendor has used the human practice of exchanging URLs to promote downloads of special client software. Flash rose to dominance based upon people sharing links to amusing cartoons with each other, for example. Microsoft heavily promotes Silverlight URLs, and there has been no "hell to pay".

Nor is this the first time in history that a special URL scheme or content type was used to launch an external application. In fact, this has been a browser feature from the dawn of time.

Flash plugs into my browser (and I can choose my browser) as does Silverlight. ITunes does not, it is a completely different application. Basically the joke still stands. In 2009 the largest online supplier of music does not have their catalogue on the world wide web.

Their content is available over the internet, and individual pieces of content can be refered to by URL. What remains to induce laughter in you is the distinction between launching an external program versus writing said program within the confines of browser plugin prison.

To each their own. I'm a fan of Mitch Hedberg, myself.

http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?...

I realize that some people want the browser to replace the operating system, but I'm not one of them.

I'm all for thick clients, as I said before AllOfMp3 was awesome and it had both thick and thin clients.

I just find it bizarre that Apple don't have a store on the web that you can walk into using standard tools. If I want to just see how much ITunes is say charging for a piece of music or if I want to see if they stock a particular album then I can't unless I install ITunes. I think that's wrong.

Oh and Mitch Hedburg owns. Or rather owned. :(

It seems to have escaped you that you need iTunes (the software) to make purchases from iTunes (the store).

Er.... I've ordered from lots of different music stores without needing a thick client. It's not a technical necessity, sure its ITunes' necessity but that's a hurdle they've intentionally placed there.

Whether thats because they can't be bothered to make a web app, have made some strange technical decisions that mean it can't be a web app or are just being mean (lock-in!), I don't know. But I do know that I don't like it.

I think it has more to do with the fact that integration has been instrumental to their success. If it's a hurdle, then it's a hurdle that customers have been very eager to cross. That they've become the largest music retailer in the world without a web-accessible interface is a good indication that it isn't very important.

CSS was designed for vendor extension. This is why browsers are supposed to ignore selectors they do not understand. Mozilla and Opera use this too.

What you are comparing this to is different: a browser that does the wrong thing with a standardized selector.

And, of course, HTML violations are in a different class, as it does not have extensibility built into the spec like CSS has.

I wanted to correct my bad use of CSS terminology above. I should have used "property"|"properties" where I said "selector"|"selectors".

Nothing wrong with that. Just don't call it HTML if you do. Microsoft was chastised for taking a good standard, and extending/changing the standard so if you wrote HTML for IE it was seriously broken on any other browser.

Apple doesn't write it's HTML for you or anyone else's browser. Their markup is specific to iTunes and should be viewed as such.

Reply on news.ycombinator.com