HOW TO compare HTML5 features supported by versions 8, 9 & 10 of IE

This page on the Browserscope website lets you choose versions of the same or different browsers & see how they stack up in supporting HTML5 features. Click on the "Compare UAs" link on that page, select User Agents you want to compare & then hit the Compare button.

I chose versions 8, 9 & 10 of Internet Explorer to see what's new with respect to HTML5 in IE9 & IE 10

click to enlarge image

You can copy the table data to Excel & transpose the columns to rows to view the tabular data vertically as a list (in Excel2010, click on Paste dropdown in Ribbon & select Transpose).

So here is the list of HTML5 supported features in IE9 as detected by Browserscope by utilizing Modernizer 2.0.4 -

1. audio:m4a 
2. audio:mp3 
3. backgroundsize 
4. borderradius 
5. boxshadow 
6. canvas 
7. canvastext 
8. csstransforms 
9. draganddrop 
10. fontface 
11. generatedcontent 
12. geolocation 
13. hashchange 
14. hsla 
15. inlinesvg 
16. localstorage 
17. multiplebgs 
18. opacity 
19. postmessage 
20. rgba 
21. sessionstorage 
22. smil 
23. svg 
24. svgclippaths 
25. video:h264 

 IE10 additionally supports the following HTML5 features -

1. applicationcache 
2. cssanimations 
3. csscolumns 
4. cssgradients 
5. csstransforms3d 
6. csstransitions 
7. history 
8. indexeddb 
9. input:autofocus 
10. input:list 
11. input:max 
12. input:min 
13. input:multiple 
14. input:pattern 
15. input:placeholder 
16. input:required 
17. input:step 
18. inputtypes:email 
19. inputtypes:number 
20. inputtypes:range 
21. inputtypes:search 
22. inputtypes:tel 
23. inputtypes:url 
24. textshadow 
25. websockets 
26. webworkers 

Also see:
Comparison of layout engines (HTML5)
HTML5 compatibility across major mobile and tablet browsers

Read More

Trends & Reference Tables that every Web Developer should track

A web developer's education is never finished. Here is a list of trends & reference tables that, in my opinion, every web developer should track -

• HTTP Archive - Trends in web technology, interesting stats, repository of web performance information
• Browser Security Handbook - Key security properties of contemporary web browsers 
• HTML 5 Reference Table
• HTML 4/ XHTML Reference Table
• CSS 3 Reference Table
• CSS 2 Reference Table
• PPK's Browser Event Compatibility Tables - Desktop, Mobile
• HTML5 compatibility on mobile and tablet browsers

work in progress...

Read More

HTML5 at work

I plan to look out for & compile interesting, practical, real-world examples of HTML5 features that popular websites have started implementing. I hope all the browser manufacturers quickly agree on a common minimum set of HTML5 features & get HTML5 rolling.

* Google Docs now supports uploading an entire folder.

There is a nice explanation on StackOverflow about how this is achieved  by setting up an attribute "webkitdirectory" on a file input element.

Unfortunately as this attribute is proprietary, this feature doesn't work on all browsers.

* The Windows Live team recently released a faster new version of SkyDrive that incorporates HTML5 features.

"We’re using HTML5 for CSS animations, reflow animations and other features. We’re using local storage for various parts of our caching support. We’ve also worked on making our HTML more standards compliant, so that everything you see works in as many modern browsers as possible."

HTML5 versions of Hotmail & Bing are believed to be on the cards

* 6 of the world's top 10 websites currently use LocalStorage on the mobile while Bing & Google use it on the desktop browser as well. Twitter uses App cache.

(to be continued....)

Read More

HOW TO check what HTML5 features a browser supports

Now that I'm getting my feet wet in HTML5, I thought I should spend more time with features that are supported by all popular browsers rather than digging into HTML5 features that are implemented by only one or two browsers.

Table showing browser support for HTML5 Input types from W3Schools.com

I noticed a nice demo by Craig Shoemaker in the Pluralsight HTML5 Fundamentals course on feature detection with Modernizr that lists all supported features. Not finding any readymade sample similar to his script after some googling and lazy to write it on my own, I tweeted him to ask if could share his code.

