Apple & HTML5

http://www.apple.com/html5/

by taitems • 16 years ago

178 118 16 years ago

bradgessler3• 16 years ago

Neat idea, very poor implementation. If you try to view the examples in Google Chrome, you'll get a notice that you have to download Safari (http://skitch.com/bradgessler/dgw7p/apple-html5)

This sets a very poor example for Apple supporting standards.

robertmrangel• 16 years ago

You are either for us or against us.

billpaetzke• 16 years ago

* Apple might be nudging people to use Safari as their main browser.

* Apple might have limited to Safari to keep things simple--to be absolutely sure their demo would work 100%.

* I agree that it sucks that their demos are only viewable w/ Safari. But there are plenty of HTML5 demos out there for us :)

bradgessler3• 16 years ago

Its not that it sucks, its that Apple is being misleading about HTML5.

instcode2• 16 years ago

Yes! Why doesn't Apple just let every browser run it and see how superior Safari is in term of HTML5 support? The answer is: Listen up, people! Download our Safari now! Time to ditch your IE, Opera, FF & Chrome!..

Oh, get a life! How mean you always are, Apple!

jpcx01• 16 years ago

Extremely lame that they check the user agent. They probably all work fine in Chrome since it uses webkit also (I believe Chrome uses a newer version even).

tumult2• 16 years ago

They don't.

buster5• 16 years ago

So much for "standard". I wouldn't have expected understanding of "open" from this company, anyway. Yesterday Flash was bad, but today it's fine to write websites that only work in Safari, while using some Apple-specific HTML/CSS-tags.

buster5• 16 years ago

It's funny how many comments with the same opinion here get downvoted but no explanations why it's fine to add your own extensions to HTML/CSS (hello good old IE days). At least make your statements when downvoting so many people.

niceguy1016• 16 years ago

What if it works only in Safari? Apple has done all the hard work, and now what all-other browser vendors have to do is, implement these open standards Apple has developed. Apple do not plan to allow Java,Qt,Flash and all these unnecessary platforms on their devices. Safari is the alternative Apple has. I dont see any reason why other vendors shouldn't embrace Apple's open standards

Stop hating Apple for no reason.

tumult2• 16 years ago

Some of the demos only work in Safari. Even a nightly Chromium snapshot does not support everything that Safari does.

I ran Chromium with my user agent set to Safari. And here's where it gets interesting.

The demos that don't work in Chromium, notably the ones that require CSS 3D transforms, get removed from the listings on the pages that have them. So for example, the "Transitions" page, only the Dissolve, Toss, Slide In, Iris and Fade Through effects show up. Unsurprisingly, those are the least technically impressive. The gallery demo in Chromium runs at a fraction of Safari's frame rate. Very choppy.

The VR demo gives you an overlay explaining that it's only supported by the iPhone browser, Safari, or another browser with 3D CSS transforms.

So I guess their demos actually detect if your browser meets the spec or not, and remove the stuff that doesn't work. I'm guessing this was the original plan -- let everyone in to show off the HTML5 tech. But then someone looked at the nerfed versions without 3D and compositing and said "that's pretty weak, we don't want that to be people's impression" or something.

noibl3• 16 years ago

> Some of the demos only work in Safari

Which, given other browser-makers' commitment to supporting the emerging specs, just goes to show that 'standards' is a misnomer in this case. In informal usage that's OK; most of us hope that the standardisation of CSS3, HTML5 and related WHATWG initiatives will happen sooner rather than later. But misapplying the term in your marketing material (linked from the front page) is confusing and unhelpful.

jsz0• 16 years ago

http://code.google.com/p/chromium/issues/detail?id=18125

"The upstream work is not sufficient for what we will need. It is only the beginning of the work. We would need to offload compositing to the GPU."

Sounds like Apple decided to enable the existing WebKit implementation while Google is working on their own implementation. (which could very well end up back into WebKit proper at some point) This is exactly how standards in the context of friendly competition are supposed to work. You can't really expect everyone working off WebKit code to coordinate when certain features or standards support are turned on in beta or public releases.

pedrokost2• 16 years ago

