padding: 0 0.2em;
}
+/* page-specific */
+
+#browser .aside {
+ font-size: 80%;
+ overflow: hidden;
+ height: 0;
+ -webkit-transition: all 1s ease-in;
+ -o-transition: all 1s ease-in;
+ -moz-transition: all 1s ease-in;
+ transition: height 1s ease-in;
+}
+#browser .aside p {
+ margin: 1ex 0;
+}
+#browser tr:hover .aside {
+ height: auto;
+ min-height: 5ex; /* browsers currently only transition to static values */
+}
+#browser td.X {
+ white-space: nowrap; /* some browsers break on dashes */
+}
+
/* printing hints */
@page {
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 $! || $@;
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} // ();
return join('‒', @span);
}
-:>
+:></div>
+
<hr>
<div class="legend">