description =>
"caniuse.",
keywords => [qw'html css browser feature'],
- stylesheet => [qw'light dark circus mono red'],
+ stylesheet => [qw'circus dark mono red'],
data => ['browser-support.inc.pl'],
});
my $caniuse = do 'browser-support.inc.pl' or die $! || $@;
my %CSTATS = (
- n => 'di-b',
- y => 'di-aa',
- a => 'di-d',
- 'a x' => 'di-d',
- j => 'di-prop',
- p => 'di-prop',
- 'p j' => 'di-prop',
- 'y x' => 'di-a',
+ 'n' => 'l0',
+ 'y' => 'l6',
+ 'y x' => 'l5',
+ 'a' => 'l4',
+ 'a x' => 'l4',
+ 'p j' => 'l2',
+ 'j' => 'l2',
+ 'p' => 'l2',
+ 'u' => 'ex',
);
my %CSTATUS = (
- unoff => 'di-rare', # unofficial
- wd => 'di-b', # draft
- pr => 'di-prop', # proposed
- cr => 'di-d', # candidate
- rec => 'di-a', # recommendation
- ietf => 'di-aa', # standard
+ unoff => 'ex', # unofficial
+ wd => 'l0', # draft
+ pr => 'l2', # proposed
+ cr => 'l4', # candidate
+ rec => 'l5', # recommendation
+ ietf => 'l6', # standard
);
my @browsers = qw(trident gecko webkit_saf webkit_chr presto);
my %versions;
my $usage = sum(map { $canihas->{$browser}->{$_} } @span);
printf '<td class="%s" colspan="%d" title="%.1f%%">%s',
join(' ',
- $CSTATS{ $data->{$browser}->{$prev} },
+ X => $CSTATS{ $data->{$browser}->{$prev} },
sprintf('opacity%.0f', $usage / $scorediv),
),
scalar @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>
<hr>
<div class="legend">
<table class="glyphs"><tr>
- <td class="X di-aa">supported
- <td class="X di-a">prefixed
- <td class="X di-d">partial
- <td class="X di-prop">external (js/plugin)
- <td class="X di-b">missing
+ <td class="X l6">supported
+ <td class="X l5">prefixed
+ <td class="X l4">partial
+ <td class="X l2">external (js/plugin)
+ <td class="X l0">missing
</table>
<div class="right">