What is the purpose of showing demos that work only on Safari? How can one call this a standard? Standards should work everywhere IMO. One of the many criterion I use to define a standard is that it is widely available. Right now, Flash is more a standard than HTML5 according to this criterion. Jobs is doing what Gates was doing - locking everyone on his platform. I don't know the stats but the Safari browser share is very low (on Desktops).

ellyagg2• 16 years ago

> This sets a very poor example for Apple supporting standards.

Can you, or any of the dozens of upvoters, explain the logic behind that criticism? It literally seems to make no sense to me, so I must be missing something. The page talks about emerging web standards and talks about Safari and Apple's support for them. It mentions that not all browsers support all of the latest standards, and then it gives examples of some of the latest standards that Safari supports. So, huh?

noibl3• 16 years ago

> The page talks about emerging web standards and talks about Safari and Apple's support for them.

It doesn't say 'emerging'. It says 'reliable'.

> It mentions that not all browsers support all of the latest standards, and then it gives examples of some of the latest standards that Safari supports.

Except that it doesn't. (a) because the specs are still in draft, and (b) because independent tests show Safari's support to be impressive but nowhere near complete.

http://www.freeciv.net/yet-another-html5-browser-test/

bradgessler3• 16 years ago

A poignant example is all of the non-standard -webkit CSS extensions Apple uses for the Gallery demo (http://www.apple.com/html5/showcase/gallery/):

   #gallery-demo .grid2d figure:nth-child(5)  { -webkit-transform: translateX(-241px) translateY(-3px) scale(.45) translateZ(1000px);}

If you accept -webkit CSS extensions as a standard, then Internet Explorer has supported the CSS opacity attribute for years:

   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

These extensions are not part of the CSS3 or HTML5 spec.

buster5• 16 years ago

It's no standard because apple developers extended Webkit with some additional tags but noone else. That's what makes it so sad. Even more sad is that they misuse the words HTML, CSS3, JS and standard to convince you of the oh-so-open world of Apple. MS did that for years and every web developer pays for that today. But somehow now it's ok.. You don't see how having to install Safari for Apples vision of the internet is the same vision that MS had when building their crappy extensions to the standard?

joelanman4• 16 years ago

Using Chrome in Windows I can't even click through to the examples - I get a blocking pop-up telling me to get Safari. Doesn't that, coupled with the line "soon other modern browsers will take advantage of these same web standards" imply that other browsers are lagging behind so badly they can't even try to run the examples? That seems misleading to me. The standards are not complete, but they are more widely supported than this page seems to suggest.

Contrast with Chrome's Experiments (http://www.chromeexperiments.com/) that you can try on any browser and see how it copes.

Edit: lots of the demos work perfectly well in Chrome if run from here instead: http://developer.apple.com/safaridemos/

csomar2• 16 years ago

So let's read again the pop-up message

You’ll need to download Safari to view this demo. This demo was designed with the latest web standards supported by Safari. If you’d like to experience this demo, simply download Safari. It’s free for Mac and PC, and it only takes a few minutes.

As you see, it doesn't mention that MY BROWSER doesn't support the latest web standards. It simply says, that Safari supports web standards and that if you want to check the demo, download Safari. If you don't want to download Safari, you won't see the demo.

The Message is clear.

eitland• 16 years ago

I think a lot of people around here have bad memories from the last time it was acceptable to put "best viewed with <some browser>" on a web site.

ptn• 16 years ago

From the source code of the page:

(navigator.userAgent.match(/Gecko\/(\d{4})/) || [0,2005])[1] < 2005) headers['Connection'] = 'close'

sigzero• 16 years ago

Or Chrome needs to catch up. It is "ok" on a Mac. For instance, if I see an image on a web page I can right click and copy that image and paste it into Mail....with Safari but not with Chrome.

silvestrov• 16 years ago

It seems like all the samples are targeted at the creative ad bureaus, and the goal is to educate them that HTML5 has all the features they need for their creative sites.

First the book publishers, now the ad agencies. The creative sector has really been in SteveJ's focus for the past half year.

shadowsun72• 16 years ago

+1 for Apple educating people on the awesomeness of HTML5.

-1 for being Safari-only.

Then again, when you think about it - the Safari-only filter implicitly tells people that Safari is the 'only' browser (or the best browser) currently supporting HTML5; that other browsers have to play catchup.

