Added live browser tests, to show whether current viewing browser supports particular technology

Author: remy

css/html5demos.css

@@ -177,7 +177,7 @@ body.view-source #view-source {
 }
 
 #demos .support {
-  width: 105px;
+  width: 126px;
 }
 
 .support span {
@@ -261,6 +261,25 @@ body.view-source #view-source {
 #html5badge {
 /*  display: none;*/
   margin-left: -30px;
+  border: 0;
+}
+
+#html5badge img {
+  border: 0;
+}
+
+.support span.yourbrowser {
+  width: 16px;
+  height: 16px;
+  background: none;
+}
+
+.support span.yourbrowser.supported {
+  background: url(http://github.com/..%3Cspan%20class=pl-c1%3E/%3C/span%3Eimages/yourbrowser.gif) no-repeat top left;
+}
+
+.support span.yourbrowser.not-supported {
+  background: url(http://github.com/..%3Cspan%20class=pl-c1%3E/%3C/span%3Eimages/yourbrowser.gif) no-repeat top right;
 }
 
 /** Pretty printing styles. Used with prettify.js. */

demos.json

@@ -6,7 +6,8 @@
     "support": {
       "live": "chrome",
       "nightly": "safari"
-    }
+    },
+    "test": "'dataset' in document.createElement('i')"
   },
   {
     "desc": "History API using pushState",
@@ -16,17 +17,18 @@
     "support": {
       "live": "chrome safari",
       "nightly": "firefox"
-    }
+    },
+    "test": "Modernizr.history"
   },
   {
     "desc": "Drag files directly into your browser",
     "url": "file-api",
     "note": "Not directly part of HTML5",
     "tags": "file-api dnd",
     "support": {
-      "live": "firefox",
-      "nightly": "chrome"
-    }
+      "live": "firefox chrome"
+    },
+    "test": "typeof FileReader != 'undefined'"
   },
   {
     "desc": "Simple chat client",
@@ -35,7 +37,8 @@
     "support": {
       "live": "safari chrome",
       "nightly": "firefox opera"
-    }
+    },
+    "test": "Modernizr.websockets"
   },
   {
     "desc": "Two videos playing in sync",
@@ -44,7 +47,8 @@
     "support": {
       "live": "firefox opera safari chrome",
       "nightly": "ie"
-    }
+    },
+    "test": "Modernizr.video"
   },
   {
     "desc": "Interactive canvas gradients",
@@ -53,7 +57,8 @@
     "support": {
       "live": "firefox opera safari chrome",
       "nightly": "ie"
-    }
+    },
+    "test": "Modernizr.canvas"
   },
   {
     "desc": "Canvas & Video",
@@ -62,7 +67,8 @@
     "support": {
       "live": "firefox opera safari chrome",
       "nightly": "ie"
-    }
+    },
+    "test": "Modernizr.video && Modernizr.canvas"
   },
   {
     "desc": "Video",
@@ -71,7 +77,8 @@
     "support": {
       "live": "firefox opera safari chrome",
       "nightly": "ie"
-    }
+    },
+    "test": "Modernizr.video"
   },
   {
     "desc": "Canvas",
@@ -80,24 +87,28 @@
     "support": {
       "live": "firefox opera safari chrome",
       "nightly": "ie"
-    }
+    },
+    "test": "Modernizr.canvas"
   },
   {
     "desc": "Content Editable",
     "url": "contenteditable",
     "tags": "contenteditable storage",
     "support": {
       "live": "ie firefox opera safari chrome"
-    }
+    },
+    "test": "'isContentEditable' in document.createElement('span');"
   },
   {
     "desc": "Geolocation",
     "url": "geo",
     "tags": "geolocation",
     "note": "Works on Safari Mobile too",
     "support": {
-      "live": "firefox chrome safari opera"
-    }
+      "live": "firefox chrome safari opera",
+      "nightly": "ie"
+    },
+    "test": "Modernizr.geolocation"
   },
   {
     "desc": "postMessage",
@@ -106,7 +117,8 @@
     "tags": "postMessage",
     "support": {
       "live": "ie firefox opera safari chrome"
-    }
+    },
+    "test": "Modernizr.postmessage"
   },
   {
     "desc": "postMessage",
@@ -115,23 +127,26 @@
     "note": "cross domain",
     "support": {
       "live": "ie firefox opera safari chrome"
-    }
+    },
+    "test": "Modernizr.postmessage"
   },
   {
     "desc": "drag and drop",
     "url": "drag",
     "tags": "dnd",
     "support": {
       "live": "ie firefox safari chrome"
-    }
+    },
+    "test": "Modernizr.draganddrop"
   },
   {
     "desc": "drag anything",
     "url": "drag-anything",
     "tags": "dnd",
     "support": {
       "live": "ie firefox safari chrome"
-    }
+    },
+    "test": "Modernizr.draganddrop"
   },
   {
     "desc": "offline detection",
@@ -167,31 +182,35 @@
     "tags": "offline manifest",
     "support": {
       "live": "firefox safari chrome opera"
-    }
+    },
+    "test": "Modernizr.applicationcache"
   },
   {
     "desc": "Storage",
     "url": "storage",
     "tags": "storage",
     "support": {
       "live": "ie firefox opera safari chrome"
-    }
+    },
+    "test": "Modernizr.sessionstorage && Modernizr.localstorage"
   },
   {
     "desc": "Web SQL Database Storage",
     "url": "database",
     "tags": "sql-database",
     "support": {
       "live": "safari chrome opera"
-    }
+    },
+    "test": "Modernizr.websqldatabase"
   },
   {
     "desc": "Web SQL Database - rollback test",
     "url": "database-rollback",
     "tags": "sql-database",
     "support": {
       "live": "safari chrome opera"
-    }
+    },
+    "test": "Modernizr.websqldatabase"
   },
   {
     "desc": "Web Workers",
@@ -200,6 +219,7 @@
     "note": "watch out - uses a lot of CPU! <a href=\"non-worker\">example without - will hang your browser</a>",
     "support": {
       "live": "safari chrome firefox opera"
-    }
+    },
+    "test": "Modernizr.webworkers"
   }
 ]

