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'],
});
with <a href="http://stats.wikimedia.org/archive/squid_reports/">Wikimedia</a>
browser usage statistics.</p>
+<div id="browser">
<:
my $caniuse = do 'browser-support.inc.pl' or die $! || $@;
'u' => 'l9',
);
my %CSTATUS = (
- unoff => 'l9', # unofficial
- wd => 'l0', # draft
- pr => 'l2', # proposed
- cr => 'l4', # candidate
- rec => 'l5', # recommendation
+ unoff => 'l0', # unofficial
+ wd => 'l4', # draft
+ cr => 'l5', # candidate
+ pr => 'l5', # proposed
+ rec => 'l6', # recommendation
ietf => 'l6', # standard
);
my @browsers = qw(trident gecko webkit_saf webkit_chr presto);
}
}
-my $canihas = do 'browser-usage.inc.pl' or do {
+my $canihas = do 'browser-usage.inc.pl' || do {
printf "<p>Browser usage data not found: <em>%s</em>.</p>\n", $_
for $! || $@;
+ +{
+ map {
+ $_ => +{
+ map {
+ ($_->[4] => 0 ), # future
+ ($_->[3] => .5), # next
+ ($_->[0] => 5 ), # past
+ ($_->[1] => 10 ), # previous
+ ($_->[2] => 30 ), # current
+ } $caniuse->{agents}->{$_}->{versions}
+ }
+ } @browsers
+ }; # fallback hash based on release semantics
};
my $scorediv = (max(map { sum(values %$_) } values %$canihas) // 1) / 100;
my $cell = $_ ? lc $_->[0] : '-';
print '<th>', $cell;
}
- printf '<td title="%s">%s', $row->{description}, $row->{title};
+ print '<td>', $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 $row->{links} // ();
+ print '</div>';
for ($row->{status}) {
my $cell = $_ // '-';
$cell = sprintf '<a href="%s">%s</a>', $_, $cell for $row->{spec} // ();
printf '<td class="%s" colspan="%d" title="%.1f%%">%s',
join(' ',
X => $CSTATS{ $data->{$browser}->{$prev} },
- sprintf('opacity%.0f', $usage / $scorediv),
+ !$usage ? ('p0') : ('p',
+ sprintf('p%01d', $usage / 10),
+ sprintf('p%02d', $usage),
+ ),
+ sprintf('pp%02d', $usage / $scorediv),
),
scalar @span,
$usage,
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 = /\bopacity(\d+)/;
-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';
- }
-});
-alert(t);
-</script>
+:></div>
+
<hr>
<div class="legend">
<td class="X l0">missing
</table>
+ <div>
+ Usage percentage:
+ <span class=" p0">0</span> -
+ <span class="p p0 p00">.01</span> -
+ <span class="p p0 p05">1-9</span> -
+ <span class="p p1">10</span> -
+ <span class="p p2">20</span> -
+ <span class="p p5">majority</span>
+ </div>
+
<div class="right">
<ul class="legend legend-set">
<li>default <strong>style</strong> is