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 my %versions;
  62 if (my ($somerow) = values %{ $caniuse->{data} }) {
  63         while (my ($browser, $row) = each %{ $somerow->{stats} }) {
  64                 $versions{$browser} = [ sort { paddedver($a) cmp paddedver($b) } keys %$row ];
  65         }
  66 }
  67
  68 print '<table class="glyphs dimap">';
  69 print '<col>' x 2;
  70 printf '<colgroup span="%d">', scalar @{ $versions{$_} } for @browsers;
  71 print "\n";
  72
  73 print '<thead><tr>';
  74 print "<th>$_" for qw(feature status);
  75 printf '<th colspan="%d">%s',
  76         scalar @{ $versions{$_} }, $caniuse->{agents}->{$_}->{browser}
  77                 for @browsers;
  78 # preceding row without any colspan to work around gecko bug
  79 print '<tr>';
  80 print '<td>' x $_ for 2, map { scalar @{ $versions{$_} } } @browsers;
  81 print "</thead>\n";
  82
  83 for my $id (keys %{ $caniuse->{data} }) {
  84         my $row = $caniuse->{data}->{$id};
  85         my $data = $row->{stats} or next;  # skip metadata [summary]
  86         printf '<tr id="%s">', $id;
  87         printf '<th title="%s">%s', $row->{description}, $row->{title};
  88         printf '<td title="%s" class="%s">%s', $caniuse->{statuses}->{$_}, $CSTATUS{$_} // '', $_ for $row->{status};
  89         for my $browser (@browsers) {
  90                 my ($prev, @span);
  91                 for my $ver (@{ $versions{$browser} }, undef) {
  92                         unless (!defined $prev
  93                         or $data->{$browser}->{$prev} ~~ $data->{$browser}->{$ver}) {
  94                                 printf '<td class="%s" colspan="%d">%s',
  95                                         $CSTATS{ $data->{$browser}->{$prev} },
  96                                         scalar @span,
  97                                         join('‒', $span[0], @span > 1 ? $span[-1] : ());
  98                                 undef $prev;
  99                                 @span = ();
 100                         }
 101                         push @span, $ver;
 102                         $prev = $ver;
 103                 }
 104         }
 105 }
 106 print '</table>';
 107
 108 sub paddedver {
 109         # normalised version number comparable as string (cmp)
 110         shift =~ /^(\d*)(.*)/;
 111         return sprintf('%02d', $1) . $2;
 112 }
 113
 114 :>
 115 <hr>
 116
 117 <div class="legend">
 118         <table class="glyphs"><tr>
 119         <td class="X di-a">yes
 120         <td class="X di-d">almost
 121         <td class="X di-prop">plugin or js
 122         <td class="X di-b">no
 123         </table>
 124
 125         <div class="right">
 126                 <ul class="legend legend-set">
 127                 <li>default <strong>style</strong> is
 128                         <:= defined $get{style} && 'set to ' :><em><:= $style :></em>
 129                 </ul>
 130         </div>
 131 </div>
 132