html5demo.manifest

@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# version 15
+# Build 2011-02-22
 
 CACHE:
 images/shade.jpg

index.php

@@ -1,13 +1,13 @@
 <?php
 $demos = json_decode(file_get_contents('demos.json'));
 
-function support($support) {
+function support($support, $url) {
   $browsers = split(' ', 'ie firefox opera safari chrome'); // big 5 - should I add iPhone (for geo, etc)?
 
   $live = isset($support->live) ? split(' ', $support->live) : array();
   $nightly = isset($support->nightly) ? split(' ', $support->nightly) : array();
 
-  $html = '';
+  $html = '<span title="unknown browser support" class="yourbrowser tag" id="test-' . $url . '"></span> ';
 
   foreach ($browsers as $browser) {
     $class = '';
@@ -43,6 +43,7 @@ function spans($list) {
 <title>HTML5 Demos and Examples</title>
 <link rel="stylesheet" href="/css/html5demos.css" type="text/css" />
 <script src="js/h5utils.js"></script>
+<script src="js/modernizr.custom.js"></script>
 </head>
 <body>
 <section id="wrapper">
@@ -64,14 +65,14 @@ function spans($list) {
           <tr>
             <th>Demo</th>
             <th>Support</th>
-            <th>Technology</th>            
+            <th>Technology</th>
           </tr>
         </thead>
         <tbody>
           <?php foreach ($demos as $demo) :?>
           <tr>
             <td class="demo"><a href="<?=$demo->url?>"><?=$demo->desc?></a><?php if (isset($demo->note)) { echo ' <small>' . $demo->note . '</small>'; }?></td>
-            <td class="support"><?=support($demo->support)?></td>
+            <td class="support"><?=support($demo->support, $demo->url)?></td>
             <td class="tags"><?=spans($demo->tags)?></td>
           </tr>
           <?php endforeach ?>
@@ -86,8 +87,9 @@ function spans($list) {
     <footer><a id="built" href="http://twitter.com/rem">@rem built this</a></footer> 
 </section>
 
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.%3Cspan%20class="x x-first x-last">4.2/jquery.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.%3Cspan%20class="x x-first x-last">5/jquery.min.js"></script>
 <script>
+var tags = [];
 $(document).delegate('span.tag', 'click', function () {
   var $tag = $(this), tag = $tag.text(), type = $tag.closest('td').attr('class') || 'tags';
 
@@ -104,7 +106,7 @@ function spans($list) {
     $trs.show();
   } else {
     $('tbody tr').show();
-  }  
+  }
 });
 
 var html = [];
@@ -119,6 +121,17 @@ function spans($list) {
 
 $('#tags').append('<strong>Filter demos:</strong> ' + html.sort().join(''));
 
+$.getJSON('demos.json', function (data) {
+  var i = data.length, $test;
+  while (i--) {
+    if (data[i].test && (new Function('return ' + data[i].test))()) {
+      $('#test-' + data[i].url).addClass('supported').attr('title', 'your browser is supported');
+    } else if (data[i].test) {
+      $('#test-' + data[i].url).addClass('not-supported').attr('title', 'your browser is NOT supported');
+    }
+  }
+});
+
 // $('tr td.demo').click(function () {
 //   window.location = $(this).find('a').attr('href');
 // });