+<(common.inc.plp)><:
+use 5.010;
+
+Html({
+ title => 'browser compatibility cheat sheet',
+ version => 'v1.0',
+ description =>
+ "caniuse.",
+ keywords => [qw'html css browser feature'],
+ stylesheet => [qw'light dark circus mono red'],
+ data => ['caniuse.js'],
+});
+
+:>
+<h1>Browser compatibility</h1>
+
+<p>Alternate view of Fyrd's <a href="http://caniuse.com/">when can I use...</a> site.</p>
+
+<:
+use JSON;
+use File::Slurp 'read_file';
+my $source = read_file('caniuse.js');
+for ($source) { # cleanup
+ # convert seperate variables to hash keys
+ s/\A/{/;
+ s/^caniuse\.(\w+) = /"$1":/gm;
+ s/;$/,/gm;
+ s/,\s*\Z/\n}/;
+ # fractions not supported by barekey
+ s/(?<=[,{]) (\d*\.\d) (?=:')/"$1"/gx;
+ # escapes not supported in singlequote
+ s{'((?:[^\\']+|\\.)*)'}{
+ my $_ = $1;
+ s/"/\\"/g;
+ s/\\'/'/g;
+ qq("$_");
+ }ge;
+}
+my $caniuse = from_json($source, {
+# allow_singlequote => 1,
+ allow_barekey => 1,
+});
+
+my %CSTATS = (
+ n => 'di-b',
+ y => 'di-a',
+ a => 'di-d',
+ j => 'di-prop',
+ p => 'di-prop',
+ 'y x' => 'di-a',
+);
+my %CSTATUS = (
+ unoff => 'di-rare', # unofficial
+ wd => 'di-b', # draft
+ pr => 'di-prop', # proposed
+ cr => 'di-d', # candidate
+ rec => 'di-a', # recommendation
+ ietf => 'di-a', # standard
+);
+my @browsers = qw(trident gecko webkit_saf presto);
+unshift @{ $caniuse->{agents}->{gecko}->{versions} }, 2;
+
+print '<table class="glyphs dimap">';
+print '<col>' x 2;
+printf '<colgroup span="%d">', scalar @{ $caniuse->{agents}->{$_}->{versions} } for @browsers;
+print "\n";
+
+print '<thead><tr>';
+print "<th>$_" for qw(feature status);
+printf '<th colspan="%d">%s', scalar @{ $_->{versions} }, $_->{browser}
+ for map { $caniuse->{agents}->{$_} } @browsers;
+print "</thead>\n";
+
+for my $id (keys %{ $caniuse->{data} }) {
+ my $row = $caniuse->{data}->{$id};
+ my $data = $row->{stats} or next; # skip metadata [summary]
+ printf '<tr id="%s">', $id;
+ printf '<th title="%s">%s', $row->{description}, $row->{title};
+ printf '<td title="%s" class="%s">%s', $caniuse->{statuses}->{$_}, $CSTATUS{$_} // '', $_ for $row->{status};
+ for my $browser (@browsers) {
+ printf '<td class="%s">%s', $CSTATS{ $data->{$browser}->{$_} }, $_
+ for @{ $caniuse->{agents}->{$browser}->{versions} };
+ }
+}
+print '</table>';
+
+:>
+<hr>
+
+<div class="legend">
+ <table class="glyphs"><tr>
+ <td class="X di-a">yes
+ <td class="X di-d">almost
+ <td class="X di-prop">plugin or js
+ <td class="X di-b">no
+ </table>
+
+ <div class="right">
+ <ul class="legend legend-set">
+ <li>default <strong>style</strong> is
+ <:= defined $get{style} && 'set to ' :><em><:= $style :></em>
+ </ul>
+ </div>
+</div>
+