Better table explaining browser support - also supports live filtering on tags and browser support.
This commit is contained in:
Remy Sharp
parent
be0c5e6764
commit
7470441d15
|
|
@ -1,5 +1,5 @@
|
|||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
font: normal 16px/20px "Helvetica Neue", Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
|
|
@ -149,4 +149,138 @@ body.view-source > * {
|
|||
body.view-source #view-source {
|
||||
display: block !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#demos {
|
||||
width: 560px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#demos .demo {
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#demos a {
|
||||
color: #00b;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#demos a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#demos tr {
|
||||
border-top: 1px solid #DCDCDC;
|
||||
}
|
||||
|
||||
|
||||
#demos .demo p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#demos .support {
|
||||
width: 105px;
|
||||
}
|
||||
|
||||
#demos .support span {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
display: block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
text-indent: -9999px;
|
||||
background-image: url(/images/browsers.gif);
|
||||
background-repeat: none;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#demos .support span.selected {
|
||||
outline: 1px dashed #75784C;
|
||||
}
|
||||
|
||||
#demos .support span.ie.live {
|
||||
background-position: 48px 0px;
|
||||
}
|
||||
|
||||
#demos .support span.ie.nightly {
|
||||
background-position: 48px -16px;
|
||||
}
|
||||
|
||||
#demos .support span.ie.none {
|
||||
background-position: 48px -32px;
|
||||
}
|
||||
|
||||
#demos .support span.opera.live {
|
||||
background-position: 64px 0px;
|
||||
}
|
||||
|
||||
#demos .support span.opera.nightly {
|
||||
background-position: 64px -16px;
|
||||
}
|
||||
|
||||
#demos .support span.opera.none {
|
||||
background-position: 64px -32px;
|
||||
}
|
||||
|
||||
#demos .support span.firefox.live {
|
||||
background-position: 32px 0px;
|
||||
}
|
||||
|
||||
#demos .support span.firefox.nightly {
|
||||
background-position: 32px -16px;
|
||||
}
|
||||
|
||||
#demos .support span.firefox.none {
|
||||
background-position: 32px -32px;
|
||||
}
|
||||
|
||||
#demos .support span.chrome.live {
|
||||
background-position: 16px 0px;
|
||||
}
|
||||
|
||||
#demos .support span.chrome.nightly {
|
||||
background-position: 16px -16px;
|
||||
}
|
||||
|
||||
#demos .support span.chrome.none {
|
||||
background-position: 16px -32px;
|
||||
}
|
||||
|
||||
#demos .support span.safari.live {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
#demos .support span.safari.nightly {
|
||||
background-position: 0px -16px;
|
||||
}
|
||||
|
||||
#demos .support span.safari.none {
|
||||
background-position: 0px -32px;
|
||||
}
|
||||
|
||||
#demos .tags {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
#demos .tags span {
|
||||
font-size: 11px;
|
||||
color: #6E724E;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #D7D999;
|
||||
background: #FFFFC6;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#demos .tags span:hover,
|
||||
#demos .tags span.selected {
|
||||
border: 1px solid #75784C;
|
||||
background: #FF7;
|
||||
color: #333521;
|
||||
}
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
[
|
||||
{
|
||||
"desc": "Interactive canvas gradients",
|
||||
"url": "canvas-grad",
|
||||
"tags": "canvas",
|
||||
"support": {
|
||||
"live": "firefox opera safari chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Canvas & Video",
|
||||
"url": "video-canvas",
|
||||
"tags": "video canvas",
|
||||
"support": {
|
||||
"live": "firefox opera safari chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Video",
|
||||
"url": "video",
|
||||
"tags": "video",
|
||||
"support": {
|
||||
"live": "firefox opera safari chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Canvas",
|
||||
"url": "canvas",
|
||||
"tags": "canvas",
|
||||
"support": {
|
||||
"live": "firefox opera safari chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Content Editable",
|
||||
"url": "contenteditable",
|
||||
"tags": "contenteditable storage",
|
||||
"support": {
|
||||
"live": "ie firefox opera safari chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Geolocation",
|
||||
"url": "geo",
|
||||
"tags": "geolocation",
|
||||
"support": {
|
||||
"live": "firefox iphone",
|
||||
"nightly": "chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "postMessage",
|
||||
"url": "postmessage",
|
||||
"note": "same domain",
|
||||
"tags": "postMessage",
|
||||
"support": {
|
||||
"live": "ie firefox opera safari chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "postMessage",
|
||||
"url": "postmessage2",
|
||||
"tags": "postMessage",
|
||||
"note": "cross domain",
|
||||
"support": {
|
||||
"live": "ie firefox opera safari chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "drag and drop",
|
||||
"url": "drag",
|
||||
"tags": "dnd",
|
||||
"support": {
|
||||
"live": "ie firefox safari chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "drag anything",
|
||||
"url": "drag-anything",
|
||||
"tags": "dnd",
|
||||
"support": {
|
||||
"live": "ie firefox safari chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "offline detection",
|
||||
"url": "offline",
|
||||
"tags": "offline events",
|
||||
"support": {
|
||||
"live": "firefox opera iphone"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "on/offline event tests",
|
||||
"url": "offline-events",
|
||||
"notes": "Opera & Firefox - requires \"Work Offline\"",
|
||||
"tags": "offline events",
|
||||
"support": {
|
||||
"live": "firefox opera iphone"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "offline application using the manifest",
|
||||
"url": "offlineapp",
|
||||
"note": "FF 3.6 is still buggy - doesn't request manifest after initial load",
|
||||
"tags": "offline manifest",
|
||||
"support": {
|
||||
"live": "firefox safari chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Storage",
|
||||
"url": "storage",
|
||||
"tags": "storage",
|
||||
"support": {
|
||||
"live": "ie firefox opera safari chrome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Web SQL Database Storage",
|
||||
"url": "database",
|
||||
"tags": "sql-database",
|
||||
"support": {
|
||||
"live": "safari chrome opera"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Web SQL Database - rollback test",
|
||||
"url": "database-rollback",
|
||||
"tags": "sql-database",
|
||||
"support": {
|
||||
"live": "safari chrome opera"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "Web Workers",
|
||||
"url": "worker",
|
||||
"tags": "workers",
|
||||
"note": "watch out - uses a lot of CPU! <a href=\"non-worker\">example without - will hang your browser</a>",
|
||||
"support": {
|
||||
"live": "safari chrome opera firefox"
|
||||
}
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
101
index.php
101
index.php
|
|
@ -1,3 +1,40 @@
|
|||
<?php
|
||||
$demos = json_decode(file_get_contents('demos.json'));
|
||||
|
||||
function support($support) {
|
||||
$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 = '';
|
||||
|
||||
foreach ($browsers as $browser) {
|
||||
$class = '';
|
||||
if (in_array($browser, $live)) {
|
||||
$class .= ' live';
|
||||
} else if (in_array($browser, $nightly)) {
|
||||
$class .= ' nightly';
|
||||
} else {
|
||||
$class .= ' none';
|
||||
}
|
||||
|
||||
$html .= '<span title="' . trim($class) . '" class="' . $browser . $class . '">' . $browser . ':' . $class . '</span> ';
|
||||
}
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
function spans($list) {
|
||||
$items = split(' ', $list);
|
||||
$html = '';
|
||||
foreach ($items as $item) {
|
||||
$html .= '<span>' . $item . '</span> ';
|
||||
}
|
||||
|
||||
return $html;
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
@ -12,27 +49,23 @@
|
|||
<h1><abbr>HTML</abbr> 5 Demos and Examples</h1>
|
||||
</header>
|
||||
<article>
|
||||
<p><abbr>HTML</abbr> 5 experimentation and demos I've hacked together:</p>
|
||||
<ul>
|
||||
<li><span class="support"></span><a href="canvas-grad">Interactive canvas gradients</a> (all bar IE)</li>
|
||||
<li><a href="video-canvas">Canvas & Video</a> (all bar IE)</li>
|
||||
<li><a href="video">Video</a> (all bar IE)</li>
|
||||
<!--<li><a href="http://people.opera.com/brucel/demo/html5-forms-demo.html">Web Forms 2.0</a> (Opera 9+, very partial Safari support)</li>-->
|
||||
<li><a href="canvas">Canvas</a> (all bar IE)</li>
|
||||
<li><a href="contenteditable">Content Editable</a> (all latest browsers)</li>
|
||||
<li><a href="geo">Geolocation</a> (FF3.5, iPhone OS 3)</li>
|
||||
<li><a href="postmessage">postMessage</a> (same domain) (all latest browsers)</li>
|
||||
<li><a href="postmessage2">postMessage</a> (cross domain) (all latest browsers)</li>
|
||||
<li><a href="drag">drag and drop</a> (IE, Safari 4, FF3.5)</li>
|
||||
<li><a href="drag-anything">drag <em>anything</em></a> (IE, Safari 4, FF3.5)</li>
|
||||
<li><a href="offline">offline detection</a> (FF3.5, iPhone OS 3)</li>
|
||||
<li><a href="offline-events">on/offline event tests</a> (Opera, Firefox - requires "Work Offline")</li>
|
||||
<li><a href="offlineapp">offline application using the manifest</a> (Safari 4, FF3.5.3) (<em>Note: pre-FF3.5.3 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501422">has a bug</a></em>)</li>
|
||||
<li><a href="storage">Storage</a> (all latest browsers)</li>
|
||||
<li><a href="database">Web SQL Database Storage</a> (Safari, iPhone OS 3, Opera 10.50)</li>
|
||||
<li><a href="database-rollback">Web SQL Database - rollback test</a> (Safari, iPhone OS 3, Opera 10.50)</li>
|
||||
<li><a href="worker">Web Workers</a> (watch out - uses a <em>lot</em> of CPU! <a href="non-worker">example without - will hang your browser</a>)</li>
|
||||
</ul>
|
||||
<p><abbr>HTML</abbr> 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an <code>and</code> filter).</p>
|
||||
<table id="demos">
|
||||
<thead>
|
||||
<th>Demo</th>
|
||||
<th>Support</th>
|
||||
<th>Technology</th>
|
||||
</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="tags"><?=spans($demo->tags)?></td>
|
||||
</tr>
|
||||
<?php endforeach ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- <section>
|
||||
<a href="http://full-frontal.org" id="ffad" title="JavaScript Conference: Full Frontal, 20th November">
|
||||
|
|
@ -46,6 +79,32 @@
|
|||
</article>
|
||||
<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.4.2/jquery.min.js"></script>
|
||||
<script>
|
||||
$('tr span').click(function () {
|
||||
var $tag = $(this), tag = $tag.text(), type = $tag.closest('td').attr('class');
|
||||
if ($tag.is('.selected')) {
|
||||
$('.' + type + ' span:contains(' + tag + ')').removeClass('selected');
|
||||
} else {
|
||||
$('.' + type + ' span:contains(' + tag + ')').addClass('selected');
|
||||
}
|
||||
|
||||
// it's an AND filter
|
||||
var $trs = $('.' + type + ':has(span.selected)').closest('tr');
|
||||
if ($trs.length) {
|
||||
$('tr').hide();
|
||||
$trs.show();
|
||||
} else {
|
||||
$('tr').show();
|
||||
}
|
||||
});
|
||||
|
||||
// $('tr td.demo').click(function () {
|
||||
// window.location = $(this).find('a').attr('href');
|
||||
// });
|
||||
|
||||
</script>
|
||||
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
|
|
|
|||
Loading…
Reference in New Issue