Every now and then our boss issues a Developer Challenge competition. He challenges us to do something with a new technology and whoever does the best wins a small prize. It's Just a bit of fun.
This time the challenge is to do something with HTML5. One of the requirements is that is has to work only in Chrome. I don't think this is a realistic requirement though, because I thought Firefox 6 & Chrome were pretty much on par with each other?
Are there any features of HTML5 that will work only in Chrome?
You can use the FileWriter API. While there is a bunch of browsers implementing the File API, I think that only Chrome allows writing files (see http://caniuse.com/#search=filewriter).
caniuse.com lists other HTML5-features as well that are supposedly exclusive to Chrome right now, e.g. web notifications and <details> tag.
Check this link http://html5test.com/results.html with Chrome.
Update:
I find this usefull link with compatibility tables for support of HTML5, CSS3, SVG and more: When can I use...
NaCl: Google's take on ActiveX. Have fun.
Related
We are small web app development company. We are planning to upgrade to HTML5/CSS3 and we are going through training phase(We are using video tutorials). While HTML5/CSS3 seems promising, there seem to be so many issues with cross-browser compatibility as well as many new APIs. Is there any template we can use right away while waiting for full recommendation from W3C? Currently, are there libraries/tools we can use to ensure cross-browser support?
Help much appreciated. :)
HTML5... Where to Start?
Right now your best bet is to follow what the browsers can do. Therefore, follow the different vendors' browser development blogs on the subject.
By the way, HTML5 is mostly a set of unrelated features going from markup to new functionalities such as WebGL and client storage (WebSQL). HTML5 builds upon previous specs HTML standards and clarifies many features. On the other end, CSS is the culmination of CSS1+CSS2+CSS3.
Go on the web, all the information is there!
Resources
A brief history of markup (information)
HTML5 Rocks (information + tutorials)
Dive Into HTML5 (information)
CSS3 (information + tutorials)
Quirksmode (browser compatibility)
WebGL experiments (experiments, you can view the source to learn)
HTML5 demos (demos)
Mozilla's development blog
Webkit
Librairies & Templates
HTML5 Boilerplate
HTML5 shiv (enables HTML5 for IE)
Modernizr
jQuery
Normalize.css
Tools
Aptana Studio (Linux/Mac OS/Windows)
Espresso (Mac OS X)
WebStorm (Linux/Mac OS/Windows)
Related StackOverflow Question & Answers
How important is it to follow the web standards?
Which HTML version should be chosen for a public website?
I will try to keep adding resources...
It will be a while before html & css3 will be supported but in the mean time if you would like to get a head start check out themeforest they have plenty html5 and php templates that you can start hacking away in. Another great tool is to check out this noupe post where they list some free html5/css3 tutorials.
Let's split the cross-browser compability into two parts: new HTML5 elements / attributes and HTML5 APIs.
Elements: Browsers that don't support the new HTML5 elements (like <section>), e.g. older versions of IE, will just print the content and ignore the styling. You can use a little JavaScript hack to make the elements stylable in IE: HTML5shim.
Attributes: Using the new HTML5 attributes is completly fine as well. Browsers that don't understand them will just ignore them. With Modernizr you can check if the HTML5 / CSS3 feature is available and if not just provide a fallback with JavaScript.
To provide support for the new HTML5 APIs you can use polyfills to add support for missing features. Here's a good list:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
By the way: It's a good idea to use some HTML5 APIs like localStorage as a progressive enhacment. If it's just a little feature that's for enhacing the user experience, it's fine to do it with HTML5 and let older browsers just have the normal version.
jQuery is the most popular cross-browser library. It will use HTML5 features on browsers that support it and rolls back gracefully to something else when needed. It's updated frequently and is very feature rich.
quirksmode http://www.quirksmode.org/compatibility.html is a list of all HTML/CSS/DOM features and which browsers support them and to what degree.
w3schools http://www.w3schools.com/ is an excellent resource for seeing how specific HTML/CSS/DOM features works with code samples.
jsfiddle http://jsfiddle.net/ is an online javascript/HTML/CSS editor. It's a great way to test ideas before putting them in code. It's also a great way to share code samples with others.
jsPerf http://jsperf.com/ is an online code speed checker. If you're not sure of the best way to do something in javascript, you can run samples here. The results are also shareable.
You don't "upgrade" to HTML5 and CSS3. HTML5 is HTML, period. Since it takes years and years for such standards to become finalized, you transition to using the new elements and properties. It's never a wholesale change where one day you are using all new tools with little regard for the older ones.
Libraries and templates are helpers but aren't necessities. Pickup elements and properties as you need them. Do not start using the new stuff just because it's there.
Paul Irish and friends just launched Move The Web Forward:
You love web standards. You want to give back to the community. Curious about where to start? We're here to help.
...
Learn
One of the most beautiful things about the web is that it's constantly changing. While these changes and improvements can be overwhelming, we're here to help you get caught up! Here are some great resources to walk you through how browsers work, and help keep you up to date on their improvements.
...
Is there any single framework with which I can build a css3, html5 website that is compatible for all browsers including IE7 and later? Can http://html5boilerplate.com/ boilerplate help me in this?
You will never get the IE7 or IE8 rendering engine to achieve full compatibility with HTML5, CSS3, and other modern technologies. They are simply not capable of it.
However there are some hacks, tools and plugins which can get you part of the way.
Tools like Modernizr will help you by allowing you to detect which features are supported, to give your site a chance to work around it.
jQuery is a great library anyway, but is particularly good in this context because it abstracts a lot of browser differences away from the developer. Some things are easy in most browsers but a real pain in IE; jQuery takes a lot of that kind of stuff and makes it easy regardless.
Dean Edwards' IE7.js and Selectivzr are both Javascript libraries that give IE support for lots of the CSS selectors which were missing in older versions. This allows you to write your stylesheets without worrying so much about what IE supports. (IE7.js also fixes a number of IE's other glitches and missing features too)
CSS3Pie is a hack for IE that adds support for CSS border-radius, gradients and box-shadow.
There are in fact a whole load of hacks along these lines, all aimed at adding features to older versions of IE which it is missing. Modernizr's website has a big list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
However there is one big caveat to all of this. Speed. IE<=8 is a slow browser. It has a slow Javascript engine. Virtually all of these hacks are javascript based. You might get away with running a few of them on any given site, but trying to use enough of them to give IE anything like full support for HTML5 and CSS3 will slow the browser down to the point of being unusable.
There is one other angle to approach this question though, and that's Google's Frame plugin for IE. This basically installs the entire Google Chrome browser engine into IE. The user is still running the IE shell, but the web page is rendered as it would be in an up-to-date version of Chrome.
This sounds great, but of course it isn't perfect. The main down-side of it is that the end user has to install it manually onto their computer, which means that you as a web developer have no real control over whether it's there or not. So its not something you can just add to your site and expect everything to magically work.
Finally, you may also be interested in CanIUse.com, which gives browser support tables for various features, allowing you to see at a glance what is and what isn't supported in various versions of each browser.
HTML 5 is more an umbrella term for a variety of technologies than any one thing or framework. Really, any implementation you do should degrade gracefully-- and that is what makes the site browser compatible. Detect what the browser supports, and then have alternatives that are legacy friendly.
Check out: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
And: http://diveintohtml5.ep.io/detect.html
Good luck.
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
MS is including it in the ASP.net MVC template projects
html5boilerplate won't help you.
As others have said html5 and css3 are very broad terms, there's no framework that implements all of the features provided by both of these. In fact they are not equally supported in browsers that say that they support them. And more, even W3C guys (who write the specs for html5 and css3) are not yet established on what features they will include or what steps will be required to implement them. You get the idea...
But.. if you narrow your requirements to some specific features, like video, audio tags, canvas drawing, nifty css effects, File API, or others, you CAN find frameworks that implement (or try to mimic) them with available technologies in cross-browser manner (more or less).
Planning to use HTML5 in a big project, I need to make an exact timeline for future changes.
Is there any source to tell me when a particular feature of HTML5 will be ready? Is there a roadmap for HTML5 support for each particular web engine?
Just for some more details, I’m working on a social/video sharing site. I want to use new features from CSS3 to HTML5 to JavaScript. Don’t tell me “You can use <video> right now” because I know that!!
Also consider the fact that it takes some time for all people to update their browsers to new ones
Yes:
When can I use...
I need to make an exact time-line for future changes.
So you want Microsoft, Apple, Mozilla, Opera and Google to tell you exactly when they’ll be done adding features to their browsers? Just e-mail them, I’m sure they’ll get right on that :)
Naw, interesting question. I don’t think any browser manufacturers commit to implementing specific features particularly far into the future. In the case of HTML5, the spec itself says that the spec won’t be done until there are two agreeing implementations, so it’s very much a matter of “wait until an implementation ships”.
In the case of WebKit and Firefox, they‘re open-source projects, which I imagine makes it more difficult to commit to far-future dates. Then again, I seem to remember Microsoft being a bit late with Vista, so it’s probably difficult to commit to dates for closed-source projects as well. If you could edit your question with the exact date when your social video sharing site will be finished, that’d be a good start.
A quick Google turns up:
Internet Explorer
Microsoft have got IE 9 in beta. This page claims to be some sort of roadmap: http://microsoft-journal.spaces.live.com/blog/cns!A33F7112F6C1D499!878.entry
There’s also their Internet Explorer Blog
Firefox
Mozilla announced their plans for 3.6 here: https://wiki.mozilla.org/Firefox/Namoroka
Couldn’t find a similar document for 4 (which was originally announced as 3.7), but robertc pointed to this document which details the HTML5 (and CSS3) features added in Firefox 4: https://developer.mozilla.org/en/Firefox_4_for_developers
WebKit (Safari and Chrome)
“Apple doesn’t comment on future products” — http://trac.webkit.org/wiki/FAQ
But the WebKit team do have a blog, Surfin’ Safari
Opera
Folks were apparently clamouring for a roadmap last year: http://dev.opera.com/forums/topic/294965
It all depends on your target audience. If it is South Korean middle aged businessmen with 99% IE6 penetration, you're not likely to be able to use anything fancy any time soon. If it's art directors working in advertising, you can probably already use whatever bleeding edge feature Webkit has implemented.
Check your logs, and use the site sAc linked.
Is it safe now to develop web application with HTML 5 specifications? or should we wait longer for final standards?
I want to start developing a new project. I want it to be up to date in every aspects. should I wait more for html 5 or I can start programming based on it?
It all depends on your audience.
If most of your audience is going to be fairly hip web developers that know to use a decent browser, you are probably going to be fine using HTML5.
However, if your audience is any government institution (school, etc), business place, etc, you might not want to use it yet. My school currently runs on Internet Explorer 6/7, and one of my teacher constantly complains about that "Your browser is not supported" message at the top of Youtube. These people probably don't have any control over the browser they use, and might be a bit behind due to the IT guys.
Find your audience, and use what you are comfortable using with them.
It depends what you which features you want to implement. HTML 5 is a very broad standard covering video, dynamic bitmaps, geolocation, more semantic tags etc.
No browser has implemented all HTML5 features, all have implemented some
This will tell you most of what you need to know about and which browsers support it.
http://diveintohtml5.ep.io/
Which part were you particularly interested in? Many people want to use canvas which is the dynamic graphics tag (simulates svg in an element). Canvas works on all major browsers except IE, though support for canvas is predicted in IE9
It depends on your audience. If they have the latest browsers then you can start using parts of HTML 5. If you don't have a good understanding of your user base then you might want to use web analytics to understand the capabilities of their browsers. Developers tend to have newer browsers but corporations or schools may not. You should also do some research on HTML 5 and understand if you can get up to speed with it quickly if deployment time is a concern.
Use progressive enhancement. A lot of the HTML5 features (application cache, the custom form fields, the extra semantic tags) will do no harm in unsupported browsers (though you might need the HTML5 shiv from Remy Sharp), but give a bonus to users and spiders who can use them. Other features (video tag, database storage, web workers, geolocation) can use workarounds for compatibility with older browsers - the Modernizer library linked by Mark Pilgrim makes this very easy. If your app is usese Geodata, for example, you could use the browser-based geolocation where available and fallback to something IP-based.
If you had to choose a browser (just one) to be the primarily supported browser for a company jumping into HTML5 (CSS3).. Which one would be your safest bet on the middle-long term?
Chrome, FireFox, Safari, IE?
I'm looking for an objective recommendation based on standards driven/compliant, developer tools, fast & correct feature implementations, memory footprint, etc.
UserBase/MarketShare would not be an issue because it would be on a closed environment in which we control the clients (which are basically big machines with a Web interface).
Thanks!
I would say a webkit based browser. That would be the best balance of speed/stability and HTML5/CSS3 features.
However I believe that Opera has the most implemented features.
Opera has always been in the lead, but they've also always had weird bugs. Right now, Chrome is in an interesting position: Google just bought an internet video protocol company (On2), and so they have the power to end the H.264 vs. Ogg Theora battle by releasing this great new codec they've bought as open source.
HTML5 itself isn't anything new: it's just new elements that display differently. Think of it like this: if HTML5 was the first to introduce the <blink> tag, developers would be a little iffy about it because you can just use CSS to set text-decoration:blink or use some Javascript to make the blinking happen.
With HTML5, things aren't that different. Most of the new elements are just extensions of <div>. For the ones that aren't (<video>, <audio>, <canvas>, etc.), there are either already strong implementations (pretty much across the board) or the implementations as complete as the HTML5 spec is.
Will there be a best browser for HTML5? Probably not. It's all just a matter of how the browsers position themselves (like I mentioned with Chrome above).
If you control the environment I would say pick one based on that has features your app can exploit to make your job easier. Otherwise, lower-common-denominator is a widely used approach for a small team.
I would say Gecko (firefox and friends) or webkit (safari, chrome and friends). I wouldn't go with IE nor Opera. Here is a HTML5/CSS3 comparison table that pretty much supports my views.
Safari’s pushing CSS animations and transitions, if they’re a big draw for you.
If you want to make a HTML5 app/site that focuses on one browser, then you might as well use HTML 4 and JavaScript. For the next many many years most HTML5 sites will have to function in non-HTML5 mode.
See HTML5 features as glacing on the cake, to add benefits to the browsers that can take advantage of it.
All the modern versions of browser support HTML 5. But recently launched internet explorer 9 specifically designed by keeping in mind future web technology needs and incorporated latest features that give rich and interactive web experience. Latest browser Internet explorer 9 has more support for Cascading Style Sheet than previous versions of Microsoft browser. It supports CSS3 and more emerging SVG2 markup standards. IE 9 includes new java script engine that designed to take advantage of multi core processor and give maximum performance.