-
Notifications
You must be signed in to change notification settings - Fork 791
Expand file tree
/
Copy pathOverview.bs
More file actions
398 lines (357 loc) · 13.3 KB
/
Overview.bs
File metadata and controls
398 lines (357 loc) · 13.3 KB
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
<h1>CSS Expressive Generalizations and Gadgetry Level 1</h1>
<pre class='metadata'>
Shortname: css-egg
Level: 1
Status: ED
Group: csswg
Date: 2015-04-01
TR: http://www.w3.org/TR/css-egg/
ED: http://dev.w3.org/csswg/css-egg/
Editor: Florian Rivoal, Invited Expert, http://florian.rivoal.net, florian@rivoal.net
Abstract: This module extends the vocabulary of CSS with terms frequently used in certain domains, making it easier for authors to write understandable and maintainable style sheets.
Link Defaults: css-values-3 (type) <time>
</pre>
<style type="text/css">
body {
background: -o-double-rainbow(center), url("https://www.w3.org/StyleSheets/TR/logo-[STATUS]") top left no-repeat;
background: double-rainbow(center), url("https://www.w3.org/StyleSheets/TR/logo-[STATUS]") top left no-repeat;
}
:any-link {
cursor: -o-double-rainbow(center), pointer;
cursor: double-rainbow(center), pointer;
}
</style>
<h2 id="intro">
Introduction</h2>
<em>This section is not normative.</em>
As evidenced by the extraordinary variety of designs found on the web,
CSS is a very expressive language,
capable of describing unlimited styles and layouts.
However, one of the design goal of CSS was also to make it
easy to learn and to read by people.
Making it simple for untrained authors to read and guess
the meaning of a style sheet after only a basic introduction to CSS
has contributed greatly to the success of the language.
In addition, easy-to-read style sheets are also easier to maintain.
In this spirit, this specification introduces a few new values and units,
which, while not bringing significant new capabilities to the web platform,
makes it possible to write style sheets that are easier to read than ever before,
by enabling authors to use values and units that are familiar
and appropriate for the domain they are working on.
<h3 id="interact">
Module Interactions</h3>
This module extends:
<ul>
<li>the data type definitions in [[!CSS3-VALUES]]
<li>the <<gradient>> definition in [[!CSS4-IMAGES]]
<li>the 'voice-rate' property in [[!CSS3SPEECH]]
</ul>
<h2 id="units">
Extended Units</h2>
CSS provides several <a spec="css-values-3">absolute length</a> units such as ''cm'' or ''in'',
as well as several <<time>> units such as ''s'' or ''ms''
They can all be converted between each other at fixed ratios, but are
nonetheless provided in recognition that it is most convenient for authors
to use units that they are most familiar with, or that some designs are
more naturally expressed in some units than others.
<h3 id="astro-units">
Astronomical units</h3>
This specification adds four <a spec="css-values-3">absolute length</a> units
which should be appreciated by authors
in fields such as astronomy and fundamental physics.
The new units are ''ls'', ''pc''
and their sub multiples ''pls'' and ''apc''.
They are defined as <a spec="css-values-3">physical units</a>.
<table class="data" export>
<thead>
<tr><th>unit
<th>name
<th>equivalence
<tbody>
<tr><th><dfn>apc</dfn>
<td>attoparsec
<td>1 ''apc'' = 3.086 ''cm''
<tr><th><dfn>pls</dfn>
<td>picolightsecond
<td>1 ''pls'' = 1.133 ''px''
<tr><th><dfn>ls</dfn>
<td>lightsecond
<td>1 ''ls'' = 10<sup>12</sup> ''pls''
<tr><th><dfn>pc</dfn>
<td>parsec
<td>1 ''pc'' = 10<sup>18</sup> ''apc''
</table>
Note: Lightsecond was chosen instead of the more familiar lightyear
to make sure that layouts computed during leap years
would be unambiguously identical
to those computed during non-leap years.
Note: This specification does not address relativistic effects
of scrolling or animations and transitions
at (or beyond) the speed of light.
<div class="example" id="celestial-css">
When writing a page representing the inner solar system at scale, the following markup and style could be used.
<pre><code class="lang-markup">
<div id=space>
<div class=celestial-body id=sun data-color=yellow
data-radius=2.3ls>
<div class=celestial-body id=mercury data-color=lightgray
data-radius=0.0081ls data-semimajor-axis=193ls data-orbital-period=6.278ftn></div>
<div class=celestial-body id=venus data-color=#FFD881
data-radius=0.020ls data-semimajor-axis=361ls data-orbital-period=16.05ftn></div>
<div class=celestial-body id=earth data-color=blue
data-radius=0.021ls data-semimajor-axis=499ls data-orbital-period=26.09ftn>
<div class=celestial-body id=moon data-color=#E0E0E0
data-radius=0.0057ls data-semimajor-axis=1.28ls data-orbital-period=2.109ftn></div>
</div>
<div class=celestial-body id=mars data-color=#AD674D
data-radius=0.011ls data-semimajor-axis=760ls data-orbital-period=49.07ftn></div>
</div></div>
<style></code><code class="lang-css">
#space {
background:black;
overflow:hidden;
position: relative;
}
.celestial-body {
position:absolute;
left: 50%; top: 50%;
border-radius: 50%;
border-style:solid attr(data-radius length, 0) attr(data-color color, white);
margin: calc(-1 * attr(data-radius length, 0));
transform-origin: attr(data-radius length, 0)
calc(attr(data-radius length, 0) + attr(data-semimajor-axis length, 0));
animation: orbit linear infinite attr(data-orbital-period time, 0);
}
@keyframes orbit {
from { transform: translateY(calc(attr(data-semimajor-axis length, 0) * -1)) rotate(0); }
to { transform: translateY(calc(attr(data-semimajor-axis length, 0) * -1)) rotate(-360deg); }
}</code><code class="lang-markup">
</style></code>
</pre>
The following is a disappointingly small sample rendering (not at scale)
of what this would look like.
With the new units and more space than this specification can offer,
this would instead be overwhelmingly awesome.
<style>
/**
This would be nicer using attr() or custom properties,
but there's not enough support in browsers to make a good demo with them.
The proportions to make this fit in the spec are as follow:
1px = 1ls
1s = 10 days
sun radius x 2
planets & moon radius x 100
planetary orbits x 0.25
moon orbit x 5
All are rounded up to the closest integer pixel,
because otherwise it doesn't work right in some browsers.
*/
#sun {
border-width: 5px;
margin: -5px;
border-color: yellow;
top: 50%;
box-shadow: yellow 0 0 10px, yellow 0 0 20px, yellow 0 0 30px;
/* The box shadow size has no other justification than making the sun look good. */
}
#mercury {
border-width: 1px;
margin: -1px;
top: -49px;
transform-origin: 1px 50px;
-webkit-transform-origin: 1px 50px;
animation-duration: 8.797s;
-webkit-animation-duration: 8.797s;
border-color: lightgray;
}
#venus {
border-width: 2px;
margin: -2px;
top: -90px;
transform-origin: 2px 92px;
-webkit-transform-origin: 2px 92px;
animation-duration: 22.47s;
-webkit-animation-duration: 22.47s;
border-color: #FFD881;
}
#earth {
border-width: 2px;
margin: -2px;
top: -125px;
transform-origin: 2px 127px;
-webkit-transform-origin: 2px 127px;
animation-duration: 36.53s;
-webkit-animation-duration: 36.53s;
border-color: blue;
}
#moon {
border-width: 1px;
margin: -1px;
top: -6px;
transform-origin: 1px 7px;
-webkit-transform-origin: 1px 7px;
animation-duration: 2.953s;
-webkit-animation-duration: 2.953s;
border-color: #E0E0E0;
}
#mars {
border-width: 1px;
margin: -1px;
top: -190px;
transform-origin: 1px 191px;
-webkit-transform-origin: 1px 191px;
animation-duration: 68.7s;
-webkit-animation-duration: 68.7s;
border-color:#AD674D;
}
#space {
height:400px;
background:black;
overflow:hidden;
position: relative;
}
.celestial-body {
left: 50%;
position:absolute;
border-style:solid;
border-radius: 50%;
animation: orbit linear infinite;
-webkit-animation: orbit linear infinite;
}
@keyframes orbit {
from { transform: rotate(0); }
to { transform: rotate(-360deg); }
}
@-webkit-keyframes orbit {
from { -webkit-transform: rotate(0); }
to { -webkit-transform: rotate(-360deg); }
}
</style>
<div id=space>
<div class=celestial-body id=sun>
<div class=celestial-body id=mercury></div>
<div class=celestial-body id=venus></div>
<div class=celestial-body id=earth>
<div class=celestial-body id=moon></div>
</div>
<div class=celestial-body id=mars></div>
</div>
</div>
</div>
<h3 id="traditional-time">
Traditional time units
</h3>
While the ''s'' and ''ms'' units defined in [[CSS3-VALUES]]
are appropriate for very short durations,
their use to express longer time spans is inadequate.
Moreover, authors may sometimes wish to use less dry terminology
and prefer more expressive and vivid language. This specification
therefore introduces three two <<time>> units:
''ftn'' and its subdivision ''mftn''.
<table class="data" export>
<thead>
<tr><th>unit
<th>name
<th>equivalence
<tbody>
<tr><th><dfn>ftn</dfn>
<td>Fortnight
<td>1 ''ftn'' = 1209600 ''s''
<tr><th><dfn>mftn</dfn>
<td>Millifortnight
<td>1 ''ftn'' = 1000 ''mftn''
</table>
<h3 id=speech>
Speech rate</h3>
This specification introduces an new <a spec="css-values">dimension</a>,
together with a new unit to be used with this dimension.
The <dfn id="speech-rate-value"><<speech-rate>></dfn> described the speed at which a text is read aloud.
It can be expressed using the ''tmbl'' unit, as defined below.
<table class="data" export>
<thead>
<tr><th>unit
<th>name
<th>definition
<tbody>
<tr><th><dfn>tmbl</dfn>
<td>Timble
<td>This is the rate of speech of Sir Tim Berners-Lee
when delivering a speech.
</table>
Note: Authors are advised to be cautious when using this unit,
as it can easily lead to rates of speech that are too high
for the listener to follow.
''1tmbl'' is generally considered to be about
the maximum rate a listener without special training can sustainably understand
while paying close attention.
Consider reducing the speed when the audience is distracted, tired,
or comprises many non-native speakers.
These factors are cumulative.
For dictation or during meetings for which live minutes are taken,
a rate of 0.3tmbl is more appropriate.
Issue: For languages other than English, should ''1tmbl'' be defined as
the same number of words per minute as ''1tmbl'' in English?
This seems problematic as we do not have a precise definition for <em>word</em>,
and because average word length can vary significantly per language.
Alternatively, defining ''1tmbl'' as
the speed at which Tim Berners-Lee speaks in that language
is also problematic,
given that there are languages that he does not speak at all.
<h4 id="voice-rate-ext">
Extension to the 'voice-rate' property</h4>
This specification extends the 'voice-rate' property, so that the ''tmbl'' unit can be used.
<pre class="propdef partial" noexport>
Name: voice-rate
New Values: [normal | x-slow | slow | medium | fast | x-fast | <<speech-rate>>] || <percentage>
</pre>
<h2 id="rainbow">
Double Rainbow</h2>
<<gradient>> allows sophisticated visual effects,
but they are tedious to write, review and maintain
as non trivial gradients cannot easily be visualised by merely reading the source.
This specification introduces a new syntax to describe a particular kind of <<radial-gradient()>>: double rainbows.
This spectacular visual effect which would improve most web pages
is currently underused due to the difficulty of specifying it correctly.
The <<gradient>> syntax is extended to accept <<double-rainbow()>> in addition to the other values defined in [[!CSS4-IMAGES]]
<pre>
<dfn>double-rainbow()</dfn> = double-rainbow(
<<position>> [, [ <<extent>> | <<length>> | <<percentage>>]]?
)
<dfn noexport><<extent>></dfn> = ''closest-corner'' | ''closest-side'' | ''farthest-corner'' | ''farthest-side''
</pre>
<<length>> or <<percentage>> gives the radius of the outermost circle of the double rainbow explicitly.
Percentages values are relative to the corresponding dimension of the gradient box.
Negative values are invalid.
If the second argument is omitted, the default value is ''farthest-side''.
<div class="example" id="rainbow-unicorn">
This feature was initially introduced by Opera Software.
The following page, when viewed in Opera (between version 11.60 and 12.16),
demonstrates tasteful use of double rainbows:
<a href="http://media.opera.com/media/press/2011/unicorn/">http://media.opera.com/media/press/2011/unicorn/</a>
By combining ''double-rainbow()'' with <a href="https://fetch.spec.whatwg.org/#unicorn">about:unicorn</a> [[FETCH]],
modern web standards can be used to achieve a similar effect.
<pre><code class="lang-markup">
<img src="about:unicorn"
style="background: double-rainbow(bottom, closest-corner)">
</code></pre>
<img class=fabulous src="./unicorn.svg">
<style>
.fabulous {
background: radial-gradient(closest-corner circle at bottom, transparent, rgba(250, 250, 210, 0.251) 63%, rgba(148, 0, 211, 0.251), rgba(0, 0, 128, 0.251), rgba(0, 0, 255, 0.251), rgba(0, 128, 0, 0.251), rgba(255, 255, 0, 0.251), rgba(255, 165, 0, 0.251), rgba(255, 0, 0, 0.251), transparent 67%, transparent 90%, rgba(255, 0, 0, 0.126), rgba(255, 165, 0, 0.126), rgba(255, 255, 0, 0.126), rgba(0, 128, 0, 0.126), rgba(0, 0, 255, 0.126), rgba(0, 0, 128, 0.126), rgba(148, 0, 211, 0.126), transparent 100%);
max-width: 500px;
display:block;
margin-left: auto;
margin-right: auto;
}
</style>
</div>
<h2 class=no-num id="acknowledgments">
Acknowledgments</h2>
Thanks especially to the following people for their ideas, feedback, and experimental implementations (in alphabetical order by first name):
Anne van Kesteren,
Bruce Lawson,
Chris Mills,
Daniel Glazman,
Leif Arne Storset,
Paul Verbeek,
Peter Linss.