I appreciate that he did and I got it working locally after tweaking the CSS a bit to ignore a few images that he had used in his slightly old (it uses Modernizr 1.6) original code. I hope to work on it further while I learn more about HTML5 & Modernizr.

Meanwhile, here is the HTML5 Feature detection script using Modernizr 1.6 (red indicates a feature is 'not supported' while green means 'supported')

Update: haz.io & the Modernizr Test Suite  show a much larger list of HTML5 features supported by a browser opening their test page.

Browserscope compares all browsers on supported HTML5 features in a single page. I wish the first row & column of the table there were frozen for better readability.

Read More

A new JavaScript Reference to bookmark

For years, the JavaScript section at W3Schools.com has been a indispensable source of reference for me. It will now not be my only source. After going through Stephen Walther's JavaScript Reference built with HTML5 & jQuery, I'm impressed with all the useful & up-to-date information that it contains.

Unlike W3Schools which shows what browsers support (or don't support) a particular method or property, without explicitly specifying the version...

...this new Reference shows which browsers support each of the Objects, Functions, Properties, Statements, Operators, Comments, Directives. Only the latest versions of popular browsers are taken into account & surprisingly Opera is excluded.

The complete source (15.2MB) of this HTML5 JavaScript Reference application is available for download & review.

Update(14/Jan/11): If you work with JavaScript, also get this bookmarklet - Steve Souders has created a meta-bookmarklet that includes DOM Monster & a few other performance analysis tools available as bookmarklets. His meta-bookmarklet works with mobile & desktop browsers.

Read More

More HTML5 Games

There were quite a few games built with HTML5 in the 10K Apart contest. The grand prize winner's submission was a game built using just canvas and JavaScript, measuring only 6.9KB.

HTML5 is indeed making it easy to develop games for standard web browsers while also providing a way for developers to reach mobiles and tablets with a single code base.

The Google sponsored HTML5 Game Jam has also produced some nifty games. Check the winning entries and also look out for Mozilla's Game On competition

Read More

How the Internet thing works

“20 Things I Learned about Browsers and the Web”  is an online illustrated guide from Google aimed at casual users. You can browse though it to catch up on the buzz-words or pass it to friends & relatives who want to know about the Internet thing. It is also available in PDF format for offline reading.

It covers the following topics in a lighthearted, non-techincal way -

• What is the Internet?
• Cloud Computing
• Web Apps
• HTML, JavaScript, CSS and more
• HTML5
• 3D in the Browser
• A Browser Madrigal
• Plug-ins
• Browser Extensions
• Synchronizing the Browser
• Browser Cookies
• Browsers and Privacy
• Malware, Phishing, and Security Risks
• How Modern Browsers Help Protect You From Malware and Phishing
• Using Web Addresses to Stay Safe
• IP Addresses and DNS
• Validating Identities Online
• Evolving to a Faster Web
• Open Source and Browsers

As it is built using HTML5, JavaScript and CSS3, it is best viewed with a HTML5-compliant browser.

A user named Nephron reports (in the comments section of this post) that the source is about 3500 lines of code & utilizes jQuery. Google plans to open source the entire code soon. The code for this web book is now open sourced on Google Code (2-June-2011)

Read More

Web apps in less than 10 KB

There have been over 350+ submissions to the 10K Apart contest conducted by Microsoft & Event Apart that has a prize money of over $10K.

The important rule was that participants should build a web app whose total file size including images, scripts & markup, shouldn’t be over 10K. All code must run client-side although 3rd-party Web services & JavaScript libraries like jQuery, Prototype & Typekit are allowed. The code must be standards compliant & usage of HTML5 is encouraged.

The submissions are good learning material for developers who value speed & standards. They are listed on the home page. Sort on the Highest Rating & Most Comments options (generally good indicators of popularity) in the dropdown box there, to get started with viewing the apps & their source.

Update (14-Sep-2010) - Hakim El Hattab's game measuring a measly 6.9KB has won him the grand prize of $3000 & other goodies. The entries of the other 3 Runners-Up are addictive games that you better not check if you don't want to waste time.

Related:
Get ready for HTML5
HTML5 features emerging in popular web apps

Read More