blob: a0814b39fd9a8907550a19e38facc3a49084d82b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
<!doctype html>
<html>
<head>
<title>Progressive Enhancement Class</title>
<style>
body {
font-family: sans-serif;
margin: auto;
max-width: 50em;
line-height: 1.4;
}
main {
margin: 2em;
}
dt {
margin-top: 0.5em;
font-weight: bold;
}
table, td {
margin: auto;
text-align: center;
}
td {
padding: 0.3em;
}
footer {
text-align: center;
margin-top: 2em;
clear: both;
}
</style>
</head>
<body>
<main>
<h1>Progressive Enhancement Class</h1>
<p>
Authors of HTML pages often assume JavaScript is supported and enabled in
the browser. While this is usually the case, there are situations in which
the client doesn't support or cannot enable it. When JavaScript is not
available the functionality that remains compared with the reference page
(with JS enabled) can be classified in the following classes:
</p>
<dl>
<dt>Class A</dt>
<dd>
All the essential and non-essential functionality works well.
It maintains a high degree of similarity with the reference page.
</dd>
<dt>Class B</dt>
<dd>
The important functionality works well, but some non-essential
functionality doesn't work.
There may be minor changes of similarity with the reference page.
</dd>
<dt>Class C</dt>
<dd>
Some important functionality is not available.
There may be important changes in similarity with the reference page.
</dd>
<dt>Class D</dt>
<dd>
The page shows an error, is unusable or doesn't load any content.
</dd>
</dl>
<p>Authors may state their progressive enhancement class by displaying a badge
on the page. The following badges are available under the
<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 license</a>
(public domain).
<table>
<tr>
<th>Badge SVG</th>
<th>Badge PNG</th>
<th>Meaning</th>
</tr>
<tr>
<td><img src="class-A.svg"></td>
<td><img src="class-A.png"></td>
<td>All functionality works when JS is disabled.</td>
</tr>
<tr>
<td><img src="class-B.svg"></td>
<td><img src="class-B.png"></td>
<td>Non-essential functionality doesn't work.</td>
</tr>
<tr>
<td><img src="class-C.svg"></td>
<td><img src="class-C.png"></td>
<td>Important functionality doesn't work.</td>
</tr>
<tr>
<td><img src="class-D.svg"></td>
<td><img src="class-D.png"></td>
<td>Nothing works without JS enabled.</td>
</tr>
</table>
<p>
The badge images should have a clickable link to this page, so other users
can read the specification and understand what the badge means.</p>
</main>
<footer>
<a href="../index.html">← Home</a>
</footer>
</body>
</html>
|
