Firefox 3.5 and HTML 5

Firefox released it’s 3.5 stable version with excting new features. The most exciting feature is html 5.0 which was web developers dream. Firefox site has the details on release notes, i am writing here the most attractive features to me-

Firefox released it’s 3.5 stable version with excting new features. The most exciting feature is html 5.0 which was web developers dream. Firefox site has the details on release notes, i am writing here the most attractive features to me-

HTML 5.0 supports – The HTML 5 support in Firefox 3.5 allows for video and audio embeds without the need for the Flash plug-in. Right now, most video and audio playback on the web requires Adobe’s Flash Player. See live demo here

See the HTML 5.0 features –

The HTML syntax of HTML 5 allows for MathML and SVG elements to be used inside a document. Put following code inside a new document, save as example.xhtml and see in firefox 3.5( or in gecko based browser)

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>XTech SVG Demo</title>
<style>
stop.begin { stop-color:yellow; }
stop.end { stop-color:green; }
body.invalid stop.end { stop-color:red; }
#err { display:none; }
body.invalid #err { display:inline; }
</style>
<script>
function signalError() {
document.getElementById('body').setAttribute("class", "invalid");
}
</script>
</head>
<body id="body"
style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
<form>
<fieldset>
<legend>HTML Form</legend>

<label>Enter something:</label>
<input type="text"/>
<span id="err">Incorrect value!</span>

<button onclick="signalError();">Activate!</button>
</fieldset>
</form>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
	<linearGradient id="gradient">
<stop class="begin" offset="0%"/>
<stop class="end" offset="100%"/>
</linearGradient>
<rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
<circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
</svg>
</body>
</html>

// New sexy elements such as header, footer, time, video, audio, aisde, dialog, figure, datagrid, menu, details, progress etc. Put the following sample code to a new page, render it in firefox three or other gecko browser

<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<header>
<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
</header>
<section>
<article>
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>

Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived at
the site at 7:30 A.M., progressed to Spring around 10:00
A.M., and reached early summer by 10:15. 
</article>
<article>
<h2><a href=
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>

Seems you can now go <a
href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.
</article>
<nav>
<a href="/blog/page/2/">&laquo; Previous Entries</a>
</nav>
</section>
<nav>
<ul>
	<li>
<h2>Info</h2>
<ul>
	<li><a href="/blog/comment-policy/">Comment Policy</a></li>
	<li><a href="/blog/todo-list/">Todo List</a></li>
</ul>
</li>
	<li>
<h2>Archives</h2>
<ul>
	<li><a href='/blog/2007/04/'>April 2007</a></li>
	<li><a href='/blog/2007/03/'>March 2007</a></li>
	<li><a href='/blog/2007/02/'>February 2007</a></li>
	<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>
</li>
</ul>
</nav>
<footer>

Copyright 2007 Elliotte Rusty Harold
</footer>
</body>
</html>
See the new elements in html 5.0 here
Private Browsing Mode – Firefox 3.5 and later provide “Private Browsing,” which allows you to browse the Internet without Firefox retaining any of data about which sites and pages you have visited.
Local Language – Firefox 3.5 supports over 70 languages
Embedded TraceMonky Javascript Engine – TraceMonkey adds native code compilation to Mozilla’s JavaScript engine. So web application will perfrom better now if it has javascripts.
Support for web worker threads – To know web worker threads, see here
Faster web browsing.
There are other more features upgraded or new. So why are you waiting, get it now Spread Firefox Affiliate Button
Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

2 thoughts on “Firefox 3.5 and HTML 5

  1. Hi, I tried your code example of embedding SVG into HTML 5 with Firefox 3.5, and it doesn’t work. Are you sure this feature is enabled? I was surprised to see you mention support for it. BTW, in your code sample you have smart quotes instead of normal quotes.

    Best,
    Brad Neuberg

    • Hi Brad,
      You know HTML5 parser inside Gecko has progressed. Thanks to took me noticed that example, actually i didn’t compile that which i should, sorry for that. Firefox told they have SVG transform support on this version on their release note, checkout this link http://www.mozilla.com/en-US/firefox/3.5/releasenotes/ on what’s new section.

      Brad, exciting news is it should be rendered properly all gecko engine based browser. I’ve updated that section with new code, would you try now please.

      Thanks Brad!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s