Find file
Fetching contributors…
Cannot retrieve contributors at this time
195 lines (105 sloc) 10.5 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Html5please API | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="Some time ago, I noticed that many webGL demos had a nice browser prompt: If your browser did not support webGL, you got a little link to get.webgl. &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/html5please.html" title="html5please">&#x276C;</a>
<a class="next" href="/fake-bolding-of-web-fonts.html" title="Fake Bolding of Web Fonts">&#x276D;</a>
<time datetime="2012-02-26T17:24:00+05:30" pubdate><span class='month'>Feb</span> <span class='day'>26</span> <span class='year'>2012</span></time>
<h1 class="entry-title"><a href="/html5please-api.html">Html5please API</a></h1>
<div class="entry-content"><p><a href=""><img src="" alt="" /></a></p>
<p>Some time ago, I noticed that many <a href="">webGL demos</a> had a nice browser prompt:</p>
<p><img src="" alt="" /></p>
<p>If your browser did not support webGL, you got a little link to <a href=""></a> which uses UA detection to tell you what browser to view webGL with. If there was a newer version of your browser that supported webGL, then it would link to that browser. If not, it would link to all the other browsers that support webGL:</p>
<p><img src="" alt="getWebGL messaging" /></p>
<p>Instead of forcing people to choose a browser arbitrarily due to a developer&#8217;s whims and fancies, it provides you with an optimal recommendation based on your (viewer&#8217;s) defaults.</p>
<p>I wanted to see if we could do so with all the other HTML5 features. This way, there would be less of &#8220;download webkit browsers now&#8221; and more smart browser recommendations based on actual feature support.</p>
<p>You also won&#8217;t have to see antiquated messaging like &#8220;Download Opera 9.5&#8221; or &#8220;Download Chrome 8&#8221;, but get an up-to-date browser support information depending on the features that are requested:</p>
<p><img src="" alt="Screenshot of browser support message" /></p>
<p>If a newer version of your browser supports the required features, it would ask you to view the page in that browser and not in random other browsers:</p>
<p><img src="" alt="Screenshow of newer browser message" /></p>
<p>I broached the idea <a href="">here</a> and then less than a month ago, <a href="">Jonathan Neal</a> produced a full working implementation of how such a service would look like. I worked with Jon, <a href="">Alexis Deveria</a>, <a href="">Paul Irish</a>, <a href="">Hans Christian Reinl</a>, <a href="">Aaron Layton</a> and <a href="">many more</a> to create what is now <a href="">HTML5Please API</a>.</p>
<p>In brief, this service looks up the data used to render <a href="">When can I use</a> tables and match it to the user&#8217;s UA. Depending on the match, and the required features, it would either tell the user that they have a browser that is missing critical features required on the page or it would get out of the way and not render anything.</p>
<p>Here is how it looks like on a browser that supports all the required features:
<img src="" alt="A page on a browser supporting Drag and Drop" /></p>
<p>Here is how it looks like when a browser does not:
<img src="" alt="A page on a browser that does not support Drag and Drop" /></p>
<p>Even if the service fails to return anything (say network failure), there is no terrible disruption, the user can use the site as it is.</p>
<p>Ideally, you would want to provide all critical actions on the user&#8217;s browser based on what is available. If you absolutely must need certain features to enhance the experience, you can use this service to let the user know which browsers would offer that.</p>
<p><a href="">Simurai</a> has some creative uses of this service in his projects <a href="">Carveme</a> and <a href="">Flash Light</a>. What more, this API has even been <a href="">integrated into an IRC bot</a>!</p>
<p>The <a href="">Wiki pages</a> have much more in-depth information on all the possible options you can use with this API.</p>
<p>Let us know your suggestions and bug reports on the <a href="">Github Issue Tracker</a>.</p>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<time datetime="2012-02-26T17:24:00+05:30" pubdate><span class='month'>Feb</span> <span class='day'>26</span> <span class='year'>2012</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar" src="" height=48> <a href="">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
<footer role="contentinfo"><p>
Copy to your heart’s content 2013 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];