description =>
"caniuse.",
keywords => [qw'html css browser feature'],
- stylesheet => [qw'circus dark mono red'],
+ stylesheet => [qw'circus dark mono red light'],
data => ['browser-support.inc.pl'],
});
:>
<h1>Browser compatibility</h1>
-<p>Alternate view of Fyrd's <a href="http://caniuse.com/">when can I use...</a> page
-with <a href="http://stats.wikimedia.org/archive/squid_reports/">Wikimedia</a>
-browser usage statistics.</p>
+<p id="intro">Alternate view of Fyrd's <a href="http://caniuse.com/">when can I use...</a> page<:
+my ($canihas, $usage);
+given ($get{usage} // 'wm') {
+ when (!$_) {
+ # none
+ }
+ when (!/^\w+$/) {
+ printf "<p>Invalid browser usage data request: <em>%s</em>",
+ 'identifier must be alphanumeric name or <q>0</q>';
+ }
+ $canihas = do "browser-usage-$_.inc.pl" or do {
+ printf "<p>Browser usage data not found: <em>%s</em>", $! || $@;
+ break;
+ };
+ $usage = $_;
+ my $ref = $canihas->{-source} || 'unknown';
+ $ref = sprintf '<a href="%s">%s</a>', $_, $ref for $canihas->{-url} || ();
+ $ref .= " $_" for $canihas->{-date} || ();
+ print "\nwith $ref browser usage statistics";
+}
+:>.
+</p>
+<div id="browser">
<:
my $caniuse = do 'browser-support.inc.pl' or die $! || $@;
+$_->{verrelease} = {
+ # mark last two (future) versions as unreleased, ensure current isn't
+ map { $_->[-1] => 0, $_->[-2] => 0, $_->[-3] => undef } $_->{versions}
+} for values %{ $caniuse->{agents} };
my %CSTATS = (
- 'n' => 'l0',
- 'y' => 'l6',
- 'y x' => 'l5',
- 'a' => 'l4',
- 'a x' => 'l4',
+ 'n' => 'l1',
+ 'y' => 'l5',
+ 'y x' => 'l5 ex',
+ 'a' => 'l3',
+ 'a x' => 'l3 ex',
'p j' => 'l2',
'j' => 'l2',
'p' => 'l2',
- 'u' => 'l9',
+ 'p p' => 'l2',
+ 'u' => 'l0',
);
my %CSTATUS = (
- unoff => 'l0', # unofficial
- wd => 'l4', # draft
- cr => 'l5', # candidate
- pr => 'l5', # proposed
- rec => 'l6', # recommendation
- ietf => 'l6', # standard
+ unoff => 'l1', # unofficial
+ wd => 'l3', # draft
+ cr => 'l4', # candidate
+ pr => 'l4', # proposed
+ rec => 'l5', # recommendation
+ other => 'l2', # non-w3
+ ietf => 'l5', # standard
);
-my @browsers = qw(trident gecko webkit_saf webkit_chr presto);
my %versions;
if (my ($somerow) = values %{ $caniuse->{data} }) {
while (my ($browser, $row) = each %{ $somerow->{stats} }) {
$versions{$browser} = [ sort { paddedver($a) cmp paddedver($b) } keys %$row ];
}
}
+my @browsers = grep { $versions{$_} }
+ qw(trident gecko webkit_saf ios_saf webkit_chr android presto op_mob op_mini);
-my $canihas = do 'browser-usage.inc.pl' or do {
- printf "<p>Browser usage data not found: <em>%s</em>.</p>\n", $_
- for $! || $@;
-};
-my $scorediv = (max(map { sum(values %$_) } values %$canihas) // 1) / 100;
+$canihas ||= {
+ map {
+ $_ => +{
+ map {
+ my $zero = $#$_ - 2; # baseline index
+ ($_->[$zero - 2] => .5), # past
+ ($_->[$zero - 1] => 10 ), # previous
+ ($_->[$zero + 2] => 0 ), # future
+ ($_->[$zero + 1] => .5), # next
+ ($_->[$zero ] => 30 ), # current
+ } $caniuse->{agents}->{$_}->{versions}
+ }
+ } @browsers
+}; # fallback hash based on release semantics
+my $scorediv = (max(map { ref $_ eq 'HASH' && sum(values %$_) } values %$canihas) // 1) / 100;
print '<table class="mapped">';
print '<col>' x 3;
'<tr>',
'<th colspan="3">feature',
(map {
- sprintf('<th colspan="%d" title="%.1f%%">%s',
+ my $name = $caniuse->{agents}->{$_}->{browser};
+ sprintf('<th colspan="%d" title="%s">%s',
scalar @{ $versions{$_} },
- sum(values %{ $canihas->{$_} }),
+ join(' ',
+ sprintf('%.1f%%', sum(values %{ $canihas->{$_} })),
+ $name,
+ ),
do {
- my $name = $caniuse->{agents}->{$_}->{browser};
- length $name < 16 ? $name : $caniuse->{agents}->{$_}->{abbr};
+ length $name < 3 + @{ $versions{$_} }*2 ? $name
+ : $caniuse->{agents}->{$_}->{abbr};
},
)
} @browsers),
print "\n<tr>";
print '<td>' x 3;
for my $browser (@browsers) {
- printf('<td title="%.1f%%">%s',
- $canihas->{$browser}->{$_}, showversions($_),
+ printf('<td title="%.1f%%"%s>%s',
+ $canihas->{$browser}->{$_},
+ (map {
+ defined $_ && !$_ && ' class="ex"'
+ } $caniuse->{agents}->{$browser}->{verrelease}->{$_}),
+ showversions($_),
) for @{ $versions{$browser} };
}
print '<td>' x 1;
sub featurescore {
# relative amount of support for given feature
- state $statspts = { y=>10, 'y x'=>9, a=>5, 'a x'=>5, j=>2, 'p j'=>2, p=>1 };
+ state $statspts = { y=>10, 'y x'=>10, a=>5, 'a x'=>5, j=>2, 'p j'=>2, p=>1 };
my $rank = 0;
if (my $row = shift) {
if ($canihas) {
while (my ($browser, $versions) = each %$row) {
+ ref $versions eq 'HASH' or next;
while (my ($version, $_) = each %$versions) {
- $rank += $canihas->{$browser}->{$version} * $statspts->{$_};
+ $rank += ($canihas->{$browser}->{$version} || .001) * $statspts->{$_};
}
}
return $rank;
return $rank;
}
-for my $id (sort {
- featurescore($caniuse->{data}->{$b}->{stats})
- <=> featurescore($caniuse->{data}->{$a}->{stats})
-} keys %{ $caniuse->{data} }) {
+sub saytitlecol {
+ my ($id) = @_;
my $row = $caniuse->{data}->{$id};
- my $data = $row->{stats} or next; # skip metadata [summary]
- printf '<tr id="%s">', $id;
+
for ($row->{categories}) {
my $cell = $_ ? lc $_->[0] : '-';
print '<th>', $cell;
}
- printf '<td title="%s">%s', $row->{description}, $row->{title};
+
+ print '<td>', map {
+ sprintf('<a href="%s" onclick="%s">%s</a>',
+ "#$id",
+ sprintf("try { %s; return false } catch(err) { return true }",
+ "document.getElementById('$id').classList.toggle('target')",
+ ),
+ $_,
+ );
+ } $row->{title};
+ print '<div class=aside>';
+ s/\.?$/./, print "<p>$_</p>" for map { ref $_ ? @$_ : $_ || () }
+ $row->{description}, $row->{notes};
+ printf 'Resources: %s.', join(', ',
+ map { qq(<a href="$_->{url}">$_->{title}</a>) } @$_
+ ) for grep { @$_ } $row->{links} // ();
+ print '</div>';
+}
+
+sub saystatuscol {
+ my ($id) = @_;
+ my $row = $caniuse->{data}->{$id};
+
for ($row->{status}) {
my $cell = $_ // '-';
$cell = sprintf '<a href="%s">%s</a>', $_, $cell for $row->{spec} // ();
- printf '<td title="%s" class="%s">%s',
+ printf '<td title="%s" class="l %s">%s',
$caniuse->{statuses}->{$_}, $CSTATUS{$_} // '', $cell;
}
- for my $browser (@browsers) {
- my ($prev, @span);
- for my $ver (@{ $versions{$browser} }, undef) {
- unless (!defined $prev
- or $data->{$browser}->{$prev} ~~ $data->{$browser}->{$ver}) {
- my $usage = sum(map { $canihas->{$browser}->{$_} } @span);
- printf '<td class="%s" colspan="%d" title="%.1f%%">%s',
- join(' ',
- X => $CSTATS{ $data->{$browser}->{$prev} },
- !$usage ? ('p0') : ('p',
- sprintf('p%01d', $usage / 10),
- sprintf('p%02d', $usage),
- ),
- sprintf('pp%02d', $usage / $scorediv),
+}
+
+sub saybrowsercols {
+ my ($id, $browser) = @_;
+ my $data = $caniuse->{data}->{$id}->{stats}->{$browser};
+
+ my ($prev, @span);
+ for my $ver (@{ $versions{$browser} }, undef) {
+ unless (!defined $prev
+ or ref $data eq 'HASH' && $data->{$prev} ~~ $data->{$ver}) {
+ my $usage = sum(map { $canihas->{$browser}->{$_} } @span);
+ printf '<td class="%s" colspan="%d" title="%.1f%%">%s',
+ join(' ',
+ X => $CSTATS{ ref $data eq 'HASH' && $data->{$prev} || 'u' },
+ !$usage ? ('p0') : ('p',
+ sprintf('p%01d', $usage / 10),
+ sprintf('p%02d', $usage),
),
- scalar @span,
- $usage,
- showversions(@span),
- undef $prev;
- @span = ();
- }
- push @span, $ver;
- $prev = $ver;
+ sprintf('pp%02d', $usage / $scorediv),
+ ),
+ scalar @span,
+ $usage,
+ showversions(@span),
+ undef $prev;
+ @span = ();
}
+ push @span, $ver;
+ $prev = $ver;
}
+}
+
+sub sayusagecol {
+ my ($id) = @_;
state $maxscore = featurescore({ # yes for every possible version
map { $_ => { map {$_ => 'y'} @{$versions{$_}} } } keys %versions
});
print '<td>', int featurescore($caniuse->{data}->{$id}->{stats}) / $maxscore * 100;
}
+
+for my $id (sort {
+ featurescore($caniuse->{data}->{$b}->{stats})
+ <=> featurescore($caniuse->{data}->{$a}->{stats})
+} keys %{ $caniuse->{data} }) {
+ $caniuse->{data}->{$id}->{stats} or next; # skip metadata [summary]
+ printf '<tr id="%s">', $id;
+ saytitlecol($id);
+ saystatuscol($id);
+ saybrowsercols($id, $_) for @browsers;
+ sayusagecol($id);
+ say '</tr>';
+}
print '<tfoot>', $header;
print '</table>';
sub paddedver {
# normalised version number comparable as string (cmp)
shift =~ /^(\d*)(.*)/;
- return sprintf('%02d', $1) . $2;
+ return sprintf('%02d', $1 || 0) . $2;
}
sub showversions {
return join('‒', @span);
}
-:>
-<script>
-var classmatch = / p(\d{2})/;
-Array.forEach(document.getElementsByTagName('TD'), function(val) {
- var opacity;
- if (opacity = classmatch.exec(val.className)) {
- var c = document.defaultView.getComputedStyle(val, null).getPropertyValue('background-color');
- var o = opacity[1] / 100;
- val.style.backgroundColor = c.replace(/rgb\((.*)\)/, 'rgba($1, '+o+')');
- val.style.textShadow = c+' 1px 1px 2px, ' + c+' -1px -1px 2px';
- }
-});
-</script>
+:></div>
+
<hr>
<div class="legend">
<table class="glyphs"><tr>
- <td class="X l6">supported
- <td class="X l5">prefixed
- <td class="X l4">partial
+ <td class="X l5">supported
+ <td class="X l3">partial
<td class="X l2">external (js/plugin)
- <td class="X l0">missing
+ <td class="X l1">missing
+ <td class="X l0">unknown
+ <td class="X ex">prefixed
</table>
- <div>
+ <p><: if ($usage) { :>
Usage percentage:
<span class=" p0">0</span> -
<span class="p p0 p00">.01</span> -
<span class="p p1">10</span> -
<span class="p p2">20</span> -
<span class="p p5">majority</span>
- </div>
+<: } else { :>
+ <table class="glyphs"><tr>
+ <td class="p p1">previous version</td>
+ <td class="p p3">current</td>
+ <td class="p p0 p00">upcoming (within months)</td>
+ <td class=" p0">future (within a year)</td>
+ </table>
+<: } :> </p>
<div class="right">
<ul class="legend legend-set">
<li>default <strong>style</strong> is
<:= defined $get{style} && 'set to ' :><em><:= $style :></em>
+ <li><strong>usage</strong> source is
+ <:= !defined $get{usage} && 'default ' :><:= defined $usage ? "<em>$usage</em>" : 'not included (<em>0</em>)' :>
</ul>
</div>
</div>
+<script src="/searchlocal.js"></script>
+<script> prependsearch(document.getElementById('intro')) </script>
+
git.shiar.nl / sheet.git / blobdiff