Animations with HTML5?

**cancer10** · Dec 20, 2011 05:00

HI

I have been learning HTML5 since 2 days now. And i found that the major changes in this version are just some attributes.

I have seen cool animations that are said to be done in HTML5. I do not understand this point. HTML5 is just a static markup language so how come it can do classic animations?

When I view the source code of those animation pages, I see the entire animations are done using Javascript. So why do people say that HTML5 can do cool animations?

Can someone pls put some light on this?

Thanks in advance.

**Immerse** · Dec 20, 2011 05:18

It's marketing.

HTML5 + CSS + JS + Canvas can do animations. HTML5 on it's own can't.
But it's 'cool' to say that HTML5 can do anything Flash can do, but better (thanks Apple!).

**cancer10** · Dec 20, 2011 05:20

Thanks for your reply sir.

One of the challenges the developers are facing today with HTML5 is the browser compatibility. Some features of HTML5 that works on a browser may not work on another one.

1) How are the developers coming up with this type of situation?
2) With such browser compatibility issues, how come HTML5 is till a hit so far?

Thanks

**Immerse** · Dec 20, 2011 05:22

It depends on which market you're catering for:

If you're catering for people who still use IE6, then you don't use HTML5.
If you have users who tend to keep their browsers up-to-date, then you can use HTML5.

**cancer10** · Dec 20, 2011 05:24

So does that mean HTML5 cannot be used as a general purposed website like portals, social networking sites etc? Because i do not know who and what kind of users my website will get.

**xhtmlcoder** · Dec 20, 2011 06:32

It is non normative and experimental hence typically should be avoided or used with a large dose of caution.

**cranial-bore** · Dec 20, 2011 08:16

There is HTML5 you can use now:

HTML Code:

<input type="number" name="quantity">

Compliant browsers will make it easier for users to specify numbers, by giving them a spinner. Other browsers just treat it as a text box. You need to validate the value server side anyway. Nothing breaks.

New semantic tags such as header, footer, nav, article, section can be used depending on the level of support for old browsers with JS disabled you require. The page will work, the content will be visible, but if a user is on IE <=8 and has JS disabled you won't be able to style these elements. That's a steep minority.

In other cases there are polyfills that let you use native browser capabilities where they exist, and fill in the gaps with JS solutions where they don't. If a site is built with progressive enhancement this won't lead to anyone missing out on content.

**Stomme poes** · Dec 23, 2011 02:57

So does that mean HTML5 cannot be used as a general purposed website like portals, social networking sites etc? Because i do not know who and what kind of users my website will get.

Keep in mind that like 90% of "HTML5" is just HTML4. Most of it works, because most of it isn't new.

You said you've been learning HTML5 for the past few days... is this from after learning HTML4? Or HTML wholly new? I would start with 4 and then learn what's different/new in 5. That helps when trying to realise what's supported. See, some of the stuff that's "new" in HTML5 is old in some browser (like contenteditable is old in IE, canvas is old in Safari, etc). So history matters here.

Cranial bore gave an example that's mostly okay to use regardless of what the browser supports. The new form input types, for the most part (I exclude type="color" from this list because it's retarded in non-supporting browsers) degrade to type="text" in anyone who doesn't support the new types. Since it automatically gracefully degrades, so long as you are very aware what the effects are in supporting and non-supporting browsers, it's considered pretty "safe". Also, the "new" doctype is totally safe. Basically the WHATWG found out what the minimal doctype is necessary to stop browsers from doctype switching (going into Quirks Mode). Turns out it was just <!doctype HTML> all along. And it's case-insensitive.

**cancer10** · Dec 23, 2011 04:25

Hi

can i use Raphaël js as an alternative to HTML5 canvas?

**Stomme poes** · Dec 23, 2011 06:00

can i use Raphaël js as an alternative to HTML5 canvas?

I don't see why not.

If you check out Modernizr, you'll see it does stuff like detect some of the new HTML5/JS API thingies out there. This is (one example of) what cranial-bore meant when he said "polyfills". With Modernizr (or just your own test script), you test for canvas, and if it exists, let canvas do whatever, and if it doesn't, call/load Raphaël to do stuff.

Also, Canvas can have alternative content itself:
<canvas width="foo" height="bar" id="foobar">
<p>Browsers who don't support <canvas> will show this text. Browsers who do support <canvas>, even if they are not running Javascript for some reason, will NOT show this text. Of course, if they support <canvas> but have no Javascript, they get nothing at all. Lawlz</p>
</canvas>
The original Safari implementation had canvas as an EMPTY tag though: <canvas height="foo" width="bar" id="baz"/> so I believe it's older Safari's may have some issue, but... meh.

Anyway remember that canvas is mostly a way to have dynamic pictures. You're not building any DOM and it's not accessible in general (unless you mix in SVG), so if you're using it to dynamically change how some data appears, or something, consider having a static DOM version of that data as well. If the data changes, let <canvas> visually show the change, let the inner alternative content just show the new data (so if it's in a table, you'll have a table in the canvas tag), and offer the same data available via a link or something (for users who can't access canvas but are using a browser who understands it). Or something.

Or you could skip canvas entirely until all the UAs you support can render it, if you want.

**cancer10** · Dec 23, 2011 06:16

I reviewed some of the docs of Modernizr and it seems like its just a detection technique for browser compatibility.

Do you have any recommendation for framework that does HTML5 stuffs easily?

**Stomme poes** · Dec 23, 2011 06:26

I reviewed some of the docs of Modernizr and it seems like its just a detection technique for browser compatibility.

Yup, that's all it is: a rather large steaming pile of tests/checks for stuff. You can also just use your own. A few properties have some funny tricks but you can see many of them on the rescued Mark Pilgrim's HTML5 Up and Running at HTML5 doctor: http://html5doctor.com/dive-into-html5-doctor/ Each chapter showed both a Modernizr and regular way to test for stuff.

For an HTML5 framework, I've not touched it myself because it seemed so much larger than anything I'd write myself, but there's html5boilerplate.

Personally if you have an interest in just, what is all this HTML5 crap anyway?, I *strongly* recommend you read the Mark Pilgrim book mentioned above (it's not terribly long but very well in-depth, quite nice!) and/or (I think AND is best) Bruce Lawson's and Remy Sharp's 2nd edition of Introducing HTML5, which is a book-book. Which, due to the nature of the incomplete HTML5 spec, refutes plenty from the 1st edition. So get the second : ) I read the first, and it was quite excellent.

**felgall** · Dec 23, 2011 13:03

There's going to be a new version of HTML 5 released on 1st January. All of the new tag names are going to be rotated to mean what the previous tag on the list currently means. This action is a part of the process that has been implemented to make sure that these currently experimental tags are not used in actual live web pages. We thank you for assisting in the testing of these new tags so as to help decide which ONE will become the actual HTML 5 standard tag.

**Immerse** · Dec 23, 2011 13:55

Wait, are they rotating them clockwise or anti-clockwise?

Edit>>
@felgall deserves a mention for that!

**Stomme poes** · Dec 24, 2011 15:23

There's going to be a new version of HTML 5 released on 1st January.

1st of April actually

User Tag List

Thread: Animations with HTML5?

Thread Tools

Display

Animations with HTML5?

Bookmarks

Bookmarks

Posting Permissions