if ($self->{digraph}) {
if (defined $mnem) {
push @class, $class =~ /\bXz\b/ ? ('l2', 'u-prop') # unofficial
- : ('l4', 'u-di'); # standard digraph
+ : ('l3', 'u-di'); # standard digraph
}
}
else {
my $codepoint = ord(substr $input, 0, 1);
if ($codepoint <= 0xFF) {
- push @class, 'l4', 'u-lat1'; # latin1
+ push @class, 'l3', 'u-lat1'; # latin1
}
elsif ($codepoint <= 0xD7FF) {
push @class, 'l2', 'u-bmp'; # bmp
}
if ($input =~ /[ -~]/) {
- push @class, 'l5', 'u-ascii'; # ascii
+ push @class, 'l4', 'u-ascii'; # ascii
}
else {
- push @class, 'l0'; # basic unicode
+ push @class, 'l1'; # basic unicode
}
}
.ccmap .Xr {opacity:.4}
/* support levels */
-.l0 {background: #FDD} /* no, unsupported, other */
+.l1 {background: #FDD} /* no, unsupported, other */
.l2 {background: #FED} /* partial, restricted, unofficial */
/* default u-prop, u-bmp */
-.l4 {background: #FFD} /* almost, imperfect, common */
+.l3 {background: #FFD} /* almost, imperfect, common */
/* default u-di, u-lat1 */
-.l5 {background: #EFD} /* yes, supported, ubiquitous, native */
+.l4 {background: #EFD} /* yes, supported, ubiquitous, native */
/* default u-ascii */
-.l6 {background: #DFD} /* complete, perfect */
-.l9 {background: #EEE} /* unknown, omitted */
+.l5 {background: #DFD} /* complete, perfect */
+.l0 {background: #EEE} /* unknown, omitted */
.ex {background: #EEE} /* experimental, disfavoured */
.u-invalid {background: #BBB} /* invalid, impossible */
.Xa:hover {outline: 1px solid #0F0} /* ascii */
.Xl:hover {outline: 1px solid #0C0} /* latin1 */
.Xz:hover {outline: 1px solid #F00} /* proposed */
-.l0:hover {background: #F88}
+.l1:hover {background: #F88}
.l2:hover {background: #FC8}
-.l4:hover {background: #FF8}
-.l5:hover {background: #CF8}
-.l6:hover {background: #8F8}
+.l3:hover {background: #FF8}
+.l4:hover {background: #CF8}
+.l5:hover {background: #8F8}
.ex:hover {background: #BBB}
/* key type colorization */
my $caniuse = do 'browser-support.inc.pl' or die $! || $@;
my %CSTATS = (
- 'n' => 'l0',
- 'y' => 'l6',
- 'y x' => 'l5',
- 'a' => 'l4',
- 'a x' => 'l4',
+ 'n' => 'l1',
+ 'y' => 'l5',
+ 'y x' => 'l4',
+ 'a' => 'l3',
+ 'a x' => 'l3',
'p j' => 'l2',
'j' => 'l2',
'p' => 'l2',
- 'u' => 'l9',
+ 'u' => 'l0',
);
my %CSTATUS = (
- unoff => 'l0', # unofficial
- wd => 'l4', # draft
- cr => 'l5', # candidate
- pr => 'l5', # proposed
- rec => 'l6', # recommendation
- other => 'l6', # non-w3
- ietf => 'l6', # standard
+ unoff => 'l1', # unofficial
+ wd => 'l3', # draft
+ cr => 'l4', # candidate
+ pr => 'l4', # proposed
+ rec => 'l5', # recommendation
+ other => 'l5', # non-w3
+ ietf => 'l5', # standard
);
my %versions;
if (my ($somerow) = values %{ $caniuse->{data} }) {
<div class="legend">
<table class="glyphs"><tr>
- <td class="X l6">supported
- <td class="X l5">prefixed
- <td class="X l4">partial
+ <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 l0">missing
- <td class="X l9">unknown
+ <td class="X l1">missing
+ <td class="X l0">unknown
</table>
<div>
@import url(base.css);
@import url(terse.css) all and (max-width: 80em);
-.l0 {background: #F77}
-.l0:hover { color: #F77; background: #000}
+.l1 {background: #F77}
+.l1:hover { color: #F77; background: #000}
.l2 {background: #FC6}
.l2:hover { color: #FC6; background: #000}
-.l4 {background: #FF6}
-.l4:hover { color: #FF6; background: #000}
-.l5 {background: #CF8}
-.l5:hover { color: #CF8; background: #000}
-.l6 {background: #8F8}
-.l6:hover { color: #8F8; background: #000}
+.l3 {background: #FF6}
+.l3:hover { color: #FF6; background: #000}
+.l4 {background: #CF8}
+.l4:hover { color: #CF8; background: #000}
+.l5 {background: #8F8}
+.l5:hover { color: #8F8; background: #000}
.ex { color: #D00}
.p:hover::after {color: #F00}
.Co {background: #322} /* private */
/* implementation-based alternatives */
-.l0 {background: #411} /* bmp */
+.l1 {background: #411} /* bmp */
.l2 {background: #321} /* proposed digraph */
-.l4 {background: #330} /* rfc-1345 digraph */
-.l5 {background: #030} /* ascii */
-.l6 {background: #00331D} /* ascii */
-.l9 {background: #222}
+.l3 {background: #330} /* rfc-1345 digraph */
+.l4 {background: #030} /* ascii */
+.l5 {background: #00331D} /* ascii */
+.l0 {background: #222}
.ex {background: #222} /* disfavoured */
.u-invalid {background: #333} /* impossible */
.me, .c-aa .g8 {background: #102}
.mv, .c-oc .g7 {background: #012}
-.mo, .c-as, .g6 .l0 {background: #200}
+.mo, .c-as, .g6 .l1 {background: #200}
.mi .g5 {}
.cp, .c-eu, .g4 .l2 {background: #221400}
-.co, .c-af, .g3 .l4 {background: #1C1C00}
+.co, .c-af, .g3 .l3 {background: #1C1C00}
.po .g2 {}
-.pm, .c-na, .g1 .l5 {background: #002200}
+.pm, .c-na, .g1 .l4 {background: #002200}
.ci, .c-sa .g0 {background: #001A1A}
.no {}
.ex {background: #181818}
td,
.X {background: #EEE}
-.l9 a, .l9 a:visited,
-.l9 {background: #BBB; color: #FFF; text-shadow: 0 0 4px #000}
.l0 a, .l0 a:visited,
-.l0 {background: #000; color: #FFF}
+.l0 {background: #BBB; color: #FFF; text-shadow: 0 0 4px #000}
+.l1 a, .l1 a:visited,
+.l1 {background: #000; color: #FFF}
.l2 a, .l2 a:visited,
.l2 {background: #444; color: #FFF}
-.l4 {background: #AAA; color: #000}
-.l5 {background: #DDD; color: #000}
-.l6 {background: #EEE; color: #000}
+.l3 {background: #AAA; color: #000}
+.l4 {background: #DDD; color: #000}
+.l5 {background: #EEE; color: #000}
.ex a, .ex a:visited,
.ex {color: #888}
.p0:not(.p) {color: #888; opacity: 1}
-.p0:not(.p).l9 {color: #DDD}
+.p0:not(.p).l0 {color: #DDD}
.p::after {color: #444}
-.l9.p::after,
+.l0.p::after,
.l2.p::after,
-.l0.p::after {color: #CCC}
+.l1.p::after {color: #CCC}
.p::after {content: '‼'}
.p1.p::after,
.p0.p::after {content: '!'}
color: #FF0;
} /* mode link */
-.l0,
+.l1,
.X { /* unidentified */
background: #000;
border-color: #800;
}
/* implementation-based alternatives */
-.l0 {background: #000; color: #DD6}
-.l4 {background: #000; color: #CCC}
+.l1 {background: #000; color: #DD6}
+.l3 {background: #000; color: #CCC}
.l2 {background: #000; color: #CA8}
-.l5 {background: #000; color: #8BC}
+.l4 {background: #000; color: #8BC}
.ex {background: #333}
.u-invalid {background: #200} /* impossible */
.c-oc {background: #100; color: #8BC}
.c-sa {background: #100; color: #DD6}
.c-na {background: #300; color: #DD6}
-.l0:hover,
+.l1:hover,
.X:hover {background: #800; color: #FF0}
/* code syntax */
<div class="legend">
<table class="glyphs"><tr>
- <td class="X l5">ascii
- <td class="X l4"><:= $glyphs->{digraph} ? 'digraph' : 'latin1' :>
+ <td class="X l4">ascii
+ <td class="X l3"><:= $glyphs->{digraph} ? 'digraph' : 'latin1' :>
<td class="X l2"><:= $glyphs->{digraph} ? 'proposed' : 'BMP' :>
- <td class="X l0">other unicode
+ <td class="X l1">other unicode
<td class="X l2 ex">discouraged
</table>
</div>