thought_alarm• 16 years ago

They explicitly say this on the front page: "Not all browsers offer this support. But soon other modern browsers will take advantage of these same web standards — and the amazing things they enable web designers to do"

papachito• 16 years ago

The problem is that they block Chrome 5 too, which is more advanced than Safari 4 (newer version of webkit).

SkyMarshal• 16 years ago

http://imgur.com/TvSup.png

sigh...

C'mon Apple, we all know Chrome and Chromium can display your HTML5 too. Probably Opera as well.

shadowsun72• 16 years ago

Source code and developer documentation for the demos found here: http://developer.apple.com/safaridemos/

tmsh3• 16 years ago

Yeah, most work in Chrome (on Linux).

Edit: that said, imho, the original link is somewhat misguided. It brings up an interesting question: is Apple responsible for targeting all platforms, or at least all major platforms that conform to a standard? Even if those standards aren't fully implemented among different browsers? And wtf, Apple, I wanna play checkers... Some of the demos run really well on Linux though. But I mean -- are they responsible for all platforms? Or maybe they're just responsible for not misleading people into thinking that they must choose their platform? (The issues in Microsoft's antitrust history rise again.)

Anyway, for my money I don't think the future of the web is via the traditional browser -- but I'm sort of in left field in this regard. But yeah, there are maybe deeper issues that haven't really been resolved...

ciupicri2• 16 years ago

Btw since when does Apple use PHP[1] instead of WebObjects?

[1] http://developer.apple.com/safaridemos/typography.php

sjs2• 16 years ago

Probably for small jobs where WebObjects would be overkill. And they don't use PHP instead of WebObjects they use both PHP and WebOjects, right tool for the job and all that.

They also use SproutCore, jQuery (or have used it), Gianduia, and for the WWDC schedule it seems that they use something else, possibly custom.

alanstorm• 16 years ago

Does anyone know what word we're supposed to use for "Web Development techniques that help ensure a consistency of experience across browsers for all users regardless of browser choice" now that "standards" means something else?

drusenko• 16 years ago

these are experimental standards. they're being actively developed and discussed by many browser makers and the standards bodies, and will be the official standards soon.

don't hate on people trying to push the web forward. everybody is going it in a very fair, open, democratic method as trying to implement ideas as quickly as possible.

willhankinson• 16 years ago

Where are the games?

c1sc0• 16 years ago

This move is not about games but about iads. (funny side note: iPad insists on spelling that as aids, ouch) apple is pushing htm5 because it will be an essential component of apple's next money-making machine: advertising. And html5 is a great match for advertising: html5 may not be ready for hardcore gaming, but chucking a few banner ads at the peplum, no problem!

tuxychandru• 16 years ago

Picking a demo from http://developer.apple.com/safaridemos/ and then clicking on the "View Demo" button allows you to view the demos.

Most of them (except VR) seem to work for me in Chrome on Ubuntu (5.0.375.55 beta).

ck22• 16 years ago

The propaganda and hypocriticism from Apple is staggering.

(if you are going to downvote me, at least say why not)

ugh3• 16 years ago

I think the accusing party has to explain why something is hypocritical and propaganda.

ck22• 16 years ago

Ah okay. Well for starters, claiming they are using open standards and then trying to block based on user-agent for only Safari.

niswilsonnissen• 16 years ago

Since a lot the html5 modules (and related standards) are still being worked on, we can't expect every tech demo of the new features to work in every browser.

Apple wanted to show some very shiny html5 demos and that is fine. There is a good chance that everything shown there will be working across all the major browsers in a not too distant future. (Yes they have have to loose the vendor prefix -webkit first, but that is actually the recommended way to use non-finalized preview features of the emerging standards).

I see this as Apple pushing the html5 wagon forward, the same as the other major browser vendors do. Have you tried Internet Explorer 9 Preview demos in other browsers?

Finally the html standard is moving forward again after years of standstill. How anybody can complain about that is beyond me.

Cheers!

dieterrams• 16 years ago

Wow. I can only imagine what the reaction would have been if Google released this with Chrome-only demos. Lots of praise about how Google's leading the way, pushing browsers forward, and you really ought to give Chrome a try.

But when Apple does it? A barrage of complaints about how Apple doesn't support standards. It's laughable how transparently people are looking for something, anything to bitch about when it comes to Apple, no matter what they do.

netcan• 16 years ago

C'est la vie

Once you're suspect, you're suspect. If you've got the benefit of the doubt, you've got the benefit of the doubt.

Overall, that's probably more good then bad. We'd like to think we can be objective, but we probably can't. These crutches are there for a reason.

buster5• 16 years ago

So, when MS crippled web development for years with it's browser strategy and proprietary crap it was widely considered very harmful for the web. Now, when Apple does it, it's "pushing the web forward"? We would all use ActiveX controls and be stuck with IE6 if everyone would think like you. And i would argue every company would get the same "hate". Even worse, we've all had this in the past, now we should do everything to keep things a standard and open, because we know where it leads.

alanh4• 16 years ago

Your comment betrays an extreme misunderstanding of vendor prefixes and the nature of standards development compared to a proprietary system of browser plug-ins. See other comments on this page. And it wasn’t ActiveX that crippled web development, buster. It was the lack of progress and support for emerging web standards like CSS2 and PNG. By contributing to standards, the Webkit team creates the exact opposite effect of IE6. (Accidentally upvoted)

niceguy1016• 16 years ago

Apple may not allow Java, Flash, Qt and all that on their platform unlike Google's Android(which is open to everything from anyone!). Apple might want to make sure that webkit replaces these unnecessary platforms by implementing exclusive and innovative features. And everyone is like bitching about Apple trying to be the internet monopoly and all that. I am sick and tired of all this Apple hate!

henrikhansen• 16 years ago

Qt on Android? Never heard of that.

ciupicri2• 16 years ago

Well, Apple's page seems to emphasize HTML5 and its power, while on the other hand Google would probably explicitly brag about their Chrome browser. If Apple would rephrase the text to say something like "Look how cool Safari (and only Safari) is! You can do all this awesome stuff using HTML5, CSS etc." my reaction would be neutral or more positive.

Steltek• 16 years ago

You're throwing a hypothetical out there while ignoring reality.

Google has Chrome Experiments, open to everyone. Google gets kudos for letting everyone play with different browsers.

Apple has this demo, open to only Safari users. Apple gets the tut-tut'ing because it's not letting people decide for themselves.

Do you see the difference?

not_an_alien3• 16 years ago

No, because Google is not /restricting/ it. They're using the advanced features, not being bouncers deciding who to let into their party or not based on the color of their shirt.

dbrannan• 16 years ago

If browsers stick to standards then great, but as this demo proves (since it only works in Safari) you'll still need to develop for various browsers, versions, brands, types.

As I see it - I'll stick with Flash. I like the idea of write once and deploy everywhere, which worked pretty well for me until the iTouch/iPhone/iPad came along.

alanh4• 16 years ago

This is meant as inspiration, as an eye-opener, a PR move, and a gift to web developers & designers.

It does use emerging web standards. Just because some of them are not reliable everywhere does not discount that it’s all to be found in W3C and WHATWG draft specs. Note the HTML itself: They’re using <article>, <figure>, <header>. It’s really HTML5. (Remember, we consider things “standard” even before IE supports them.)

This is not meant as a compendium of current best practices. Progressive enhancement still applies in the real world. Apple knows that.

If you are criticizing this for being not cross-browser enough, you are completely missing the point.

tmsh3• 16 years ago

The issue may be, however, that the standards committees for HTML5 haven't defined how different implementations of these standards are supposed to play together. And the question is: does Apple have the right to define how HTML5 should be handled cross-browser? (In this case, by very simply denying all non-Safari browsers -- at least via that link -- the developer links work -- kind of.) In all fairness, I think they do if other people haven't said anything else about it. But in even more fairness, perhaps other people (specifically the working groups) should make it more clear about whether or not you can target specific browsers.

If you want to do things progressively, there should be a feature matrix, and as more and more enhancements are fully implemented in all major browsers, one shouldn't be able to specify which browser you must use.

It's probably just my ignorance. But it's not clear to me where the lines are between best practices, web standards, and fairness (forcing a browser of course evokes nightmarish legal history a la Microsoft).

I suppose I should look through:

http://lists.w3.org/Archives/Public/public-html/

If anyone can point me in the right direction though (or maybe I'm asking the wrong questions), that'd be cool.

I suppose the risk is that because HTML5 has so many different features, it would be easy to basically not standardize. If Apple is the only company that fully supports interesting parts of the standard and they keep on iterating and nobody catches up -- is that really a standard? But are we right to deny them further development and innovation? I think there's a balance, but where is that balance? We've now got a lot of cooks in the kitchen:

http://www.w3.org/2000/09/dbwg/details?group=40318&publi...

Hope it works. But you know what they say about committees, second-system syndrome, etc... Though honestly it's not like I see any other solution....

Though an easy to browse website that showed near real-time progress of all the major browsers' implementations of the HTML5 feature set, so we can at least see the playing field. That might be a start.... I definitely think it's in everyone's interest to cooperate.

ETA. Found this for HTML5/CSS3 feature matrix:

http://caniuse.com/

alanh4• 16 years ago

I’m sorry, but I am not sure what you are saying.

Web standards circles agree that "browser sniffing" as opposed to "feature detection" is kind of evil. (See http://modernizr.com for one way to do it right.) This, however, is a very special case, where the whole point is showing what ones specific browser can do.

Generally, the user's browser is irrelevant to the point of a website, and supporting as many browsers as possible is best.

In this case, the user’s browser matters most, as no other browser currently has 100% feature parity with Safari features used in these demos.

buster5• 16 years ago

Where exactly do you find -webkit-transform in some CSS-standard, again? So, you are saying all those -webkit-* CSS styles are CSS3 standarized?

alanh4• 16 years ago

In the standard, it’s just "transform". "-webkit-" is called a "CSS vendor prefix" and the idea is this: If the standard changes before it’s finalized — it does happen — but Safari just implemented "transform" and not "-webkit-transform", then sites created in the interim could be stuck with broken CSS, retroactively. Mozilla did this forever ago with "-moz-border-radius" rounded corners. Even Microsoft started using the "-ms-" vendor prefix.

Apple using "-webkit-" is actually preserves the "open" and "standards" parts of "open standards". Otherwise it’s embrace and extend. (http://en.wikipedia.org/wiki/Embrace_extend_and_extinguish)

Edit: For clarity, this is how things like -webkit-transform are born (slightly simplified):

1. Apple (or Mozilla, or Opera, or Microsoft) decides it would be nice if the web stack could do X.

2. Apple devises a property and syntax, implements it internally, evaluates performance hits, iterates, etc.

3. Apple releases a public developer build (a "nightly") with X, using the -webkit- prefix, and blogs about it. http://webkit.org/blog/130/css-transforms/

4. Apple drafts a spec (no "-webkit-") and submits it to relevant standards bodies

5. Standards bodies, browser makers, and document authors weigh in

6. The draft is modified, clarified, dropped, and/or implemented elsewhere. http://webkit.org/blog/130/css-transforms/#comment-23010

7. The draft becomes more or less finalized, and user agents should support X without a vendor prefix

sirn• 16 years ago

Using vendor prefixes does not equal to being non-standard, from the CSS3 Working Draft[1]:

> there are situations (experiments, implementations of W3C drafts that have not yet reached Candidate Recommendation, intra-nets, debugging, etc.) where it is convenient to add some nonstandard identifiers to a CSS style sheet.

Most extension Apple used in the demo page are part of CSS3 Working Draft, including CSS transform[2].

[1] http://www.w3.org/TR/css3-syntax/#vendor-specific

[2] http://www.w3.org/TR/css3-3d-transforms/

niceguy1016• 16 years ago

Absolutely. I cant stand all this Apple hate here. People should just stop criticizing Apple for everything they do.

Maascamp• 16 years ago

How is this any better than Microsoft's IE9 HTML5 support matrix that only focuses on the things IE9 does well?

pedrokost2• 16 years ago

I don't really understand this claim: "Standards aren’t add-ons to the web. They are the web. And you can start using them today." Standards should therefore be right there, sitting in you computer for someone to use them. Why do I have to download Safari then? I prefer to download a 2MB add-on than 30MB additional browser that I will never use.

rimantas3• 16 years ago

So you are still stuffing USB keys to your floppy drive?

al_james3• 16 years ago

Has anyone tried these on iPad or iPhone? Some of them are not smooth on my macbook, surly they must suck on a low CPU device? Or am I wrong?

niceguy1016• 16 years ago

Tried on my iphone and iPad. The demos work at low framerate and is kind of slow. But its just a mobile device. I am not really expecting cpu intensive html5 application to work on these light devices. Thats what my macpro is for.

al_james3• 16 years ago

Yeah, but Apple seem to be suggesting that you can use HTML5 for nice looking (near native animation) effects on these devices.

jcromartie• 16 years ago

They are amazing on the iPad. Perfectly smooth and hardware-accelerated.

jasonkester• 16 years ago

They really open themselves up to mockery with this. Even here, in this community of people who know what's going on with W3 standards, people are finding the site confusing. Imagine the message this site is sending to the average user by putting up these cool demos that don't work on his browser:

HTML5: The standard that only works on Safari

I don't think that's the message they're trying to get across, but it's the one they're sending.

instcode2• 16 years ago

Oh Firefox my love!! Plz hurry up!!

http://developer.apple.com/safaridemos/showcase/typography/

http://developer.apple.com/safaridemos/CanvasPixelManipulati...

http://developer.apple.com/safaridemos/LightTable/

seltzered• 16 years ago

OK, I see typography, design, transitions -- Where's the games section for my mom to play Mahjong?

ugh3• 16 years ago

Here is a checkers game: http://developer.apple.com/safaridemos/checkers.php

not_an_alien3• 16 years ago

Shows the hypocrisy of Apple when they're saying you shouldn't need a plugin, but then force you to download a new browser even if it's not necessary.

crad• 16 years ago

Given IE's misleading page about HTML5 support, by omitting the parts they do not support to make it look like they are the market leader, Apple could have had something to gain by giving a warning that says something along the lines of "Your browser doesn't fully support the HTML5 features we're demonstrating, click here to continue, click here to experience it in Safari."

I want to see how the other browsers stack up in their demos and think it's short sided of them to not allow that to happen.

glhaynes• 16 years ago

Somewhat buggy in parts on MobileSafari, though very well formatted for iPad. We certainly expect iPhone OS 4.0 for iPhone / iPod touch, but perhaps we'll see an update to iPad's version of iPhone OS as well on Monday?

not_an_alien3• 16 years ago

From a guy who did many of the examples for chromeexperiments.com and has been a pretty active promoter of HTML5/standards via three.js and other projects:

"I'm happy I rejected doing anything for this apple/html5 page. They should rethink their policy and give credits to the authors."

Source: http://twitter.com/mrdoob/statuses/15417138430

leviathant• 16 years ago

I'm still entirely unimpressed with HTML5's audio capabilities, and this 'showcase' does nothing to improve upon that. Press this button to play a 30 second sample? Browsers were capable of that in the mid nineties.

If they showed me a game with a background track and multiple layered, triggerable sounds (like just about any Flash game or iPhone game out there) I would have been a little more satisfied.

The gallery was also suprisingly sluggish on my core 2 quad machine with a somewhat super duper video card.

buymorechuck• 16 years ago

CSS 3D transforms are an emerging W3C spec. WebKit has the hooks for supporting CSS 3D, but a WebKit port like Chrome still needs to add an underlying scene graph engine ala Core Animation to get 3D rendering going. It's non-trivial, but possible.

Scene graph engines are hard to build, much like vector graphics engines and font rendering engines.

That said, Clutter ToolKit (the same one Chrome OS is using for its windowing manager) is about the closest open source ready-to-go replacement that can do 80% of what is needed by WebKit to do CSS 3D on top of OpenGL. It's on Google's list to add to Chrome, but not for awhile.

Google seems to be favoring WebGL over CSS 3D (too much detail to discuss pros, cons, and the politics here), and is making WebGL implementation a higher priority for now.

sjs2• 16 years ago

I don't see what the big deal is. Disable JavaScript and you can check out all the demos. :p

Apple & HTML5

Related Stories