4 ms·

ITunes + CSS3

• unalone 17y ago
  http://files.willnorris.com/misc/iTunes9/response.html http://files.willnorris.com/misc/iTunes9/response.html The page rendered in Webkit-compatible HTML. Pretty damn impressive on Apple's part.
  • tolmasky 17y ago
    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.
    • deleted 17y ago
      [deleted]
    • unalone 17y ago
      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.
  • deleted 17y ago
    [deleted]
  • silvestrov 17y ago
    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.xml http://glimmerblocker.org/site/filters/browse-itunes-store.x...
    • unalone 17y ago
      How do I subscribe to a filter?
      • silvestrov 17y ago
        Open the GlimmerBlocker System Preferences Pane. Select the "Filters" tab. From the gear-menu below the filter list, select "Subscribe to filter".
        • unalone 17y ago
          Every day I like GlimmerBlocker more. It can do anything.
• btn 17y ago
  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 17y ago
    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 http://en.wikipedia.org/wiki/SharpMusique
    • btn 17y ago
      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 17y ago
        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...
      • rimantas 17y ago
• dcurtis 17y ago
  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 17y ago
    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 17y ago
      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".
      • Jakob 17y ago
        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".
      • judsoncollier 17y ago
        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 17y ago
          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.