-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
153 lines (128 loc) · 10.6 KB
/
index.html
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html><html lang=en><head>
<meta charset=utf-8>
<meta content="width=device-width" name=viewport>
<title>WebSpec Example</title>
<link href=res/css/kraken.css rel=stylesheet>
<link href=res/img/icon.png rel="shortcut icon">
<script async src=res/js/kraken.js></script>
</head>
<body>
<header>
<a href=http://specs.webplatform.org/ id=logo>
<img alt="Web Platform Specs logo" height=50 src=res/img/logo.svg width=50><br>
<span>Web Platform Specs</span>
</a>
<h1>WebSpec Example</h1>
<div id=meta>
<button class="contributors linkalike" data-repository=webspecs/example-spec>contributors</button>•
<a href=https://github.com/webspecs/example-spec/issues>bugs</a>
•
<a href=https://github.com/webspecs/example-spec>⋔ me</a>
•
<a href=http://creativecommons.org/publicdomain/zero/1.0/ rel=license>CC0</a>
•
<span class=date>2014-10-16 (<a href=https://github.com/webspecs/example-spec/commits>commit log</a>)</span>
</div>
</header>
<h2 class="no-num no-toc no-ref heading settled" id=abstract><span class=content>Abstract</span></h2>
<div class=p-summary data-fill-with=abstract><p>This specification is meant to evolve into a permanent example of how a WebSpec is made. Before that, though, it is used primarily as a an area in which to develop this specification style.</p>
</div>
<h2 class="no-num no-toc no-ref heading settled" id=contents><span class=content>Table of Contents</span></h2>
<div data-fill-with=table-of-contents><ul class=toc><li><a href=#intro><span class=secno>1</span> <span class=content>
Introduction</span></a><ul class=toc><li><a href=#example><span class=secno>1.1</span> <span class=content>
Exemplify</span></a></ul><li><a href=#eldef><span class=secno>2</span> <span class=content>
Element Definitions</span></a><li><a href=#conformance><span class=secno></span> <span class=content>Conformance</span></a><li><a href=#references><span class=secno></span> <span class=content>References</span></a><ul class=toc><li><a href=#normative><span class=secno></span> <span class=content>Normative References</span></a></ul><li><a href=#index><span class=secno></span> <span class=content>Index</span></a><li><a href=#property-index><span class=secno></span> <span class=content>Property Index</span></a><li><a href=#issues-index><span class=secno></span> <span class=content>Issues Index</span></a><li><a href=#cc0><span class=secno></span> <span class=content>Copyright</span></a></ul></div>
<h2 class="heading settled" data-level=1 id=intro><span class=secno>1. </span><span class=content>
Introduction</span><a class=self-link href=#intro></a></h2>
<p>A lot can get in the way of writing a good specification. The formalism, while necessary, can
inhibit creativity and eat up precious time.</p>
<p>WebSpecs use a specific variant of Markdown called "Bikeshed" (after the famous
<a href=https://en.wikipedia.org/wiki/Parkinson%27s_law_of_triviality>Parkinson law of triviality</a>
which is commonly known as "bikeshedding" in the standards world). It does a lot of things for
you, allowing you to focus on the content. Adopting a common source format for all WebSpecs also
means that anyone who has contributed to one spec will immediately know how to help with another
— a situation rather different from the many fragmented tools currently in use for standards.</p>
<h3 class="heading settled" data-level=1.1 id=example><span class=secno>1.1. </span><span class=content>
Exemplify</span><a class=self-link href=#example></a></h3>
<div class=example>
Examples can be included at any time, and here we have a great specimen, even given its own
subsection.
<pre>#webspecs { will-change: all; }</pre>
</div>
<h2 class="heading settled" data-level=2 id=eldef><span class=secno>2. </span><span class=content>
Element Definitions</span><a class=self-link href=#eldef></a></h2>
<p>We currently have the following used to define CSS properties. We want the same for elements and
any number of other common aspects.</p>
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-will-change>will-change<a class=self-link href=#propdef-will-change></a></dfn><tr><th>Value:<td class=prod>auto <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-will-change-1/#typedef-animateable-feature title="<animateable-feature>"><animateable-feature></a><a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-comma title=#>#</a><tr><th>Initial:<td>auto<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>no<tr><th>Media:<td>all<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class=note>
This includes generating the right <code>dfn</code> elements, table of elements, etc.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class=issue id=issue-ad9f40a2><a class=self-link href=#issue-ad9f40a2></a>
This is a really serious problem that demands our immediate attention.
This is a really serious problem that demands our immediate attention.
This is a really serious problem that demands our immediate attention.
This is a really serious problem that demands our immediate attention.
This is a really serious problem that demands our immediate attention.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h2 class="no-ref no-num heading settled" id=conformance><span class=content>Conformance</span><a class=self-link href=#conformance></a></h2>
<p>
Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119
terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be
interpreted as described in RFC 2119. <a data-biblio-type=normative data-link-type=biblio href=#biblio-rfc2119 title=RFC2119>[RFC2119]</a>
</p>
<p>
All of the text of this specification is normative except sections explicitly marked as
non-normative, examples, and notes.
</p>
<p>
Examples in this specification are introduced with the words “for example” or are set apart from
the normative text with <code>class="example"</code>, like this:
</p>
<div class=example>
This is an example of an informative example.
</div>
<p>
Informative notes begin with the word “Note” and are set apart from the normative text with
<code>class="note"</code>, like this:
</p>
<p class=note>
Note, this is an informative note.
</p>
<div data-fill-with=references><h2 class="no-num heading settled" id=references><span class=content>References</span><a class=self-link href=#references></a></h2><h3 class="no-num heading settled" id=normative><span class=content>Normative References</span><a class=self-link href=#normative></a></h3><dl><dt id=biblio-rfc2119 title=rfc2119><a class=self-link href=#biblio-rfc2119></a>[rfc2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dl></div>
<div data-fill-with=index><h2 class="no-num heading settled" id=index><span class=content>Index</span><a class=self-link href=#index></a></h2><ul class=indexlist><li>will-change, <a href=#propdef-will-change title="section 2">2</a></ul></div>
<div data-fill-with=property-index><h2 class="no-num heading settled" id=property-index><span class=content>Property Index</span><a class=self-link href=#property-index></a></h2><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Computed value<tbody><tr><th scope=row><a class=css data-link-type=property href=#propdef-will-change title=will-change>will-change</a><td>auto | <animateable-feature>#<td>auto<td>all elements<td>no<td>n/a<td>all<td>specified value</table></div>
<div data-fill-with=issues-index><h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style=counter-reset:issue><div class=issue>
This is a really serious problem that demands our immediate attention.
This is a really serious problem that demands our immediate attention.
This is a really serious problem that demands our immediate attention.
This is a really serious problem that demands our immediate attention.
This is a really serious problem that demands our immediate attention.
<a href=#issue-ad9f40a2> ↵ </a></div></div></div>
<h2 class="no-ref no-num heading settled" id=cc0><span class=content>Copyright</span><a class=self-link href=#cc0></a></h2>
<p>
The contributors to this specification have waived all copyright and related or neighbouring
rights to this work worldwide under copyright law, including all related and neighbouring rights,
to the extent allowed by law.
</p>