-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
490 lines (448 loc) · 118 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
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
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 and CSS3</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/compiled/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/tm.css" type="text/css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="sliderrr.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/particle_canvas.js"></script>
<script>
window.onload = function() {
new Emitter($('particle_canvas_demo'));
Sliderrr.init();
}
</script>
</head>
<body>
<div class="slides">
<section>
<header>
<hgroup>
<h1>HTML5 and CSS3</h1>
<h2 class="code">with(<strong>json</strong>) { harwig }</h2>
</hgroup>
</header>
</section>
<section>
<q>You can start to use many parts of HTML5 <strong>today</strong>.</q>
<!-- If you haven't looked at it you're behind -->
</section>
<section class="related">
<h1>What is HTML5?</h1>
<h2 class="b0">depends on <strong>who</strong> you ask…</h2>
<ul class="b0">
<li>W3C, WhatWG, Media, Implementers, Developers...</li>
</ul>
<q class="b1">a collection of technologies <i>(html, css, js)</i> that make up the <strong>evolution of HTML.</strong></q><cite class="b1">me</cite>
</section>
<section>
<h1>Timeline</h1>
<ol class="timeline">
<!--<li>
<time datetime="1997-01-14">Jan 1997</time>
<div>
HTML 3.2
<small>W3C Recommendation</small>
<small class="presenter">blink and marquee omitted. Netscape would only abolish it if Microsoft agreed to get rid of MARQUEE; the deal was struck and both tags disappeared.</small>
</div>
</li>-->
<li>
<time datetime="1997-12-18">Dec 1997</time>
<div>
HTML4
</div>
</li>
<li>
<time datetime="2000-01-01">Jan 2000</time>
<div>
<a href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a>
</div>
</li>
<li>
<time datetime="2001-05-01">May 2001</time>
<div>
<a href="http://www.w3.org/TR/2001/REC-xhtml11-20010531/changes.html">XHTML 1.1</a>
</div>
</li>
<li>
<time datetime="2004-06-01">Jun 2004</time>
<div>
WhatWG <a href="http://www.whatwg.org/news/start">formed</a>
</div>
</li>
<li>
<time datetime="2005-09-01">Sep 2005</time>
<ul id="webapp_details" class="popover">
<li>Backwards compatibility</li>
<li>Well-defined <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html">error handling</a></li>
<li>Users should not be exposed to authoring errors</li>
<li>Practical use</li>
<li>Scripting is here to stay</li>
<li>Device-specific profiling should be avoided</li>
<li>Open Process</li>
</ul>
<div>
Web <strong>Applications</strong> 1.0 <a href="#" data:popover="webapp_details">Draft</a>
</div>
</li>
<li>
<time datetime="2006-10-27">Oct 2006</time>
<div>
W3C+WhatWG
</div>
</li>
<li>
<time datetime="2010-06-24">Jun 2010</time>
<div>
HTML5 WD
</div>
</li>
<li>
<time datetime="2012-06-24">Jun 2012</time>
<div>
HTML5 CR
</div>
</li>
<li>
<time datetime="2022-06-24">Jun 2022</time>
<div>
HTML5 PR
</div>
</li>
</ol>
</section>
<section class="related">
<h1>June 2022 ?!?!?</h1>
<q class="b0">The only people that really give a <strong>damn</strong> about two thousand twenty two are people who write timetables for a living.</q><cite class="b0"><a href="http://jeffcroft.com/blog/2008/sep/11/two-thousand-twenty-two/">Jeff Croft</a></cite>
</section>
<section style="width:600px">
<h1>But Wait!</h1>
<q>Despite the hype, the HTML5 specification <strong>isn't yet ready</strong> due to interoperability issues</q><cite><a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">Philippe Le Hegaret, W3C</a></cite>
<br>
<q class="b0 short">Thanks again W3C</q><cite class="b0 short"><a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">Dion Almaer</a></cite>
<br><br>
<q class="b1">HTML5 should not be considered as a whole. You should <strong>cherry pick</strong> the technology that suits the solution to your problem.</q><cite class="b1"><a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">Remy Sharp</a>, author Introducing HTML5</cite>
</section>
<section><h1>Doctype</h1>
<pre class="textmate-source mac_classic">
<span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_sgml meta_tag_sgml_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html"><!</span><span class="meta meta_tag meta_tag_sgml meta_tag_sgml_doctype meta_tag_sgml_doctype_html"><span class="entity entity_name entity_name_tag entity_name_tag_doctype entity_name_tag_doctype_html">DOCTYPE</span> html PUBLIC <span class="string string_quoted string_quoted_double string_quoted_double_doctype string_quoted_double_doctype_identifiers-and-DTDs string_quoted_double_doctype_identifiers-and-DTDs_html">"-//W3C//DTD XHTML 1.0 Strict//EN"</span>
<span class="string string_quoted string_quoted_double string_quoted_double_doctype string_quoted_double_doctype_identifiers-and-DTDs string_quoted_double_doctype_identifiers-and-DTDs_html">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">></span></span>
<span class="meta meta_tag meta_tag_structure meta_tag_structure_any meta_tag_structure_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_structure entity_name_tag_structure_any entity_name_tag_structure_any_html">html</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">xmlns</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>http://www.w3.org/1999/xhtml<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">xml:lang</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>en<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">lang</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>en<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">></span></span></span></pre>
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> -->
<br>
<pre class="textmate-source mac_classic b0">
<span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_sgml meta_tag_sgml_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html"><!</span><span class="meta meta_tag meta_tag_sgml meta_tag_sgml_doctype meta_tag_sgml_doctype_html"><span class="entity entity_name entity_name_tag entity_name_tag_doctype entity_name_tag_doctype_html">DOCTYPE</span> html</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">></span></span>
<span class="meta meta_tag meta_tag_structure meta_tag_structure_any meta_tag_structure_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_structure entity_name_tag_structure_any entity_name_tag_structure_any_html">html</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">lang</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>en<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">></span></span></span></pre>
<!-- <!DOCTYPE html>
<html lang="en"> -->
</section>
<section class="center">
<h1>New <strong>Structure</strong> Elements</h1>
<img src="images/structure.svg">
</section>
<section class="related">
<h1>A <strong>/</strong> V Club</h1>
<video src="videos/trailer_480p.mov" controls></video>
<pre class="textmate-source mac_classic b0"><span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_any meta_tag_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_html">video</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">src</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>videos/trailer_480p.mov<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">controls</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">><span class="meta meta_scope meta_scope_between-tag-pair meta_scope_between-tag-pair_html"><</span>/</span><span class="entity entity_name entity_name_tag entity_name_tag_html">video</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">></span></span></span></pre>
<p class="b0">H.264, Theora, VP8</p>
</section>
<section class="related">
<h1><strong>Semantic</strong> Elements</h1>
<pre class="textmate-source mac_classic"><span class='linenum'> 1</span> <span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_other meta_tag_other_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_other entity_name_tag_other_html">section</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 2</span> <span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">h1</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>Copying "Why I ♥ my iPad"<span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">h1</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 3</span> <span class="meta meta_tag meta_tag_other meta_tag_other_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_other entity_name_tag_other_html">details</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 4</span> <span class="meta meta_tag meta_tag_other meta_tag_other_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_other entity_name_tag_other_html">summary</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>Copying...
<span class='linenum'> 5</span> <span class="meta meta_tag meta_tag_any meta_tag_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_html">progress</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">max</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>375505392<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">value</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>97543282<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">><span class="meta meta_scope meta_scope_between-tag-pair meta_scope_between-tag-pair_html"><</span>/</span><span class="entity entity_name entity_name_tag entity_name_tag_html">progress</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">></span></span> 25%
<span class='linenum'> 6</span> <span class="meta meta_tag meta_tag_other meta_tag_other_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_other entity_name_tag_other_html">summary</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 7</span> <span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dl</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 8</span> <span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dt</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>Transfer rate:<span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dt</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 9</span> <span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dd</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>4KB/s<span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dd</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 10</span> <span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dt</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>Duration:<span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dt</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 11</span> <span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dd</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>06:12:27<span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dd</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 12</span> <span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dt</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>Rating:<span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dt</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 13</span> <span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dd</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span><span class="meta meta_tag meta_tag_other meta_tag_other_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_other entity_name_tag_other_html">meter</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">value</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>4<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">min</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>1<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">max</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>5<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>✭✭✭✭<span class="meta meta_tag meta_tag_other meta_tag_other_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_other entity_name_tag_other_html">meter</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span><span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dd</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 14</span> <span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">dl</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 15</span> <span class="meta meta_tag meta_tag_other meta_tag_other_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_other entity_name_tag_other_html">details</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 16</span> <span class="meta meta_tag meta_tag_other meta_tag_other_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_other entity_name_tag_other_html">section</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span></pre>
<!-- <section>
<h1>Copying "Why I ♥ my iPad"</h1>
<details>
<summary>Copying...
<progress max="375505392" value="97543282"></progress> 25%
</summary>
<dl>
<dt>Transfer rate:</dt>
<dd>4KB/s</dd>
<dt>Duration:</dt>
<dd>06:12:27</dd>
<dt>Rating:</dt>
<dd><meter value="4" min="1" max="5">✭✭✭✭</meter></dd>
</dl>
</details>
</section> -->
<ul class="columns4 bracketize b0">
<li><a href="http://www.w3.org/TR/html5/semantics.html#the-figure-element" title="4 The elements of HTML — HTML5">figure</a></li>
<li><a href="http://www.w3.org/TR/html5/semantics.html#the-figcaption-element" title="4 The elements of HTML — HTML5">figcaption</a></li>
<li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-mark-element" title="4.6 Text-level semantics — HTML5">mark</a></li>
<li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element" title="4.6 Text-level semantics — HTML5">time</a></li>
<li><a href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-wbr-element" title="4.6 Text-level semantics — HTML5">wbr</a></li>
<li><a href="http://www.w3.org/TR/html5/interactive-elements.html#the-command" title="4.11 Interactive elements — HTML5">command</a></li>
<li><a href="http://dev.w3.org/html5/spec/the-button-element.html#the-datalist-element" title="4.10.8 The button element — HTML5">datalist</a></li>
<li><a href="http://dev.w3.org/html5/spec/the-button-element.html#the-output-element" title="4.10.8 The button element — HTML5">output</a></li>
<li><a href="http://dev.w3.org/html5/spec/forms.html#the-keygen-element" title="4.10 Forms — HTML5">keygen</a></li>
</ul>
</section>
<section class="center related">
<h1><strong>Absent</strong> Elements</h1>
<ul class="columns2 bracketize">
<li>basefont</li>
<li>big</li>
<li>center</li>
<li>font</li>
<li>s</li>
<li>strike</li>
<li>tt</li>
<li>u</li>
<li>frame</li>
<li>frameset</li>
<li>acronym</li>
<li>applet</li>
</ul>
</section>
<section>
<h1><strong>Form</strong> Support</h1>
<form>
<pre class="textmate-source mac_classic"><span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">input</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">name</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>q<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">required</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span></span></pre>
<!-- <input name="q" required> -->
<pre class="textmate-source mac_classic"><span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">input</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">name</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>q<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">autofocus</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span></span></pre>
<!-- <input name="q" autofocus> -->
<pre class="textmate-source mac_classic"><span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">input</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">name</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>q<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">type</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>search<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">placeholder</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>Search...<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span></span></pre>
<input name="q" type="search" placeholder="Search..." autocomplete="false">
<pre class="textmate-source mac_classic b0"><span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">input</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">type</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>range<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">min</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>0<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">max</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>10<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">value</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>6<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span></span></pre>
<input class="b0" type="range" min="0" max="10" value="6">
<pre class="textmate-source mac_classic b1"><span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">input</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">type</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>number<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">min</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>0<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">max</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>10<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">step</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>2<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">value</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>6<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span></span></pre>
<input class="b1" type="number" min="0" max="10" step="2" value="6">
<form>
<h2 class="b2">other types</h2>
<ul class="columns4 b2">
<li>email</li>
<li>url</li>
<li>color</li>
<li>tel</li>
<li>date</li>
<li>month</li>
<li>week</li>
<li>time</li>
</ul>
</section>
<section>
<h1>JavaScript</h1>
<ul>
<li><strong id="particle_canvas_demo" options="{y_force:-1.9, max_particles: 150, respawn: 10, vel:[-2, 2], life:[0.02, .06]}" class="emitter">Canvas</strong></li>
<li class="b0"><a href="http://www.w3.org/TR/2010/WD-html5-20100624/Overview.html#dom-document-getelementsbyclassname">getElementsByClassName</a></li>
<li class="b1"><a href="http://www.w3.org/TR/2010/WD-html5-20100624/Overview.html#dnd">Drag and Drop</a></li>
<li class="b2"><a href="http://www.w3.org/TR/2010/WD-html5-20100624/Overview.html#dom-history-pushstate">pushState, replaceState, onhashchange</a></li>
<li class="b3"><a href="http://www.w3.org/TR/2010/WD-html5-20100624/Overview.html#application-cache">Offline Application Cache</a></li>
<li class="b4"><a href="http://www.w3.org/TR/2010/WD-html5-20100624/Overview.html#attr-data">Custom data attributes</a>
<pre class="textmate-source mac_classic"><span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">input</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">data-regex</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>\.com$<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span></span></pre>
<!-- <input data-regex="\.com$"> -->
<pre class="textmate-source mac_classic"><span class="source source_js">input<span class="meta meta_delimiter meta_delimiter_method meta_delimiter_method_period meta_delimiter_method_period_js">.</span>datasets<span class="meta meta_brace meta_brace_square meta_brace_square_js">[</span><span class="string string_quoted string_quoted_single string_quoted_single_js"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_js">'</span>regex<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_js">'</span></span><span class="meta meta_brace meta_brace_square meta_brace_square_js">]</span></span></pre>
<!-- input.datasets['regex'] -->
</li>
<li class="b5"><a href="http://www.w3.org/TR/2010/WD-html5-20100624/Overview.html#dom-navigator-registerprotocolhandler">registerProtocolHandler / registerContentHandler</a></li>
</ul>
</section>
<section class="related">
<h1>Related <strong>Spec</strong>ifications</h1>
<ul class="columns2">
<li><a href="http://dev.w3.org/geo/api/spec-source.html">Geolocation</a></li>
<li><a href="http://dev.w3.org/html5/postmsg/">Cross window messaging</a></li>
<li><a href="http://www.w3.org/TR/cors/">Cross Origin Resource Sharing</a></li>
<li><a href="http://www.w3.org/TR/IndexedDB/">WebSQL<small> (IndexedDB)</small></a></li>
<li><a href="http://www.w3.org/TR/webstorage/#the-localstorage-attribute">WebStorage</a><small> (local,session)</small></li>
<li><a href="http://www.w3.org/TR/workers/">WebWorkers</a></li>
<li><a href="http://dev.w3.org/html5/websockets/">WebSockets</a></li>
<li><a href="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html">WebGL</a></li>
</ul>
</section>
<section>
<h1>Browser <strong>Support</strong></h1>
<a href="http://html5test.com/">HTML5 Browser Test</a>
<a href="http://html5readiness.com/">HTML5 Readiness</a>
</section>
<section class="related">
<h1>Progressive Enhancement</h1>
<h2>feature <strong>detection</strong> with <a href="http://www.modernizr.com/">Modernizr</a></h2>
<h2>fill functionality with browser <a href="http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">shims</a></h2>
</section>
<section><h1>What about <strong>CSS</strong>3?</h1></section>
<section class="related">
<h1 class="awesomeness" style="text-align:center">Awesomeness</h1>
<pre class="textmate-source mac_classic b0"><span class='linenum'> 1</span> <span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">h1</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>awesomeness<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>Awesomeness<span class="meta meta_tag meta_tag_block meta_tag_block_any meta_tag_block_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_block entity_name_tag_block_any entity_name_tag_block_any_html">h1</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span></span></pre>
<pre class="textmate-source mac_classic b1"><span class='linenum'> 1</span> <span class="source source_css"><span class="meta meta_selector meta_selector_css"><span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_class entity_other_attribute-name_class_css"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_css">.</span>awesomeness</span> </span><span class="meta meta_property-list meta_property-list_css"><span class="punctuation punctuation_section punctuation_section_property-list punctuation_section_property-list_css">{</span>
<span class='linenum'> 2</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">color</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="support support_constant support_constant_color support_constant_color_w3c-standard-color-name support_constant_color_w3c-standard-color-name_css">white</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 3</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">border</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="constant constant_numeric constant_numeric_css">0.1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">em</span> <span class="support support_constant support_constant_property-value support_constant_property-value_css">solid</span> <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>1065d7</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 4</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">padding</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="constant constant_numeric constant_numeric_css">0.5</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">em</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 5</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">text-shadow</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> rgba(<span class="constant constant_numeric constant_numeric_css">12</span>,<span class="constant constant_numeric constant_numeric_css"> 68</span>,<span class="constant constant_numeric constant_numeric_css"> 144</span>,<span class="constant constant_numeric constant_numeric_css"> 0.5</span>)<span class="constant constant_numeric constant_numeric_css"> 0</span> <span class="constant constant_numeric constant_numeric_css">-2</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 0</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 6</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">border</span>-radius</span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="constant constant_numeric constant_numeric_css">0.5</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">em</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 7</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">background</span>-<span class="support support_type support_type_property-name support_type_property-name_css">size</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="constant constant_numeric constant_numeric_css">88</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 88</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 8</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">background</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> -webkit-gradient(linear,<span class="constant constant_numeric constant_numeric_css"> 0 0</span>,<span class="constant constant_numeric constant_numeric_css"> 88 88</span>,
<span class='linenum'> 9</span> color-stop(<span class="constant constant_numeric constant_numeric_css">0</span>, rgba(<span class="constant constant_numeric constant_numeric_css">255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 0.17</span>)), color-stop(<span class="constant constant_numeric constant_numeric_css">0.25</span>, rgba(<span class="constant constant_numeric constant_numeric_css">255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 0.17</span>)),
<span class='linenum'> 10</span> color-stop(<span class="constant constant_numeric constant_numeric_css">0.26</span>, rgba(<span class="constant constant_numeric constant_numeric_css">255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 0</span>)), color-stop(<span class="constant constant_numeric constant_numeric_css">0.5</span>, rgba(<span class="constant constant_numeric constant_numeric_css">255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 0</span>)),
<span class='linenum'> 11</span> color-stop(<span class="constant constant_numeric constant_numeric_css">0.51</span>, rgba(<span class="constant constant_numeric constant_numeric_css">255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 0.17</span>)), color-stop(<span class="constant constant_numeric constant_numeric_css">0.75</span>, rgba(<span class="constant constant_numeric constant_numeric_css">255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 0.17</span>)),
<span class='linenum'> 12</span> color-stop(<span class="constant constant_numeric constant_numeric_css">0.76</span>, rgba(<span class="constant constant_numeric constant_numeric_css">255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 0</span>)), color-stop(<span class="constant constant_numeric constant_numeric_css">1</span>, rgba(<span class="constant constant_numeric constant_numeric_css">255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 255</span>,<span class="constant constant_numeric constant_numeric_css"> 0</span>))),
<span class='linenum'> 13</span> -webkit-gradient(linear, <span class="support support_constant support_constant_property-value support_constant_property-value_css">left</span> <span class="support support_constant support_constant_property-value support_constant_property-value_css">bottom</span>, <span class="support support_constant support_constant_property-value support_constant_property-value_css">left</span> <span class="support support_constant support_constant_property-value support_constant_property-value_css">top</span>, color-stop(<span class="constant constant_numeric constant_numeric_css">0</span>, <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>1470ed</span>), color-stop(<span class="constant constant_numeric constant_numeric_css">1</span>, <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>8ab8f6</span>))<span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 14</span> <span class="meta meta_property-name meta_property-name_css">box-shadow</span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="support support_constant support_constant_property-value support_constant_property-value_css">inset</span><span class="constant constant_numeric constant_numeric_css"> 0</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 0</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 0</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span> <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>bad5fa</span>, <span class="support support_constant support_constant_property-value support_constant_property-value_css">inset</span><span class="constant constant_numeric constant_numeric_css"> 0</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span> <span class="constant constant_numeric constant_numeric_css">-1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span> <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>0f5abf</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span> <span class="punctuation punctuation_section punctuation_section_property-list punctuation_section_property-list_css">}</span></span>
<span class='linenum'> 15</span> <span class="meta meta_selector meta_selector_css"><span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_class entity_other_attribute-name_class_css"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_css">.</span>awesomeness</span><span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_pseudo-class entity_other_attribute-name_pseudo-class_css"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_css">:</span>hover</span> </span><span class="meta meta_property-list meta_property-list_css"><span class="punctuation punctuation_section punctuation_section_property-list punctuation_section_property-list_css">{</span>
<span class='linenum'> 16</span> <span class="meta meta_property-name meta_property-name_css">-webkit-animation</span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> animate-stripes<span class="constant constant_numeric constant_numeric_css"> 2</span>s linear infinite<span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span> <span class="punctuation punctuation_section punctuation_section_property-list punctuation_section_property-list_css">}</span></span>
<span class='linenum'> 17</span> <span class="meta meta_selector meta_selector_css"><span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_class entity_other_attribute-name_class_css"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_css">.</span>awesomeness</span><span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_pseudo-class entity_other_attribute-name_pseudo-class_css"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_css">:</span>active</span> </span><span class="meta meta_property-list meta_property-list_css"><span class="punctuation punctuation_section punctuation_section_property-list punctuation_section_property-list_css">{</span>
<span class='linenum'> 18</span> <span class="meta meta_property-name meta_property-name_css">-webkit-animation</span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> mypulse<span class="constant constant_numeric constant_numeric_css"> 1</span>s ease-in-out infinite, animate-stripes<span class="constant constant_numeric constant_numeric_css"> 2</span>s linear infinite<span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span> <span class="punctuation punctuation_section punctuation_section_property-list punctuation_section_property-list_css">}</span></span></span></pre>
<!-- .awesomeness {
color: white;
border: 0.1em solid #1065d7;
padding: 0.5em;
text-shadow: rgba(12, 68, 144, 0.5) 0 -2px 0;
border-radius: 0.5em;
background-size: 88px 88px;
background: -webkit-gradient(linear, 0 0, 88 88,
color-stop(0, rgba(255, 255, 255, 0.17)), color-stop(0.25, rgba(255, 255, 255, 0.17)),
color-stop(0.26, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0)),
color-stop(0.51, rgba(255, 255, 255, 0.17)), color-stop(0.75, rgba(255, 255, 255, 0.17)),
color-stop(0.76, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))),
-webkit-gradient(linear, left bottom, left top, color-stop(0, #1470ed), color-stop(1, #8ab8f6));
box-shadow: inset 0px 1px 0px 0px #bad5fa, inset 0px -1px 1px #0f5abf; }
.awesomeness:hover {
-webkit-animation: animate-stripes 2s linear infinite; }
.awesomeness:active {
-webkit-animation: mypulse 1s ease-in-out infinite, animate-stripes 2s linear infinite; }
-->
</section>
<section class="related">
<h1>Just a few of the <strong>new</strong> CSS3 Features</h1>
<ul class="columns4">
<li>Gradients</li>
<li>Transitions</li>
<li>Backgrounds</li>
<li>Transformations</li>
<li>Shadows</li>
<li>Masks</li>
<li>Columns</li>
<li>WebFonts</li>
<li>SVG</li>
<li>HSLA</li>
<li>RGBA</li>
</ul>
</section>
<section class="center">
<h1>I Hate Images in User Interfaces</h1>
<h2>1x300px gradient images must <strong>die</strong></h2>
<img src="images/ext_button_slice.png" style="width:50%;">
</section>
<section>
<h1>Non-<strong>semantic</strong> DOM elements</h1>
<button class="extbutton">Download jQuery UI</button>
<pre class="textmate-source mac_classic b0">
<span class='linenum'> 1</span> <span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">table</span> <span class="meta meta_attribute-with-value meta_attribute-with-value_id meta_attribute-with-value_id_html"><span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_id entity_other_attribute-name_id_html">id</span><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_html">=</span><span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span><span class="meta meta_toc-list meta_toc-list_id meta_toc-list_id_html">ext-comp-1007</span><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">cellspacing</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>0<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>x-btn x-btn-noicon x-btn-over<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">style</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>width: 75px; <span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 2</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">tbody</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>x-btn-small x-btn-icon-small-left<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 3</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">tr</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 4</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>x-btn-tl<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span><span class="constant constant_character constant_character_entity constant_character_entity_html"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">&</span>nbsp<span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">;</span></span><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 5</span> <span class="meta meta_tag meta_tag_any meta_tag_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_html">td</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>x-btn-tc<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">><span class="meta meta_scope meta_scope_between-tag-pair meta_scope_between-tag-pair_html"><</span>/</span><span class="entity entity_name entity_name_tag entity_name_tag_html">td</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">></span></span>
<span class='linenum'> 6</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>x-btn-tr<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span><span class="constant constant_character constant_character_entity constant_character_entity_html"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">&</span>nbsp<span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">;</span></span><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 7</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">tr</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 8</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">tr</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 9</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>x-btn-ml<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span><span class="constant constant_character constant_character_entity constant_character_entity_html"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">&</span>nbsp<span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">;</span></span><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 10</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>x-btn-mc<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 11</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">em</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">unselectable</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>on<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 12</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">button</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">type</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>button<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span> <span class="meta meta_attribute-with-value meta_attribute-with-value_id meta_attribute-with-value_id_html"><span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_id entity_other_attribute-name_id_html">id</span><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_html">=</span><span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span><span class="meta meta_toc-list meta_toc-list_id meta_toc-list_id_html">ext-gen39</span><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span></span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span> x-btn-text<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>Close<span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">button</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 13</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">em</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 14</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 15</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>x-btn-mr<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span><span class="constant constant_character constant_character_entity constant_character_entity_html"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">&</span>nbsp<span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">;</span></span><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 16</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">tr</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 17</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">tr</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 18</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>x-btn-bl<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span><span class="constant constant_character constant_character_entity constant_character_entity_html"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">&</span>nbsp<span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">;</span></span><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 19</span> <span class="meta meta_tag meta_tag_any meta_tag_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_html">td</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>x-btn-bc<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">><span class="meta meta_scope meta_scope_between-tag-pair meta_scope_between-tag-pair_html"><</span>/</span><span class="entity entity_name entity_name_tag entity_name_tag_html">td</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_html">></span></span>
<span class='linenum'> 20</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>x-btn-br<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span><span class="constant constant_character constant_character_entity constant_character_entity_html"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">&</span>nbsp<span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_html">;</span></span><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">i</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">td</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 21</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">tr</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 22</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">tbody</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>
<span class='linenum'> 23</span> <span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">table</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span></span></pre>
<!-- <table id="ext-comp-1007" cellspacing="0" class="x-btn x-btn-noicon x-btn-over" style="width: 75px; ">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<td class="x-btn-tl"><i> </i></td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-ml"><i> </i></td>
<td class="x-btn-mc">
<em class="" unselectable="on">
<button type="button" id="ext-gen39" class=" x-btn-text">Close</button>
</em>
</td>
<td class="x-btn-mr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-bl"><i> </i></td>
<td class="x-btn-bc"></td>
<td class="x-btn-br"><i> </i></td>
</tr>
</tbody>
</table> -->
</section>
<section class="related">
<h1><strong>One</strong> DOM Element</h1>
<pre class="textmate-source mac_classic"><span class="text text_html text_html_basic"><span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"><</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">button</span> <span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_html">class</span>=<span class="string string_quoted string_quoted_double string_quoted_double_html"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_html">"</span>extbutton<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_html">"</span></span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span>Download jQuery UI<span class="meta meta_tag meta_tag_inline meta_tag_inline_any meta_tag_inline_any_html"><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_begin punctuation_definition_tag_begin_html"></</span><span class="entity entity_name entity_name_tag entity_name_tag_inline entity_name_tag_inline_any entity_name_tag_inline_any_html">button</span><span class="punctuation punctuation_definition punctuation_definition_tag punctuation_definition_tag_end punctuation_definition_tag_end_html">></span></span></span></pre>
<button class="extbutton">Download jQuery UI</button>
<pre class="textmate-source mac_classic b0"><span class='linenum'> 1</span> <span class="source source_css"><span class="meta meta_selector meta_selector_css"><span class="entity entity_other entity_other_attribute-name entity_other_attribute-name_class entity_other_attribute-name_class_css"><span class="punctuation punctuation_definition punctuation_definition_entity punctuation_definition_entity_css">.</span>extbutton</span> </span><span class="meta meta_property-list meta_property-list_css"><span class="punctuation punctuation_section punctuation_section_property-list punctuation_section_property-list_css">{</span>
<span class='linenum'> 2</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">color</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>333</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 3</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">padding</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="constant constant_numeric constant_numeric_css">0.5</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">em</span><span class="constant constant_numeric constant_numeric_css"> 1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">em</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 4</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">border-width</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="constant constant_numeric constant_numeric_css">1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 5</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">border-style</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="support support_constant support_constant_property-value support_constant_property-value_css">solid</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 6</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">border-color</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>C9C9C9</span> <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>ACACAC</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 7</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">border</span>-radius</span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="constant constant_numeric constant_numeric_css">2</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 8</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">background-image</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> linear-gradient(<span class="support support_constant support_constant_property-value support_constant_property-value_css">top</span>, <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>f7f7f7</span><span class="constant constant_numeric constant_numeric_css"> 0</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">%</span>, <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>f1f1f1</span><span class="constant constant_numeric constant_numeric_css"> 60</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">%</span>, <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>dadada</span><span class="constant constant_numeric constant_numeric_css"> 60</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">%</span>, <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>dfdfdf</span><span class="constant constant_numeric constant_numeric_css"> 100</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">%</span>)<span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 9</span> <span class="meta meta_property-name meta_property-name_css"><span class="support support_type support_type_property-name support_type_property-name_css">text-shadow</span></span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="support support_constant support_constant_color support_constant_color_w3c-standard-color-name support_constant_color_w3c-standard-color-name_css">white</span><span class="constant constant_numeric constant_numeric_css"> 0 1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 0</span><span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 10</span> <span class="meta meta_property-name meta_property-name_css">box-shadow</span><span class="meta meta_property-value meta_property-value_css"><span class="punctuation punctuation_separator punctuation_separator_key-value punctuation_separator_key-value_css">:</span> <span class="support support_constant support_constant_property-value support_constant_property-value_css">inset</span><span class="constant constant_numeric constant_numeric_css"> 0 1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 0</span> <span class="support support_constant support_constant_color support_constant_color_w3c-standard-color-name support_constant_color_w3c-standard-color-name_css">white</span>,
<span class='linenum'> 11</span> <span class="support support_constant support_constant_property-value support_constant_property-value_css">inset</span><span class="constant constant_numeric constant_numeric_css"> 1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 0 0</span> <span class="support support_constant support_constant_color support_constant_color_w3c-standard-color-name support_constant_color_w3c-standard-color-name_css">white</span>,
<span class='linenum'> 12</span> <span class="support support_constant support_constant_property-value support_constant_property-value_css">inset</span> <span class="constant constant_numeric constant_numeric_css">-1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 0 0</span> <span class="support support_constant support_constant_color support_constant_color_w3c-standard-color-name support_constant_color_w3c-standard-color-name_css">white</span>,
<span class='linenum'> 13</span> <span class="support support_constant support_constant_property-value support_constant_property-value_css">inset</span><span class="constant constant_numeric constant_numeric_css"> 0</span> <span class="constant constant_numeric constant_numeric_css">-1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 0</span> <span class="constant constant_other constant_other_color constant_other_color_rgb-value constant_other_color_rgb-value_css"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_css">#</span>f7f7f7</span>,
<span class='linenum'> 14</span> <span class="constant constant_numeric constant_numeric_css"> 0 1</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span><span class="constant constant_numeric constant_numeric_css"> 5</span><span class="keyword keyword_other keyword_other_unit keyword_other_unit_css">px</span> rgba(<span class="constant constant_numeric constant_numeric_css">0</span>,<span class="constant constant_numeric constant_numeric_css"> 0</span>,<span class="constant constant_numeric constant_numeric_css"> 0</span>,<span class="constant constant_numeric constant_numeric_css"> 0.05</span>)<span class="punctuation punctuation_terminator punctuation_terminator_rule punctuation_terminator_rule_css">;</span></span>
<span class='linenum'> 15</span> <span class="punctuation punctuation_section punctuation_section_property-list punctuation_section_property-list_css">}</span></span></span></pre>
<br><a class="b1" href="http://lab.simurai.com/css/umbrui/">umbrUI</a>
<!-- .extbutton {
color: #333;
padding: 0.5em 1em;
border-width: 1px;
border-style: solid;
border-color: #C9C9C9 #ACACAC;
border-radius: 2px;
background-image: linear-gradient(top, #f7f7f7 0%, #f1f1f1 60%, #dadada 60%, #dfdfdf 100%);
text-shadow: white 0 1px 0;
box-shadow: inset 0 1px 0 white,
inset 1px 0 0 white,
inset -1px 0 0 white,
inset 0 -1px 0 #f7f7f7,
0 1px 5px rgba(0, 0, 0, 0.05);
}-->
</section>
<section>
<h1>Resources</h1>
<ul>
<li><a href="http://books.alistapart.com/products/html5-for-web-designers">HTML5 for Web Designers</a><cite>Jeremy Keith</cite></li>
<li><a href="http://diveintohtml5.org/"><strong>Dive</strong> into HTML5</a><cite>Mark Pilgrim</cite></li>
<li><a href="http://introducinghtml5.com">Introducing HTML5</a><cite>Bruce Lawson and Remy Sharp</cite></li>
</ul>
</section>
</div>
<!-- <div id="overlayt"></div>
<div id="overlayr"></div>
<div id="overlayb"></div>
<div id="overlayl"></div> -->
</body>
</html>