forked from miketaylr/diveintohtml5
-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathdetect.html
685 lines (504 loc) · 53.4 KB
/
detect.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
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
<!DOCTYPE html>
<meta charset="utf-8">
<title>Detecting HTML5 Features - Dive Into HTML5</title>
<!--[if lt IE 9]><script src="j/html5.js"></script><![endif]-->
<link rel="alternate" type="application/atom+xml" href="https://github.com/diveintomark/diveintohtml5/commits/master.atom">
<link rel="stylesheet" href="screen.css">
<style>
body{counter-reset:h1 2}
</style>
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css">
<link rel="prefetch" href="index.html">
<p>You are here: <a href="index.html">Home</a> <span class="u triangularBullet"></span> <a href="table-of-contents.html#detect">Dive Into <abbr>HTML5</abbr></a> <span class="u triangularBullet"></span>
<h1><br>Detecting <abbr>HTML5</abbr> Features</h1>
<p id="toc">
<p class="a rotatedFloralHeartBullet">
<h2 id="divingin">Diving In</h2>
<p class="f">You may well ask: “How can I start using <abbr>HTML5</abbr> if older browsers don’t support it?” But the question itself is misleading. <abbr>HTML5</abbr> is not one big thing; it is a collection of individual features. So you can’t detect “<abbr>HTML5</abbr> support,” because that doesn’t make any sense. But you <em>can</em> detect support for individual features, like canvas, video, or geolocation.
<p class="a rotatedFloralHeartBullet">
<h2 id="techniques">Detection Techniques</h2>
<p>When your browser renders a web page, it constructs a Document Object Model (<abbr><dfn>DOM</dfn></abbr>), a collection of objects that represent the <abbr>HTML</abbr> elements on the page. Every element — every <code><p></code>, every <code><div></code>, every <code><span></code> — is represented in the <abbr>DOM</abbr> by a different object. (There are also global objects, like <code>window</code> and <code>document</code>, that aren’t tied to specific elements.)
<p class="ss" style="width:257px"><img src="i/openclipart.org_johnny_automatic_peeking_out_the_window.png" width="257" height="436" alt="girl peeking out the window">
<p>All <abbr>DOM</abbr> objects share a set of common properties, but some objects have more than others. In browsers that support <abbr>HTML5</abbr> features, certain objects will have unique properties. A quick peek at the <abbr>DOM</abbr> will tell you which features are supported.
<p>There are four basic techniques for detecting whether a browser supports a particular feature. From simplest to most complex:
<ol>
<li>
<p>Check if a certain property exists on a global object (such as <code>window</code> or <code>navigator</code>).
<p>Example: <a href="#geolocation">testing for geolocation support</a>
<li>
<p>Create an element, then check if a certain property exists on that element.
<p>Example: <a href="#canvas">testing for canvas support</a>
<li>
<p>Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
<p>Example: <a href="#video-formats">testing which video formats are supported</a>
<li>
<p>Create an element, set a property to a certain value, then check if the property has retained its value.
<p>Example: <a href="#input-types">testing which <code><input></code> types are supported</a>
</ol>
<p class="a rotatedFloralHeartBullet">
<h2 id="modernizr">Modernizr, an HTML5 Detection Library</h2>
<p><a href="http://www.modernizr.com/">Modernizr</a> is an open source, <abbr>MIT</abbr>-licensed JavaScript library that detects support for many <abbr>HTML5</abbr> <i class="baa">&</i> <abbr>CSS3</abbr> features. You should always use the latest version. To use it, include the following <code><script></code> element at the top of your page.
<pre style="float:left"><code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<mark><script src="modernizr.min.js"></script></mark>
</head>
<body>
...
</body>
</html>
</code></pre>
<p class="legend right" style="margin-top:7em"><span class="arrow leftwardsWaveArrow"></span> It goes to your <head>
<p class="clear">Modernizr runs automatically. There is no <code>modernizr_init()</code> function to call. When it runs, it creates a global object called <code>Modernizr</code>, that contains a set of Boolean properties for each feature it can detect. For example, if your browser supports the <a href="canvas.html">canvas <abbr>API</abbr></a>, the <code>Modernizr.canvas</code> property will be <code>true</code>. If your browser does not support the canvas <abbr>API</abbr>, the <code>Modernizr.canvas</code> property will be <code>false</code>.
<pre><code>if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}</code></pre>
<p class="a rotatedFloralHeartBullet">
<h2 id="canvas">Canvas</h2>
<p class="ss" style="width:300px"><img src="i/openclipart.org_johnny_automatic_fishing_boat.png" width="300" height="203" alt="man fishing in a canoe"><br><span id="live-canvas"></span>
<p><abbr>HTML5</abbr> defines <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">the <canvas> element</a> as “a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, or other visual images on the fly.” A <dfn>canvas</dfn> is a rectangle in your page where you can use JavaScript to draw anything you want. <abbr>HTML5</abbr> defines a set of functions (“the canvas <abbr>API</abbr>”) for drawing shapes, defining paths, creating gradients, and applying transformations.
<p>Checking for the canvas <abbr>API</abbr> uses <a href="#techniques">detection technique #2</a>. If your browser supports the canvas <abbr>API</abbr>, the <abbr>DOM</abbr> object it creates to represent a <code><canvas></code> element will have a <a href="canvas.html#shapes"><code>getContext()</code> method</a>. If your browser doesn’t support the canvas <abbr>API</abbr>, the <abbr>DOM</abbr> object it creates for a <code><canvas></code> element will only have the set of common properties, but not anything canvas-specific.
<pre><code>function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
</code></pre>
<p>This function starts by creating a dummy <code><canvas></code> element. But the element is never attached to your page, so no one will ever see it. It’s just floating in memory, going nowhere and doing nothing, like a canoe on a lazy river.
<pre><code>return !!document.<mark>createElement('canvas')</mark>.getContext;</code></pre>
<p>As soon as you create the dummy <code><canvas></code> element, you test for the presence of a <code>getContext()</code> method. This method will only exist if your browser supports the canvas <abbr>API</abbr>.
<pre><code>return !!document.createElement('canvas').<mark>getContext</mark>;</code></pre>
<p>Finally, you use the double-negative trick to force the result to a Boolean value (<code>true</code> or <code>false</code>).
<pre><code>return <mark>!!</mark>document.createElement('canvas').getContext;</code></pre>
<p>This function will detect support for most of the canvas <abbr>API</abbr>, including <a href="canvas.html#shapes">shapes</a>, <a href="canvas.html#paths">paths</a>, <a href="canvas.html#gradients">gradients <i class="baa">&</i> patterns</a>. It will not detect the third-party <a href="canvas.html#ie"><code>explorercanvas</code> library</a> that implements the canvas <abbr>API</abbr> in Microsoft Internet Explorer.
<p>Instead of writing this function yourself, you can use <a href="#modernizr">Modernizr</a> to detect support for the canvas <abbr>API</abbr>.
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for canvas support
<pre><code>if (<mark>Modernizr.canvas</mark>) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}</code></pre>
<p>There is a separate test for the canvas text <abbr>API</abbr>, which I will demonstrate next.
<p class="a rotatedFloralHeartBullet">
<h2 id="canvas-text">Canvas Text</h2>
<p class="ss" style="width:414px"><img src="i/openclipart.org_johnny_automatic_baseball_at_bat.png" width="414" height="254" alt="baseball player at bat"><br><span id="live-canvas-text"></span>
<p>Even if your browser supports the <a href="#canvas">canvas <abbr>API</abbr></a>, it might not support the <dfn>canvas text</dfn> <abbr>API</abbr>. The canvas <abbr>API</abbr> grew over time, and the text functions were added late in the game. Some browsers shipped with canvas support before the text <abbr>API</abbr> was complete.
<p>Checking for the canvas text <abbr>API</abbr> uses <a href="#techniques">detection technique #2</a>. If your browser supports the canvas <abbr>API</abbr>, the <abbr>DOM</abbr> object it creates to represent a <code><canvas></code> element will have the <a href="canvas.html#shapes"><code>getContext()</code> method</a>. If your browser doesn’t support the canvas <abbr>API</abbr>, the <abbr>DOM</abbr> object it creates for a <code><canvas></code> element will only have the set of common properties, but not anything canvas-specific.
<pre><code>function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}</code></pre>
<p>The function starts by <a href="#canvas">checking for canvas support</a>, using the <code>supports_canvas()</code> function you just saw in the previous section. If your browser doesn’t support the canvas <abbr>API</abbr>, it certainly won’t support the canvas text <abbr>API</abbr>!
<pre><code>if (<mark>!supports_canvas()</mark>) { return false; }</code></pre>
<p>Next, you create a dummy <code><canvas></code> element and get its drawing context. This is guaranteed to work, because the <code>supports_canvas()</code> function already checked that the <code>getContext()</code> method exists on all canvas objects.
<pre><code> var dummy_canvas = document.createElement('canvas');
var context = <mark>dummy_canvas.getContext('2d')</mark>;</code></pre>
<p>Finally, you check whether the drawing context has a <code>fillText()</code> function. If it does, the canvas text <abbr>API</abbr> is available. Hooray!
<pre><code> return <mark>typeof context.fillText == 'function'</mark>;</code></pre>
<p>Instead of writing this function yourself, you can use <a href="#modernizr">Modernizr</a> to detect support for the canvas text <abbr>API</abbr>.
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for canvas text support
<pre><code>if (<mark>Modernizr.canvastext</mark>) {
// let's draw some text!
} else {
// no native canvas text support available :(
}</code></pre>
<p class="a rotatedFloralHeartBullet">
<h2 id="video">Video</h2>
<p><abbr>HTML5</abbr> defines a new element called <code><video></code> for embedding video in your web pages. Embedding video used to be impossible without third-party plugins such as Apple QuickTime® or Adobe Flash®.
<p class="ss" style="width:224px"><img src="i/openclipart.org_johnny_automatic_at_the_theater.png" alt="audience at the theater" width="224" height="334"><br><span id="live-video"></span>
<p>The <code><video></code> element is designed to be usable without any detection scripts. You can specify multiple video files, and browsers that support <abbr>HTML5</abbr> video will choose one based on what video formats they support. (See “A gentle introduction to video encoding” <a href="http://diveintomark.org/archives/2008/12/18/give-part-1-container-formats">part 1: container formats</a> and <a href="http://diveintomark.org/archives/2008/12/19/give-part-2-lossy-video-codecs">part 2: lossy video codecs</a> to learn about different video formats.)
<p>Browsers that don’t support <abbr>HTML5</abbr> video will ignore the <code><video></code> element completely, but you can use this to your advantage and tell them to play video through a third-party plugin instead. Kroc Camen has designed a solution called <a href="http://camendesign.com/code/video_for_everybody">Video for Everybody!</a> that uses <abbr>HTML5</abbr> video where available, but falls back to QuickTime or Flash in older browsers. This solution uses no JavaScript whatsoever, and it works in virtually every browser, including mobile browsers.
<p>If you want to do more with video than plop it on your page and play it, you’ll need to use JavaScript. Checking for video support uses <a href="#techniques">detection technique #2</a>. If your browser supports <abbr>HTML5</abbr> video, the <abbr>DOM</abbr> object it creates to represent a <code><video></code> element will have a <code>canPlayType()</code> method. If your browser doesn’t support <abbr>HTML5</abbr> video, the <abbr>DOM</abbr> object it creates for a <code><video></code> element will have only the set of properties common to all elements. You can check for video support using this function:
<pre><code>function supports_video() {
return !!document.createElement('video').canPlayType;
}</code></pre>
<p>Instead of writing this function yourself, you can use <a href="#modernizr">Modernizr</a> to detect support for <abbr>HTML5</abbr> video.
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for <abbr>HTML5</abbr> video support
<pre><code>if (<mark>Modernizr.video</mark>) {
// let's play some video!
} else {
// no native video support available :(
// maybe check for QuickTime or Flash instead
}</code></pre>
<p>In <a href="video.html">the Video chapter</a>, I’ll explain another solution that uses these detection techniques to convert <code><video></code> elements to Flash-based video players, for the benefit of browsers that don’t support <abbr>HTML5</abbr> video.
<p>There is a separate test for detecting which video formats your browser can play, which I will demonstrate next.
<p class="a rotatedFloralHeartBullet">
<h2 id="video-formats">Video Formats</h2>
<p>Video formats are like written languages. An English newspaper may convey the same information as a Spanish newspaper, but if you can only read English, only one of them will be useful to you! To play a video, your browser needs to understand the “language” in which the video was written.
<p class="ss" style="float:left;margin:0 1.75em 1.75em 0;width:250px"><img src="i/openclipart.org_johnny_automatic_man_reading_newspaper.png" alt="man reading newspaper" width="250" height="261"><br><span id="live-video-formats"></span>
<p>The “language” of a video is called a “codec” — this is the algorithm used to encode the video into a stream of bits. There are dozens of codecs in use all over the world. Which one should you use? The unfortunate reality of <abbr>HTML5</abbr> video is that browsers can’t agree on a single codec. However, they seem to have narrowed it down to two. One codec costs money (because of patent licensing), but it works in <a href="http://www.apple.com/safari/">Safari</a> and on the iPhone. (This one also works in Flash if you use a solution like <a href="http://camendesign.com/code/video_for_everybody">Video for Everybody!</a>) The other codec is free and works in open source browsers like <a href="http://code.google.com/chromium/">Chromium</a> and <a href="http://www.getfirefox.com/">Mozilla Firefox</a>.
<p>Checking for video format support uses <a href="#techniques">detection technique #3</a>. If your browser supports <abbr>HTML5</abbr> video, the <abbr>DOM</abbr> object it creates to represent a <code><video></code> element will have a <code>canPlayType()</code> method. This method will tell you whether the browser supports a particular video format.
<p>This function checks for the patent-encumbered format supported by Macs and iPhones.
<pre><code>function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}</code></pre>
<p>The function starts by <a href="#video">checking for <abbr>HTML5</abbr> video support</a>, using the <code>supports_video()</code> function you just saw in the previous section. If your browser doesn’t support <abbr>HTML5</abbr> video, it certainly won’t support any video formats!
<pre><code> if (<mark>!supports_video()</mark>) { return false; }</code></pre>
<p>Then the function creates a dummy <code><video></code> element (but doesn’t attach it to the page, so it won’t be visible) and calls the <code>canPlayType()</code> method. This method is guaranteed to be there, because the <code>supports_video()</code> function just checked for it.
<pre><code> var <mark>v</mark> = document.createElement("video");</code></pre>
<p>A “video format” is really a combination of different things. In technical terms, you’re asking the browser whether it can play H.264 Baseline video and AAC LC audio in an MPEG-4 container. (I’ll explain what all that means in <a href="video.html">the Video chapter</a>. You might also be interested in reading <a href="http://diveintomark.org/tag/give">A gentle introduction to video encoding</a>.)
<pre><code> return v.canPlayType('<mark>video/mp4; codecs="avc1.42E01E, mp4a.40.2"</mark>');</code></pre>
<p>The <code>canPlayType()</code> function doesn’t return <code>true</code> or <code>false</code>. In recognition of how complex video formats are, the function returns a string:
<ul>
<li><code>"probably"</code> if the browser is fairly confident it can play this format
<li><code>"maybe"</code> if the browser thinks it might be able to play this format
<li><code>""</code> (an empty string) if the browser is certain it can’t play this format
</ul>
<p>This second function checks for the open video format supported by Mozilla Firefox and other open source browsers. The process is exactly the same; the only difference is the string you pass in to the <code>canPlayType()</code> function. In technical terms, you’re asking the browser whether it can play Theora video and Vorbis audio in an Ogg container.
<pre><code>function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType(<mark>'video/ogg; codecs="theora, vorbis"'</mark>);
}</code></pre>
<p>Finally, <a href="http://www.webmproject.org/">WebM</a> is a newly open-sourced (and non-patent-encumbered) video codec that will be included in the next version of major browsers, including Chrome, <a href="http://nightly.mozilla.org/webm/">Firefox</a>, and <a href="http://labs.opera.com/news/2010/05/19/">Opera</a>. You can use the same technique to detect support for open WebM video.
<pre><code>function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType(<mark>'video/webm; codecs="vp8, vorbis"'</mark>);
}</code></pre>
<p>Instead of writing this function yourself, you can use <a href="#modernizr">Modernizr</a> (1.5 or later) to detect support for different <abbr>HTML5</abbr> video formats.
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for <abbr>HTML5</abbr> video formats
<pre><code>if (Modernizr.video) {
// let's play some video! but what kind?
if (<mark>Modernizr.video.webm</mark>) {
// try WebM
} else if (<mark>Modernizr.video.ogg</mark>) {
// try Ogg Theora + Vorbis in an Ogg container
} else if (<mark>Modernizr.video.h264</mark>){
// try H.264 video + AAC audio in an MP4 container
}
}</code></pre>
<p class="a rotatedFloralHeartBullet">
<h2 id="storage">Local Storage</h2>
<p class="ss" style="width:135px"><img src="i/openclipart.org_johnny_automatic_half_stack_of_horizontal_sections.png" alt="filing cabinet with drawers of different sizes" width="135" height="341"><br><span id="live-storage"></span>
<p><a href="http://dev.w3.org/html5/webstorage/"><abbr>HTML5</abbr> storage</a> provides a way for web sites to store information on your computer and retrieve it later. The concept is similar to cookies, but it’s designed for larger quantities of information. Cookies are limited in size, and your browser sends them back to the web server every time it requests a new page (which takes extra time and precious bandwidth). <abbr>HTML5</abbr> storage stays on your computer, and web sites can access it with JavaScript after the page is loaded.
<div class="pf clear">
<h4>Ask Professor Markup</h4>
<div class="inner">
<blockquote class="note">
<p><span class="whiteRightPointingIndex"></span>Q: Is local storage really part of <abbr>HTML5</abbr>? Why is it in a separate specification?<br>
A: The short answer is yes, local storage is part of <abbr>HTML5</abbr>. The slightly longer answer is that local storage used to be part of the main <abbr>HTML5</abbr> specification, but it was split out into a separate specification because some people in the <abbr>HTML5</abbr> Working Group complained that <abbr>HTML5</abbr> was too big. If that sounds like slicing a pie into more pieces to reduce the total number of calories… well, welcome to the wacky world of standards.
</blockquote>
</div>
</div>
<p>Checking for <abbr>HTML5</abbr> storage support uses <a href="#techniques">detection technique #1</a>. If your browser supports <abbr>HTML5</abbr> storage, there will be a <code>localStorage</code> property on the global <code>window</code> object. If your browser doesn’t support <abbr>HTML5</abbr> storage, the <code>localStorage</code> property will be undefined. Due to an unfortunate bug in older versions of Firefox, this test will raise an exception if cookies are disabled, so the entire test is wrapped in a <code>try..catch</code> statement.
<pre><code>function supports_local_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch(e){
return false;
}
}</code></pre>
<p>Instead of writing this function yourself, you can use <a href="#modernizr">Modernizr</a> (1.1 or later) to detect support for <abbr>HTML5</abbr> local storage.
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for <abbr>HTML5</abbr> local storage
<pre><code>if (<mark>Modernizr.localstorage</mark>) {
// window.localStorage is available!
} else {
// no native support for local storage :(
// try a fallback or another third-party solution
}</code></pre>
<p>Note that JavaScript is case-sensitive. The Modernizr attribute is called <code>localstorage</code> (all lowercase), but the <abbr>DOM</abbr> property is called <code>window.localStorage</code> (mixed case).
<div class="pf clear">
<h4>Ask Professor Markup</h4>
<div class="inner">
<blockquote class="note">
<p><span class="whiteRightPointingIndex"></span>Q: How secure is my <abbr>HTML5</abbr> storage database? Can anyone read it?<br>
A: Anyone who has physical access to your computer can probably look at (or even change) your <abbr>HTML5</abbr> storage database. Within your browser, any web site can read and modify its own values, but sites can’t access values stored by other sites. This is called a <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin-0">same-origin restriction</a>.
</blockquote>
</div>
</div>
<p class="a rotatedFloralHeartBullet">
<h2 id="workers">Web Workers</h2>
<p class="ss" style="margin:1.75em"><span id="live-web-workers"></span>
<p><a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a> provide a standard way for browsers to run JavaScript in the background. With web workers, you can spawn multiple “threads” that all run at the same time, more or less. (Think of how your computer can run multiple applications at the same time, and you’re most of the way there.) These “background threads” can do complex mathematical calculations, make network requests, or access <a href="#local-storage">local storage</a> while the main web page responds to the user scrolling, clicking, or typing.
<p>Checking for web workers uses <a href="#techniques">detection technique #1</a>. If your browser supports the Web Worker <abbr>API</abbr>, there will be a <code>Worker</code> property on the global <code>window</code> object. If your browser doesn’t support the Web Worker <abbr>API</abbr>, the <code>Worker</code> property will be undefined.
<pre><code>function supports_web_workers() {
return !!window.Worker;
}</code></pre>
<p>Instead of writing this function yourself, you can use <a href="#modernizr">Modernizr</a> (1.1 or later) to detect support for web workers.
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for web workers
<pre><code>if (<mark>Modernizr.webworkers</mark>) {
// window.Worker is available!
} else {
// no native support for web workers :(
// try a fallback or another third-party solution
}</code></pre>
<p>Note that JavaScript is case-sensitive. The Modernizr attribute is called <code>webworkers</code> (all lowercase), but the <abbr>DOM</abbr> object is called <code>window.Worker</code> (with a capital “W” in “Worker”).
<p class="a rotatedFloralHeartBullet">
<h2 id="offline">Offline Web Applications</h2>
<p class="ss" style="width:257px"><img src="i/openclipart.org_johnny_automatic_cabin_along_stream.png" alt="cabin in the woods" width="257" height="242"><br><span id="live-offline"></span>
<p>Reading static web pages offline is easy: connect to the Internet, load a web page, disconnect from the Internet, drive to a secluded cabin, and read the web page at your leisure. (To save time, you may wish to skip the step about the cabin.) But what about web applications like <a href="http://mail.google.com/">Gmail</a> or <a href="http://docs.google.com/">Google Docs</a>? Thanks to <abbr>HTML5</abbr>, anyone (not just Google!) can build a web application that works offline.
<p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">Offline web applications</a> start out as online web applications. The first time you visit an offline-enabled web site, the web server tells your browser which files it needs in order to work offline. These files can be anything — <abbr>HTML</abbr>, JavaScript, images, even <a href="#video">videos</a>. Once your browser downloads all the necessary files, you can revisit the web site even if you’re not connected to the Internet. Your browser will notice that you’re offline and use the files it has already downloaded. When you get back online, any changes you’ve made can be uploaded to the remote web server.
<p>Checking for offline support uses <a href="#techniques">detection technique #1</a>. If your browser supports offline web applications, there will be an <code>applicationCache</code> property on the global <code>window</code> object. If your browser doesn’t support offline web applications, the <code>applicationCache</code> property will be undefined. You can check for offline support with the following function:
<pre><code>function supports_offline() {
return !!window.applicationCache;
}</code></pre>
<p>Instead of writing this function yourself, you can use <a href="#modernizr">Modernizr</a> (1.1 or later) to detect support for offline web applications.
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for offline support
<pre><code>if (<mark>Modernizr.applicationcache</mark>) {
// window.applicationCache is available!
} else {
// no native support for offline :(
// try a fallback or another third-party solution
}</code></pre>
<p>Note that JavaScript is case-sensitive. The Modernizr attribute is called <code>applicationcache</code> (all lowercase), but the <abbr>DOM</abbr> object is called <code>window.applicationCache</code> (mixed case).
<p class="a rotatedFloralHeartBullet">
<h2 id="geolocation">Geolocation</h2>
<p>Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are — your <abbr>IP</abbr> address, your wireless network connection, which cell tower your phone is talking to, or dedicated <abbr>GPS</abbr> hardware that calculates latitude and longitude from information sent by satellites in the sky.
<p style="margin:0 auto;width:194px" id="geo-wrapper"><img src="i/openclipart.org_johnny_automatic_globe_man.png" alt="man with a globe for a head" width="194" height="317"><br><span id="live-geolocation"></span>
<div class="pf clear">
<h4>Ask Professor Markup</h4>
<div class="inner">
<blockquote class="note">
<p><span class="whiteRightPointingIndex"></span>Q: Is geolocation part of <abbr>HTML5</abbr>? Why are you talking about it?<br>
A: Geolocation support is being added to browsers right now, along with support for new <abbr>HTML5</abbr> features. Strictly speaking, geolocation is being standardized by the <a href="http://www.w3.org/2008/geolocation/">Geolocation Working Group</a>, which is separate from the <abbr>HTML5</abbr> Working Group. But I’m going to talk about geolocation in this book anyway, because it’s part of the evolution of the web that’s happening now.
</blockquote>
</div>
</div>
<p>Checking for geolocation support uses <a href="#techniques">detection technique #1</a>. If your browser supports the geolocation <abbr>API</abbr>, there will be a <code>geolocation</code> property on the global <code>navigator</code> object. If your browser doesn’t support the geolocation <abbr>API</abbr>, the <code>geolocation</code> property will not be present inside of <code>navigator</code>. Here’s how to check for geolocation support:
<pre><code>function supports_geolocation() {
return 'geolocation' in navigator;
}</code></pre>
<p>Instead of writing this function yourself, you can use <a href="#modernizr">Modernizr</a> to detect support for the geolocation <abbr>API</abbr>.
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for geolocation support
<pre><code>if (<mark>Modernizr.geolocation</mark>) {
// let's find out where you are!
} else {
// no native geolocation support available :(
// try geoPosition.js or another third-party solution
}</code></pre>
<p>If your browser does not support the geolocation <abbr>API</abbr> natively, there is still hope. <a href="https://github.com/estebanav/javascript-mobile-desktop-geolocation">GeoPosition.js</a> is a JavaScript library that aims to provide Geolocation support in older browsers like Blackberry, Palm OS, and Microsoft Internet Explorer 6, 7, and 8. It’s not quite the same as the <code>navigator.geolocation</code> <abbr>API</abbr>, but it serves the same purpose.
<p>There are also device-specific geolocation <abbr>API</abbr>s on older mobile phone platforms, including <a href="http://www.tonybunce.com/2008/05/08/Blackberry-Browser-Amp-GPS.aspx">BlackBerry</a>, <a href="http://www.forum.nokia.com/infocenter/index.jsp?topic=/Web_Developers_Library/GUID-4DDE31C7-EC0D-4EEC-BC3A-A0B0351154F8.html">Nokia</a>, <a href="http://developer.palm.com/index.php?option=com_content&view=article&id=1673#GPS-getCurrentPosition">Palm</a>, and <a href="http://bondi.omtp.org/1.0/apis/geolocation.html"><abbr title="Open Mobile Terminal Platform">OMTP</abbr> BONDI</a>.
<p>The <a href="geolocation.html">chapter on geolocation</a> will go into excruciating detail about how to use all of these different <abbr>API</abbr>s.
<p class="a rotatedFloralHeartBullet">
<h2 id="input-types">Input Types</h2>
<p class="ss" style="width:261px"><img src="i/openclipart.org_johnny_automatic_typewriter.png" alt="manual typewriter" width="261" height="228"><br><span id="live-input-types"></span>
<p>You know all about web forms, right? Make a <code><form></code>, add a few <code><input type="text"></code> elements and maybe an <code><input type="password"></code>, and finish it off with an <code><input type="submit"></code> button.
<p>You don’t know the half of it. <abbr>HTML5</abbr> defines over a dozen new input types that you can use in your forms.
<ol>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state"><code><input type="search"></code></a> for search boxes
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#number-state"><code><input type="number"></code></a> for spinboxes
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#range-state"><code><input type="range"></code></a> for sliders
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#color-state"><code><input type="color"></code></a> for color pickers
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#telephone-state"><code><input type="tel"></code></a> for telephone numbers
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#url-state"><code><input type="url"></code></a> for web addresses
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state"><code><input type="email"></code></a> for email addresses
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-state"><code><input type="date"></code></a> for calendar date pickers
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#month-state"><code><input type="month"></code></a> for months
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#week-state"><code><input type="week"></code></a> for weeks
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#time-state"><code><input type="time"></code></a> for timestamps
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-and-time-state"><code><input type="datetime"></code></a> for precise, absolute date+time stamps
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#local-date-and-time-state"><code><input type="datetime-local"></code></a> for local dates and times
</ol>
<p>Checking for <abbr>HTML5</abbr> input types uses <a href="#techniques">detection technique #4</a>. First, you create a dummy <code><input></code> element in memory. The default input type for all <code><input></code> elements is <code>"text"</code>. This will prove to be vitally important.
<pre><code> var i = document.createElement("input");</code></pre>
<p>Next, set the <code>type</code> attribute on the dummy <code><input></code> element to the input type you want to detect.
<pre><code> i.setAttribute("type", "color");</code></pre>
<p>If your browser supports that particular input type, the <code>type</code> property will retain the value you set. If your browser doesn’t support that particular input type, it will ignore the value you set and the <code>type</code> property will still be <code>"text"</code>.
<pre><code> return i.type !== "text";</code></pre>
<p>Instead of writing 13 separate functions yourself, you can use <a href="#modernizr">Modernizr</a> to detect support for all the new input types defined in <abbr>HTML5</abbr>. Modernizr reuses a single <code><input></code> element to efficiently detect support for all 13 input types. Then it builds a hash called <code>Modernizr.inputtypes</code>, that contains 13 keys (the <abbr>HTML5</abbr> <code>type</code> attributes) and 13 Boolean values (<code>true</code> if supported, <code>false</code> if not).
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for native date picker
<pre><code>if (<mark>!Modernizr.inputtypes.date</mark>) {
// no native support for <input type="date"> :(
// maybe build one yourself with <a href="http://docs.dojocampus.org/dojox/widget/Calendar">Dojo</a> or <a href="http://jqueryui.com/demos/datepicker/">jQueryUI</a>
}</code></pre>
<p class="a rotatedFloralHeartBullet">
<h2 id="input-placeholder">Placeholder Text</h2>
<form><p class="ss" style="width:261px"><img src="i/www.tjray.info.Mergenthaler.Ad-probably.a.Model.25.ca.1930.png" alt="linotype model 25 - one of the machines that helped create a demand for lorem ipsum placeholder text in exhibiting fonts" width="270" height="316"><br><input placeholder="Your browser supports placeholder text" size="38"></form>
<p>Besides <a href="#input-types">new input types</a>, <abbr>HTML5</abbr> includes several small tweaks to existing forms. One improvement is the ability to set <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute">placeholder text in an input field</a>. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon you click on (or tab to) the input field, the placeholder text disappears. The <a href="forms.html#placeholder">chapter on web forms</a> has screenshots if you’re having trouble visualizing it.
<p>Checking for placeholder support uses <a href="#techniques">detection technique #2</a>. If your browser supports placeholder text in input fields, the <abbr>DOM</abbr> object it creates to represent an <code><input></code> element will have a <code>placeholder</code> property (even if you don’t include a <code>placeholder</code> attribute in your <abbr>HTML</abbr>). If your browser doesn’t support placeholder text, the <abbr>DOM</abbr> object it creates for an <code><input></code> element will not have a <code>placeholder</code> property.
<pre><code>function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}</code></pre>
<p>Instead of writing this function yourself, you can use <a href="#modernizr">Modernizr</a> (1.1 or later) to detect support for placeholder text.
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for placeholder text
<pre><code>if (<mark>Modernizr.input.placeholder</mark>) {
// your placeholder text should already be visible!
} else {
// no placeholder support :(
// fall back to a scripted solution
}</code></pre>
<p class="a rotatedFloralHeartBullet">
<h2 id="input-autofocus">Form Autofocus</h2>
<p class="ss" style="width:188px"><img src="i/openclipart.org_johnny_automatic_angry_guy.png" alt="angry guy with arms up" width="188" height="262"><br><span id="live-input-autofocus"></span>
<p>Web sites can use JavaScript to focus the first input field of a web form automatically. For example, the home page of <a href="http://www.google.com/">Google.com</a> will autofocus the input box so you can type your search keywords without having to position the cursor in the search box. While this is convenient for most people, it can be annoying for power users or people with special needs. If you press the space bar expecting to scroll the page, the page will not scroll because the focus is already in a form input field. (It types a space in the field instead of scrolling.) If you focus a different input field while the page is still loading, the site’s autofocus script may “helpfully” move the focus back to the original input field upon completion, disrupting your flow and causing you to type in the wrong place.
<p>Because the autofocusing is done with JavaScript, it can be tricky to handle all of these edge cases, and there is little recourse for people who don’t want a web page to “steal” the focus.
<p>To solve this problem, <abbr>HTML5</abbr> introduces <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofocusing-a-form-control">an <code>autofocus</code> attribute on all web form controls</a>. The <code>autofocus</code> attribute does exactly what it says on the tin: it moves the focus to a particular input field. But because it’s just markup instead of a script, the behavior will be consistent across all web sites. Also, browser vendors (or extension authors) can offer users a way to disable the autofocusing behavior.
<p>Checking for autofocus support uses <a href="#techniques">detection technique #2</a>. If your browser supports autofocusing web form controls, the <abbr>DOM</abbr> object it creates to represent an <code><input></code> element will have an <code>autofocus</code> property (even if you don’t include the <code>autofocus</code> attribute in your <abbr>HTML</abbr>). If your browser doesn’t support autofocusing web form controls, the <abbr>DOM</abbr> object it creates for an <code><input></code> element will not have an <code>autofocus</code> property. You can detect autofocus support with this function:
<pre><code>function supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in i;
}</code></pre>
<p>Instead of writing this function yourself, you can use <a href="#modernizr">Modernizr</a> (1.1 or later) to detect support for autofocused form fields.
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for autofocus support
<pre><code>if (<mark>Modernizr.input.autofocus</mark>) {
// autofocus works!
} else {
// no autofocus support :(
// fall back to a scripted solution
}</code></pre>
<p class="a rotatedFloralHeartBullet">
<h2 id="microdata">Microdata</h2>
<p class="ss" style="width:305px"><img src="i/openclipart.org_johnny_automatic_divider_cards.png" alt="alphabetized folders" width="305" height="224"><br><span id="live-microdata-api"></span>
<p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata">Microdata</a> is a standardized way to provide additional semantics in your web pages. For example, you can use microdata to declare that a photograph is available under a specific Creative Commons license. As you’ll see in <a href="extensibility.html">the distributed extensibility chapter</a>, you can use microdata to mark up an “About Me” page. Browsers, browser extensions, and search engines can convert your <abbr>HTML5</abbr> microdata markup into a <a href="http://en.wikipedia.org/wiki/VCard">vCard</a>, a standard format for sharing contact information. You can also define your own microdata vocabularies.
<p>The <abbr>HTML5</abbr> microdata standard includes both <abbr>HTML</abbr> markup (primarily for search engines) and a set of <abbr>DOM</abbr> functions (primarily for browsers). There’s no harm in including microdata markup in your web pages. It’s nothing more than a few well-placed attributes, and search engines that don’t understand the microdata attributes will just ignore them. But if you need to access or manipulate microdata through the <abbr>DOM</abbr>, you’ll need to check whether the browser supports the microdata <abbr>DOM</abbr> <abbr>API</abbr>.
<p>Checking for <abbr>HTML5</abbr> microdata <abbr>API</abbr> support uses <a href="#techniques">detection technique #1</a>. If your browser supports the <abbr>HTML5</abbr> microdata <abbr>API</abbr>, there will be a <code>getItems()</code> function on the global <code>document</code> object. If your browser doesn’t support microdata, the <code>getItems()</code> function will be undefined.
<pre><code>function supports_microdata_api() {
return !!document.getItems;
}</code></pre>
<p>Modernizr does not yet support checking for the microdata <abbr>API</abbr>, so you’ll need to use the function like the one listed above.
<p class="a rotatedFloralHeartBullet">
<h2 id="history">History <abbr>API</abbr></h2>
<p class="ss" style="float:left;margin:0 1.75em 1.75em 0;width:218px"><img src="i/openclipart.org_johnny_automatic_demon_reading_Stewart_Orr.png" alt="demon reading book" width="218" height="231"><br><span id="live-history-api"></span>
<p>The <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html"><abbr>HTML5</abbr> history <abbr>API</abbr></a> is a standardized way to manipulate the browser history via script. Part of this <abbr>API</abbr> — navigating the history — has been available in previous versions of <abbr>HTML</abbr>. The new part in <abbr>HTML5</abbr> is a way to add entries to the browser history, and respond when those entries are removed from the stack by the user pressing the browser’s back button. This means that the <abbr>URL</abbr> can continue to do its job as a unique identifier for the current resource, even in script-heavy applications that don’t ever perform a full page refresh.
<p>Checking for <abbr>HTML5</abbr> history <abbr>API</abbr> support uses <a href="#techniques">detection technique #1</a>. If your browser supports the <abbr>HTML5</abbr> history <abbr>API</abbr>, there will be a <code>pushState()</code> function on the global <code>history</code> object. If your browser doesn’t support the history <abbr>API</abbr>, the <code>pushState()</code> function will be undefined.
<pre><code>function supports_history_api() {
return !!(window.history && history.pushState);
}</code></pre>
<p>Instead of writing this function yourself, you can use <a href="#modernizr">Modernizr</a> (1.6 or later) to detect support for the <abbr>HTML5</abbr> history <abbr>API</abbr>.
<p class="legend top" style="padding-left:6em"><span class="arrow anticlockwiseTopSemicircleArrow"></span> check for history <abbr>API</abbr> support
<pre><code>if (<mark>Modernizr.history</mark>) {
// history management works!
} else {
// no history support :(
// fall back to a scripted solution like <a href="https://github.com/balupton/History.js/">History.js</a>
}</code></pre>
<p class="a rotatedFloralHeartBullet">
<h2 id="further-reading">Further Reading</h2>
<p>Specifications and standards:
<ul>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">the <code><canvas></code> element</a>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#video">the <code><video></code> element</a>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attribute"><code><input></code> types</a>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute">the <code><input placeholder></code> attribute</a>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofocusing-a-form-control">the <code><input autofocus></code> attribute</a>
<li><a href="http://dev.w3.org/html5/webstorage/"><abbr>HTML5</abbr> storage</a>
<li><a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">Offline web applications</a>
<li><a href="http://www.w3.org/TR/geolocation-API/">Geolocation <abbr>API</abbr></a>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html">Session history and navigation</a>
</ul>
<p>JavaScript libraries:
<ul>
<li><a href="http://www.modernizr.com/">Modernizr</a>, an <abbr>HTML5</abbr> detection library
<li><a href="http://code.google.com/p/geo-location-javascript/">geo.js</a>, a geolocation <abbr>API</abbr> wrapper
<li><a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills"><abbr>HTML5</abbr> Cross-browser Polyfills</a>
</ul>
<p>Other articles and tutorials:
<ul>
<li><a href="http://camendesign.com/code/video_for_everybody">Video for Everybody!</a>
<li><a href="http://diveintomark.org/tag/give">A gentle introduction to video encoding</a>
<li><a href="http://wiki.whatwg.org/wiki/Video_type_parameters">Video type parameters</a>
<li><a href="everything.html">The All-In-One Almost-Alphabetical Guide to Detecting Everything</a>
<li><a href="http://msdn.microsoft.com/en-us/ie/ff468705.aspx">Internet Explorer 9 Guide for Developers</a>
</ul>
<p class="a rotatedFloralHeartBullet">
<p>This has been “Detecting <abbr>HTML5</abbr> Features.” The <a href="table-of-contents.html">full table of contents</a> has more if you’d like to keep reading.
<div class="pf">
<h4>Did You Know?</h4>
<div class="moneybags">
<blockquote><p>In association with Google Press, O’Reilly is distributing this book in a variety of formats, including paper, ePub, Mobi, and <abbr>DRM</abbr>-free <abbr>PDF</abbr>. The paid edition is called “HTML5: Up & Running,” and it is available now. This chapter is included in the paid edition.
<p>If you liked this chapter and want to show your appreciation, you can <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=0596806027">buy “HTML5: Up & Running” with this affiliate link</a> or <a href="http://oreilly.com/catalog/9780596806033">buy an electronic edition directly from O’Reilly</a>. You’ll get a book, and I’ll get a buck. I do not currently accept direct donations.
</blockquote>
</div>
</div>
<p class="c">Copyright MMIX–MMXI <a href="about.html">Mark Pilgrim</a>
<form action="http://www.google.com/cse"><div><input type="hidden" name="cx" value="017884302975346027366:bgclqh8nvse"><input type="hidden" name="ie" value="UTF-8"><input type="search" name="q" size="25" placeholder="powered by Google™"> <input type="submit" name="sa" value="Search"></div></form>
<script src="j/jquery.js"></script>
<script src="j/modernizr.js"></script>
<script src="j/geo.js"></script>
<script src="j/dih5.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
function supports(bool, suffix) {
var s = "Your browser ";
if (bool) {
s += "supports " + suffix + ".";
} else {
s += "does not support " + suffix + ". :(";
}
return s;
}
function I_CAN_HAS(result) {
if (result == "probably") {
return "can play";
}
if (result == "maybe") {
return "isn't sure if it can play";
}
return "can't play";
}
function lookup_location() {
geo_position_js.getCurrentPosition(show_map, show_map_error);
}
function show_map(loc) {
$("#geo-wrapper").css({'width':'320px','height':'350px'});
var map = new google.maps.Map(document.getElementById("geo-wrapper"), {zoom: 14, mapTypeControl:true, zoomControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP});
var center = new google.maps.LatLng(loc.coords.latitude,loc.coords.longitude);
map.setCenter(center);
var marker = new google.maps.Marker({map: map, position: center, draggable: false, title: "You are here (more or less)"});
}
function show_map_error() {
$("#live-geolocation").html('Unable to determine your location.');
}
$(function() {
$("#live-canvas").html(supports(Modernizr.canvas, "the canvas API"));
$("#live-canvas-text").html(supports(Modernizr.canvastext, "the canvas text API"));
$("#live-video").html(supports(Modernizr.video, "HTML5 video"));
if (Modernizr.video) {
var ogg = Modernizr.video.ogg;
var h264 = Modernizr.video.h264;
var webm = Modernizr.video.webm;
var vf = "Your browser ";
if ((ogg == "probably") && (h264 == "probably")) {
vf += "can play both Ogg Theora and H.264";
} else if (((ogg == "") || (ogg == "no")) && (h264 == "probably")) {
vf += "can play H.264 video, but not Ogg Theora";
} else if (((h264 == "") || (h264 == "no")) && (ogg == "probably")) {
vf += "can play Ogg Theora video, but not H.264";
} else {
vf += I_CAN_HAS(ogg) + " Ogg Theora video. Your browser " + I_CAN_HAS(h264) + " H.264";
}
vf += " video.";
if (webm) {
vf += " Hey, you can play WebM video, too!";
}
$("#live-video-formats").html(vf);
} else {
$("#live-video-formats").html(supports(Modernizr.video, "any video formats"));
}
var localstorage = false;
try {
localstorage = Modernizr.localstorage;
} catch(e) {}
$("#live-storage").html(supports(localstorage, "HTML5 storage"));
$("#live-web-workers").html(supports(Modernizr.webworkers, "web workers"));
$("#live-offline").html(supports(Modernizr.applicationcache, "offline web applications"));
if (geo_position_js.init()) {
$("#live-geolocation").html(supports(true, "geolocation") + ' <a href="#" onclick="lookup_location();return false">Click to look up your location</a>.');
} else {
$("#live-geolocation").html(supports(false, "geolocation"));
}
var supported_input_types = '';
for (var itype in Modernizr.inputtypes) {
if (Modernizr.inputtypes[itype]) {
supported_input_types += '<code>' + itype + '</code>, ';
}
}
if (!!supported_input_types) {
$("#live-input-types").html('Your browser supports the following HTML5 input types: ' + supported_input_types.replace(/, $/, ''));
} else {
$("#live-input-types").html('Your browser does not support any HTML5 input types.');
}
$("#live-input-autofocus").html(supports(!!("autofocus" in document.createElement("input")), "form autofocus"));
$("#live-microdata-api").html(supports(!!document.getItems, "the HTML5 microdata API"));
$("#live-history-api").html(supports(!!Modernizr.history, "the HTML5 history API"));
});
</script>