browser.plp

   1 <(common.inc.plp)><:
   2 use 5.010;
   3
   4 Html({
   5         title => 'browser compatibility cheat sheet',
   6         version => 'v1.0',
   7         description =>
   8                 "caniuse.",
   9         keywords => [qw'html css browser feature'],
  10         stylesheet => [qw'light dark circus mono red'],
  11         data => ['caniuse.js'],
  12 });
  13
  14 :>
  15 <h1>Browser compatibility</h1>
  16
  17 <p>Alternate view of Fyrd's <a href="http://caniuse.com/">when can I use...</a> site.</p>
  18
  19 <:
  20 use JSON;
  21 use File::Slurp 'read_file';
  22 my $source = read_file('caniuse.js');
  23 for ($source) { # cleanup
  24         # convert seperate variables to hash keys
  25         s/\A/{/;
  26         s/^caniuse\.(\w+) = /"$1":/gm;
  27         s/;$/,/gm;
  28         s/,\s*\Z/\n}/;
  29         # fractions not supported by barekey
  30         s/(?<=[,{]) (\d*\.\d) (?=:')/"$1"/gx;
  31         # escapes not supported in singlequote
  32         s{'((?:[^\\']+|\\.)*)'}{
  33                 my $_ = $1;
  34                 s/"/\\"/g;
  35                 s/\\'/'/g;
  36                 qq("$_");
  37         }ge;
  38 }
  39 my $caniuse = from_json($source, {
  40 #       allow_singlequote => 1,
  41         allow_barekey => 1,
  42 });
  43
  44 my %CSTATS = (
  45         n => 'di-b',
  46         y => 'di-a',
  47         a => 'di-d',
  48         j => 'di-prop',
  49         p => 'di-prop',
  50         'y x' => 'di-a',
  51 );
  52 my %CSTATUS = (
  53         unoff => 'di-rare', # unofficial
  54         wd    => 'di-b', # draft
  55         pr    => 'di-prop', # proposed
  56         cr    => 'di-d', # candidate
  57         rec   => 'di-a', # recommendation
  58         ietf  => 'di-a', # standard
  59 );
  60 my @browsers = qw(trident gecko webkit_saf presto);
  61 unshift @{ $caniuse->{agents}->{gecko}->{versions} }, 2;
  62
  63 print '<table class="glyphs dimap">';
  64 print '<col>' x 2;
  65 printf '<colgroup span="%d">', scalar @{ $caniuse->{agents}->{$_}->{versions} } for @browsers;
  66 print "\n";
  67
  68 print '<thead><tr>';
  69 print "<th>$_" for qw(feature status);
  70 printf '<th colspan="%d">%s', scalar @{ $_->{versions} }, $_->{browser}
  71         for map { $caniuse->{agents}->{$_} } @browsers;
  72 print "</thead>\n";
  73
  74 for my $id (keys %{ $caniuse->{data} }) {
  75         my $row = $caniuse->{data}->{$id};
  76         my $data = $row->{stats} or next;  # skip metadata [summary]
  77         printf '<tr id="%s">', $id;
  78         printf '<th title="%s">%s', $row->{description}, $row->{title};
  79         printf '<td title="%s" class="%s">%s', $caniuse->{statuses}->{$_}, $CSTATUS{$_} // '', $_ for $row->{status};
  80         for my $browser (@browsers) {
  81                 printf '<td class="%s">%s', $CSTATS{ $data->{$browser}->{$_} }, $_
  82                         for @{ $caniuse->{agents}->{$browser}->{versions} };
  83         }
  84 }
  85 print '</table>';
  86
  87 :>
  88 <hr>
  89
  90 <div class="legend">
  91         <table class="glyphs"><tr>
  92         <td class="X di-a">yes
  93         <td class="X di-d">almost
  94         <td class="X di-prop">plugin or js
  95         <td class="X di-b">no
  96         </table>
  97
  98         <div class="right">
  99                 <ul class="legend legend-set">
 100                 <li>default <strong>style</strong> is
 101                         <:= defined $get{style} && 'set to ' :><em><:= $style :></em>
 102                 </ul>
 103         </div>
 104 </div>
 105