browser: prefixed support styled as disfavoured .ex

[sheet.git] / browser.plp

diff --git a/browser.plp b/browser.plp
index c340160833f3875e6536b014012af927124dc974..2acb027ab34ba008f63a36a215094170c32f9be3 100644 (file)
--- a/browser.plp
+++ b/browser.plp
@@ -46,9 +46,9 @@ my $caniuse = do 'browser-support.inc.pl' or die $! || $@;
 my %CSTATS = (
        'n'   => 'l1',
        'y'   => 'l5',
-       'y x' => 'l4',
+       'y x' => 'l5 ex',
        'a'   => 'l3',
-       'a x' => 'l3',
+       'a x' => 'l3 ex',
        'p j' => 'l2',
        'j'   => 'l2',
        'p'   => 'l2',
@@ -183,7 +183,7 @@ for my $id (sort {
        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) {
@@ -245,14 +245,14 @@ sub showversions {
 <div class="legend">
        <table class="glyphs"><tr>
        <td class="X l5">supported
-       <td class="X l4">prefixed
        <td class="X l3">partial
        <td class="X l2">external (js/plugin)
        <td class="X l1">missing
        <td class="X l0">unknown
+       <td class="X l0 ex">prefixed
        </table>
 
-       <div>
+       <p><: if ($usage) { :>
                Usage percentage:
                <span class="  p0">0</span> -
                <span class="p p0 p00">.01</span> -
@@ -260,7 +260,14 @@ sub showversions {
                <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">