.ex {background: #EEE} /* experimental, disfavoured */
.u-invalid {background: #BBB} /* invalid, impossible */
+.p0 {opacity: .5}
+.p0.p {opacity: 1}
+.p::after {content: '!'; color: #F00}
+.p4::after {color: #C00}
+.p3::after {color: #A00}
+.p2::after {color: #800}
+.p1::after,
+.p0::after {color: #000}
+.p09::after {opacity: .9}
+.p08::after {opacity: .8}
+.p07::after {opacity: .7}
+.p06::after {opacity: .6}
+.p05::after {opacity: .5}
+.p04::after {opacity: .4}
+.p03::after {opacity: .3}
+.p02::after {opacity: .2}
+.p01::after {opacity: .1}
+.p00::after {display: none}
+
/* code syntax */
.sy-comment { color: #888 }
.sy-constant { color: #008 }
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'],
});
}
:>
-<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>
<hr>
<div class="legend">
.l6:hover { color: #8F8; background: #000}
.ex { color: #D00}
+.p:hover::after {color: #F00}
+
.Co {background: #DBB} /* private */
.c-sa,
.ci,
.ex {background: #222} /* disfavoured */
.u-invalid {background: #333} /* impossible */
+.p4::after {color: #F44}
+.p3::after {color: #E66}
+.p2::after {color: #C88}
+.p1::after,
+.p0::after {color: #CCC}
+
/* general colorization */
.c-sa,
.ex a, .ex a:visited,
.ex {color: #888}
+.p0:not(.p) {color: #888; opacity: 1}
+.p0:not(.p).l9 {color: #DDD}
+ .p::after {color: #444}
+.l9.p::after,
+.l2.p::after,
+.l0.p::after {color: #CCC}
+ .p::after {content: '‼'}
+.p1.p::after,
+.p0.p::after {content: '!'}
+
.pm, .g1 {background: #FFF} /* motion */
.po, .g2 {background: #DDD} /* window */
.co, .g3 {background: #AAA} /* command */