diff options
Diffstat (limited to 'pec/index.html')
| -rw-r--r-- | pec/index.html | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/pec/index.html b/pec/index.html new file mode 100644 index 0000000..cce483c --- /dev/null +++ b/pec/index.html @@ -0,0 +1,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> |