Html5. Разработка Приложений Для Мобильных Устройств

.
HTML5.
OReilly
. , .

.
.
.
.
.
.
32.988.02-018
004.438.5
26 HTML5. . .: ,
2015. 480 .: . ( OReilly).

ISBN 978-5-496-01125-9
.
-
HTML5 CSS3. , -,
iOS, Android, Blackberry Windows Phone,
.
. HTML5 , -,
(SVG), (Canvas), localStorage API. ,
CSS3. , , .
12+ ( 29 2010 . 436-.)

ISBN 978-1449311414 .

ISBN 978-5-496-01125-9

Authorized Russian translation of the English edition Mobile HTML5

(ISBN 9781449311414) 2014 Estelle Weyl. This translation is published and sold
by permission of OReilly Media, Inc., the owner of all rights to publish and sell the
same.
, 2015
, , 2015
OReilly. .

.
, , , . , ,

, .
, 192102, -, . (. ), 3, , . 7.
005-93, 2; 95 3005 .
27.08.14. 70100/16. . . . 38,700. 1000. 0000.

. 180004, , . , 34.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
1. API HTML5,
CSS3 JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2. HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
3. , HTML5. . . . . . . . . . . . . . . . . . . . . . . . . 93
4. - HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
5. , , . . . . . . . . . 168
6. API HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
7. CSS3. . . . . . . . . . 229
8. CSS3. . . . . . . . . 277
9. CSS3: , . . . . . . . . . . . . . . . . . . . . . . . . . 296
10. CSS3: , . . . . . . . . . . . . . . . . . . 342
11. CSS - . . . . . . . . . . . 378
12. . . . . . . . . . . . . . . . 405
13. . . . . . . . . . . . . . . . . 427
14. . . . . . . . . . . . . . . . . . . . . .444
. CSS- . . . . . . . . . . . . . . . . . . . 471

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
( Internet Explorer) . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
- .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
SDK. . . . . . . . . . . . . .
? API. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
- . . . . . . . . . . . . . . . . . . . .
API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
,
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
, . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 17
. . . . . 19
. . . . . 20
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
20
21
23
23
24
24
24
24
25
25
25
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
26
27
27
28
29
30
30
31
31
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
1. API HTML5,
CSS3 JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
CubeeDoo: HTML5 . . . . . . . . . . . . . . . . . . 36
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
-. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
. . . . . . . . . . . . . . . . . . . . . . . . . . . 55
2. HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
. . . . . . . . . . . 59
HTML 4, HTML5. . . . . . . . . . . 62
HTML5:
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
, <head>. . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
<meta>: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
,
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
<base> - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
<link>
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
3. , HTML5. . . . . . . . . . . . . . . . . . . . . . . . . 93
HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
<section> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
<article>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
<section> <article> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
<nav>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
<aside>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
<header> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
<footer> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
CubeeDoo. . . . . . . . . . 100
<address>: , . . . . . .101
: HTML5. . . . . . . . . . 101
<main>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
<figure> <figcaption>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
<hr>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
<li> <ol>. . . . . . . . . . . . . . . . . . 103
, HTML5. . . . . . . 103
<mark>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
<time> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
<rp>, <rt> <ruby>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
<bdi> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
<wbr>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
, . . . . 107
- . . . . . . . . . . . . . . . . . . . . . 108
HTML 4. . . . . . . . . . 109
, . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
<iframe>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
<img>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
<object>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
<param>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
<area> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
<embed>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
<details> <summary>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
<menu> <menuitem>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
XHTML HTML5, . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
4. - HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
<input> ( ). . . . . . . . . . . . . . . . . . . . . . . 120
type. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
required. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
: min max. . . . . . 122
step. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
placeholder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
pattern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
readonly. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
disabled. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
maxlength . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
size. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
autocompletion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
autofocus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<input> . . . . . . . . . . . . . . . . . . . . . . . . .
.
: <input type="text">. . . . . . . . . . . . . . . . . . . . . . . . . . . .
: <input type="password"> . . . . . . . . . . . . . . . . . . . . . .
: <input type="checkbox">. . . . . . . . . . . . . . . . . . . . . .
: <input type="radio"> . . . . . . . . . . . . . . . . . . .
: <input type="submit">. . . . . . . . . . . . . . . . .
: <input type="reset">. . . . . . . . . . . . . . . . . . . . . . . . . . .
: <input type="file">. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: <input type="hidden">. . . . . . . . . . . . . . . .
: <input type="image"> . . . . . . . . . . . . . . . . . . . .
: <input type="button">. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
<input>. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: <input type="email"> . . . . . . . . . . . . . . . .
URL: <input type="url">. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: <input type="tel"> . . . . . . . . . . . . . . . . . .
: <input type="number"> . . . . . . . . . . . . . . . . . . . . . . . .
: <input type="range"> . . . . . . . . . . . . . . . . . . . . . . .
: <input type="search"> . . . . . . . . . . . . . . . . .
: <input type="color">. . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
: <input type="date">. . . . . . . . . . . . . . . . . . . . . . . . . . . .
: <input type="datetime"> . . . . . . . . . . . . . . . . . .
:
<input type="datetime-local">. . . . . . . . . . . . . . . . . . . . . . . . . .
: <input type="month"> . . . . . . . . . . . . . . . . . . . . . . . . .
: <input type="time">. . . . . . . . . . . . . . . . . . . . . . . . . . .
: <input type="week"> . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . .
. . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
126
127
127
128
128
129
130
130
130
131
132
132
133
134
136
136
137
138
138
138
139
140
140
142
143
146
147
147
149
149
151
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
151
151
152
152
153
157
158
10
. . . . . . . . . . . . .
<datalist> list.
<output>. . . . . . . . . . . .
<meter> . . . . . . . . . . . . . . . . . . .
<progress> . . . . . . . . . . . . . . . . .
<keygen> . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . .
<form>. . . . . . . . . . . . . . . . . . . .
<fieldset> <legend> . . . . . . . . .
<select>, <option>, <optgroup>. .
<textarea>. . . . . . . . . . . . . . . . . .
<button>. . . . . . . . . . . . . . . . . . .
<label>. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
159
159
162
163
164
165
165
166
166
166
166
167
167
167
5. , , . . . . . . . . . 168
API HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . .
SVG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
SVG . . . . . . . . . . . . . . . . . . . . . . . .
: SVG
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CubeeDoo. . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . .
/. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<video> . . . . . . . . . . . . . . . . . . . . .
<video> <audio> . . . . . . . . . . . . . . . . . . .
, JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . 168
. . . 169
. . . 171
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
172
174
174
177
181
183
183
184
185
189
191
6. API HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

-, . . . .
?.
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . .
SQL/ . . . . .
. . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
194
194
195
200
210
215
216
11
-. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . .
- (ARIA). .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
219
221
224
225
228
7. CSS3. . . . . . . . . . 229
CSS: . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
:
<link> . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS. . . . . . . . . . . . .
CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
CSS3. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
: ,
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
n- . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: DOM-. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 230
. . . . . . . 231
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
233
235
238
243
244
245
246
246
247
248
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
249
253
259
263
263
264
268
270
273
276
8. CSS3. . . . . . . . . 277
CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
rgb(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
RGBA. .
, , : HSL() . . . . . . . . . . . . . . .
CMYK. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
277
278
280
280
281
282
283
12
CurrentColor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
, CSS. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
, . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
283
284
287
287
289
290
292
292
. . . . . . . . . . 293
. . . . . . . . . . 295
9. CSS3: , . . . . . . . . . . . . . . . . . . . . . . . . . 296
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-color. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-width. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
box-sizing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-radius
iPhone CubeeDoo. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
background-size. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
width, overflow text-overflow. .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
: CubeeDoo . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
297
298
299
299
300
301
302
303
304
.
.
.
.
.
.
.
.
.
.
.
.
.
306
308
309
309
310
319
323
325
329
330
332
334
337
10. CSS3: , . . . . . . . . . . . . . . . . . . 342

CSS-. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
transition-property. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
13
transition-duration . . . . . . . . . . . . . . . .
transition-timing-function . . . . . . . . . . .
transition-delay . . . . . . . . . . . . . . . . . .
transition . . . . .
. . . . . . . . . . . . . . . . .
CSS3-. . . . . . . . . . . . . . . . . . . . . . . . .
transform-origin. . . . . . . . . . . . . . . . . .
transform. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . .
3D-. . . . . . . . . . . . . . .
3D-. .
. . . . . . . . . . . . . . . . . . . . . .
CSS3-. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
, . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
347
348
349
350
351
353
353
355
359
360
361
363
364
367
369
376
11. CSS - . . . . . . . . . . . 378

, . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-image-source. . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-image-slice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-image-width. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-image-outset. . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-image-repeat. . . . . . . . . . . . . . . . . . . . . . . . . . . .
border-image. . . . . . . . .
flexbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
@supports . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
CSS-:
JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
378
379
382
384
384
385
386
387
388
389
392
394
396
397
. . . . . . . . . . 403
. . . . . . . . . . 404
12. . . . . . . . . . . . . . . . 405
, . . . . . . . . . . . . . 406
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
: . . . . . . . . . . . . . . 409
14
: . . . . . . . . . . . . . . . . 410
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411
?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
: . . . . . . . . . . . . . . . . . . . . . . . 413
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
WebKit- . . . . . . . . . . . . . . . 418
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
. . . . . . . . . . . . . . . . . . . . . . . . . . . 424
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
. . . . . . . . . . . . . . . . . . . 425
13. . . . . . . . . . . . . . . . . 427
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
, . . . . . . . . . . . . . . . . . . . . . . . . . . 430
- -- . . . . . . . . . . . . . . . . . 433
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
. . . . . . . . . . . . . . . . . . . . 437
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
-, . . . . 440
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
14. . . . . . . . . . . . . . . . . . . . . .444
. . . . . . . . . . . . . . . . . . . . . . . 444
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
JPEG-. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . 446
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
15
HTTP-. .
. . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . .
. .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
452
455
456
461
462
468
468
469
470
. CSS- . . . . . . . . . . . . . . . . . . . 471
CSS- 3. . . . . . .
CSS . . . .
CSS-. .
CSS- 4. . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
471
475
476
476

-.
.
, Android, iPod, iPhone, BlackBerry,
. 1 ,
(SDK) iOS Android.
.
- -,
, -,
, . - , , HTML, CSS JavaScript. ,
, - , .

HTML5, CSS3 JavaScript, -,
.
- ,
, , ,
.
,
Apple App Store Google Play.
, .
, , HTML52, CSS3 JavaScript.
,
.
.
, , , iPhone, iPad Android,
, Firefox OS Windows Phone, , 1
, , . . .
HTML5 , HTML: The
Living Standard. . .
17
. , , Wii. ,
,
,
. , -.
, ,
.
- -.
.
iPhone , ,
(SVG).
Safari 4.0, ,
- ( web workers). , 2009,
iPhone,
Chrome, Opera, Firefox, Internet Explorer Android.
,
HTML, CSS, DOM ( ), SVG ( ) XHR.
HTML5 CSS3.
-, , , .

-
, iPhone App
Store. . Android Google Play, Amazon, .
-
1, 2, .
. ,
,
, ,
1
Apple . . . ,
, , ,
? . .
Apple .
App Store , . . .
18
- .
-, .
- ,
, , .
, iPhone
. , - ,
. -, CSS3
HTML5, , , , , . -
.

,
,
App Store.
, iTunes. .
. , iPhone ,
Bump, Twitterific Gowalla. ,
iPhone. , .
- HTML5,
.
,
.
6, .
- HTML5
HTML CSS, .
,
, . ,
!
, HTML CSS,
- .
iPhone iPod touch, iPhone , , iPad,
Windows, Blackberry Android.
Android Android,
iOS. GoogleTV
iOS .. , ,
HTML5/CSS3, WebKit,
19
IE10, Blink, Opera Mobile ( mini), Firefox. ,

,
, HTML5 CSS3.
-, HTML5 CSS3,
. HTML5 CSS3 Internet Explorer8 , Internet Explorer9 . Internet
Explorer10 , .
2008
iPhone (iPhone SDK), , iPhone,
. SDK -.
-
, HTML5 . API HTML5, , -.
, ! iPhone, iPod iPad Flash
. iOS
Safari WebKit, HTML- <video>.
5.
( Internet Explorer)

. . -
.
,
Internet Explorer. , . HTML5 CSS3
, IE 6, 7 8?
,
.
!
-
Internet Explorer 68,
- - - . IE6 IE7, ,
. , , , ,
. , ,
- .
20
, HTML5 CSS3
. : , X?.
: , !. . . - , . , , ,
-.

Safari, Chrome, Firefox, Opera IE10
-. HTML4.01, XHTML HTML5. CSS2.1 , CSS3 .
JavaScript, AJAX.
(DOM) 2. Windows ,
HTML5. , 2010 ,
Windows Phone? 2012, , - Windows, : .
Windows .
Windows Mobile,
, Windows Phone.
. -.
, , . ,
( )
. , . ,
, .
-
.
iPhone (
2007), - iPhoneDevCamp.
iPhone SDK ( ) . ,
iPhone, -.
iPhone ,
, .
21
EDGE,
. , iPhone
. 10
, 10 10 JavaScript.
iPhoneDevCamp
, iPhone
( -).
onOrientationChange. , . CSS
JavaScript .
iPhone iUI.
JavaScript CSS iPhone.
. ,
Tilt. iPhone, , .
iPhone Bingo iPhone,
JavaScript. , , AJAX- ( -)
Twitter
.
. :
, , CSS3,
. ,
.
iPhone - , Apple. Apple iOS
. ,
Apple , iPhone . Safari
iPhone WebKit iPhone, - iPhone .
iOS - (SDK).
SDK.
SDK iPhone 6 2008. ( Apple) iPhone, iPod touch,
iPad. 2008 App Store. C
22
( SDK App Store),

, iPhone.
, SDK ,
iPhone, ,
, ! 2008 -
, -.
.
2008. -
Safari iPhone 10 .
-, .
CSS3 HTML5
Safari iPhone, .
2008.
Xcode.
App Store.
2013 . -
. .
2013 . -
(
, ).
HTML CSS (-
,
).
, .
-.
2013. iPhone
,
App Store, .
, , , -
.
App Store
$99, , Apple 30%- .

, ( HTML5 ).
? API
23
? API
HTML51 .
2004 , Web Applications1.0.
,
( ).
Safari, Chrome, Internet Explorer 10+, Firefox Opera. IE8
. IE9 HTML5,
. , HTML5, WebKit/Blink,
Opera Mobile2, Firefox OS Windows Phone. ,
HTML5.
HTML5 , -API.
(, ) HTML5, () .
HTML5 API, , .
HTML5 API,
, .
, ,
.
.

HTML5 ,
.
, .. , <div> <span>,
.
3.
1
HTML5 .
HTML5 .
NEWT (New Exciting Web Technologies -). , -
NEWT . . .
Opera Mini HTML5 .
, -, . Opera Mini -
Opera,
. .
-,
, . . .
24
-
.
(), , , ,
, . HTML5
, JavaScript!
HTML5
.
4 .
, ,
. , ,
, ,
.
JavaScript!

HTML5, . HTML <svg> <canvas>,
CSS . ,
, .
<svg> <canvas> 5.

( )
. HTML5
.
! HTML5
webM mp4. ,
, ,
. CSS -.
iOS Flash Silverlight,
, HTML5. <video> <audio> 5.
API
HTML5,
API , .
. API
6.
CSS
25
-
: .
. API HTML5,
-, . API, ,
6.
API
6 , ARIA (
) -. ,
- -.
. , . ARIA ( Accessible Rich Internet
Applications -)
, . , ,
. , ( ) . , -. -
JavaScript.
, JavaScript,
. , 6 !
CSS
(CSS)
. CSS3, 3,
,
. .
.
-. CSS3 -
RGBA HSLA, 8. , , 9 10.
CSS3, :
;
;
;
3D-;
;
26
background-size;
border-image;
border-radius;
box-shadow;
text-shadow;
opacity;
animation;
columns;
text-overflow.
-. -
-, . -
. , iPhone . @font-face,
, Helvetica, Roboto
, .
,
. 11 , .
,

, . ,
: , , . .
- .
, ,
. ,
,
, .

, ,
.
,
Wi-Fi . , -
27
. ,
. , ,
JavaScript .
11 -. 12 , .
13. , 14.

, -, .
, 12. - , ,
, CSS2, - . , .
!

. WebKit HTML5 Android, iPhone, OpenMoko Blackberry, .
Blackberry, Android iOS, WebKit
Bolt, Dolphin, Ozone Skyfire.
Firefox, Opera IE. ,
, -
Opera, Presto. Opera Chrome Blink.
,
, , .

, Internet Explorer
, . Internet Explorer CSS3.
, CSS2.
: ! . ,
, .
, HTML- CSS-
.
28
HTML CSS .
.
. , , .
: , ,

.
- .

. ,
.

, . -,
.

, , - . , , . , ,
,
,
5.
, , , .
- , , -
.
, , ,
.
, ,
, ,
. , , iPhone .
- . ,
, . ,

,
.
29
.
, . , . .
13.
, . ,
, . ,
.
, - . , ,
. ,
.

1 , .
26 , HTML5. , , .
HTML5, Web Forms2.0,
API HTML5 API , . , (SVG),
, -, , , AppCache,
-.
711 , CSS3 . , , ,
, . -, , . 11 -.
1214 :
, , , . , , , - .
,
. ,
. , . , , .
, .
30
URL, , .

: ,
, , , ,
..

, .

, ,
.
, .

http://www.standardista.com/mobile. , , , .
, . ,
, , .
, . ,
- , . , OReilly
, .
, ,
, . ,
.
31

, , :
OReilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
(800) 998-99-38 ( )
(707) 829-05-15 ( )
(707) 829-01-04 ()
, , , , , .
HTML5,
Introducing HTML51. www.HTML5Doc
tor.com W3C,
- .
- Opera ,
- , ,
300 (www.opera.com).
Twitter @brucel, www.brucelawson.co.uk.
CubeeDoo.
Cerebral Interactive,
- . 2001, 2006- -. ,
IT- ,

. Twitter: @cereb
ralideas www.cix.io.
OOCSS (- )
Sass. FormFace,
HTML5.
Wufoo
. ,
.
Twitter @seetroughtrees http://seethroughtrees.github.io.
1
., . HTML5. .: , 2011. . .
32
, ,
, . 1996
-. 2000
-, - . Twitter @msjen
http://blackphoebe.com/msjen.
, ,
, .
, , Yahoo!, Mobile webOS Palm Nokia, W3C
HTML5. Twitter @girlie_mac, http://girliemac.com.
HTML5 Microsoft, JavaScript/HTML5. -. , JavaScript. ,
HTML5 Hacks, OReilly, -
htmlhacks5.com. .
Twitter @boyofgreen.

, vinitski@minsk.piter.com ( , ).
!
http://www.piter.com
.

API
HTML5,
CSS3 JavaScript
,
Internet Explorer. .

1. , IE6 .
IE6 ,
.
,
-, . ,
-. , . ,
LocalStorage, . ,
LocalStorage,
. LocalStorage, .
LocalStorage,
.

.
( ), , , .
. .
, , ,
,
1
2001, IE6, . , .
. .
1. API HTML5, CSS3 JavaScript
35
. , , ,
- .
:
,
, , .
, ,
, . , .
,
.

, . , .
, , ,
, -
JavaScript.
JavaScript ( JavaScript ). JavaScript ,
. ,
, :
- ?
, .
!
, .
,
. , ,
, , , . , , ,
.
.
, API JavaScript,
HTML5, (
JavaScript ),
, . . ,
, , .
HTML5, CSS3 API JavaScript,
. .
36
CubeeDoo:
HTML5
HTML5 CSS3, -
, ,
.
CSS3 - Pickleview. ,
Twitter. 2007, ,
iPhone. Safari iPhone ( ,
Opera). , , IE6, IE7 Firefox2 (
Chrome ). , 2007.
2010 ,
HTML5 CSS3. , ,
,
Chrome 12 , Safari 3.1 .

, HTML5, CSS3
JavaScript. ,
. 2010
,
2007. ( IE) .
2013 HTML5 CSS3.
,
, IE9 . IE6.
, ,
Android 2.3.
Android 2.3 .
HTML5, CSS3, API JavaScript, . ,
. , , , .
.1.1 CubeeDoo. , . , , iPhone.
HTML5. , ,
. CSS-, , , CSS.
CubeeDoo: HTML5
37
, JSON, , webSQL,
LocalStorage SessionStorage, , HTML5, , URI .
. 1.1. CubeeDoo
- .
, () JavaScript, HTML5
CSS. API, . , , ,
, , ,
. , .
CSS3, HTML5 API. , . , .
. - ,
, .
, ,
,
Internet Explorer.
,
. , , , , ,
38
,
.
. ,
. .
, , ,
(IDE) .

, .
, : !
, ,
.
(, ).

,
(IDE).
, , ,
. , IDE (
). ,
(FTP), . IDE .
, .
Sublime Text, TextMate, Dreamweaver, Eclipse,
WebStorm IDE. , . , IDE, ,
.
IDE . IDE
.
. Chrome Canary
- Google Chrome. ,
. ,
Canary .
, .
Apple, iPhone, iPad iPod touch. Windows8,
39
, Metro. !
.
.
Windows, UNIX, Android, Mac-.
- IDE
.
.
. , , JavaScript,
, API.
, .
,
.
, Windows Phone,
Internet Explorer. Safari Google Chrome Android, Bada, BlackBerry
iOS. Gecko Firefox.
,
Presto, Opera. Opera 14 Chromium, Opera Chrome Blink1,
, , .
Mac, Safari ( ).
Windows, Internet Explorer. Unix, Chrome, Firefox Opera.
Chrome Canary, Aurora, Opera Next
WebKit Nightly, .
, , .

. ,
, , .
(DOM), JavaScript, CSS, ,
- - .
1
Blink WebCore WebKit, 147503. Chrome, 28, Ope

ra 15, , Chromium.
40
, , , -, . .
. , ,
.

, , , Firebug1, F12, Web Inspector / DragonFly. Firebug
Mozilla. F12, Web Inspector DragonFly
Internet Explorer, Chrome/Safari Opera. , HTML, CSS, DOM JavaScript,
, , HTTP-, ,
.
Firebug getFirebug.com. Safari
Develop (). , PreferencesAdvanced ()
Show develop menu in menu bar (
). Chrome :
.
Chrome, Safari, Firebug Opera , Command+Option+I Control+I.
Firebug F12, F12.
CSS, JavaScript HTML.
Web Inspector, Error
Console ( ) User Agent switcher. - CSS, HTML JavaScript, DOM, . , Web Inspector, Firebug, DragonFly,
F12 Developer Tools ( ) Chrome
- ,
. .
, , . ,
, , ,
1
Firefox , - Firebug Firefox.
41
. , .
Timeline () 14.
.
,
. ,
,
.
. ,
, -,
. , , ,
.
,
. Overrides ( ) Settings
() Developer Tools ( ) Chrome (.1.2)
. Web Inspector,
.
User Agent ( ),
Chrome ,
. , .
,
(
). , . . ScreenQueri.es
, . , thumbs.js , TouchEvent.
Developer Tools ( ) Chrome
. ,
.
(
), . , , .
.
42
. 1.2. Overrides ( ) (Settings)

Developer Tools ( ) Chrome

,
.
,
. , ,
HTML CSS, , .
Opera . ,
, , 2008 Opera Opera DragonFly,
Opera . Opera HTML CSS, , , ,
DragonFly .
43
WebKit
USB- Android, 4, iOS, 6. Chrome,
, , :
chrome.exe --remote-debugging-port=9222 --user-data-dir=remote-profile
/Applications/Chromium.app/Contents/MacOS/Chromium --remote-debugging-port=9222
Firefox Firebug Debug ( Crossfire).

, .
,
(Remote Debugging Protocol),
.
Android
Android (Android SDK)
API , ,
Android.
- , SDK (.1.3).
. 1.3. Android 4.2.2, OS X
44
SDK http://developer.android.com/sdk/index.html.
Android (ADB), , , .
tool android
ADB. ADB . ,
, UNIX.
.
ADB-.
Chrome, ADB- . SDK .
tools Monitor,
Android (Android Debug Monitor). , , , console.log(),
. ,
.1.4 . .
. 1.4. Android
, Window ()
Android (Android Virtual Device Manager) (.1.5).
- ,
.1.3.
weinre
, web inspector remote
-. weinre ,
JavaScript, HTML CSS.
45
. 1.5. Android ,

. ,

PhoneGap, debug.phonegap.com. , weinre

Adobe Edge Inspect, .
weinre ,
, , WebKit. weinre Node.js
WebSockets1.
weinre . , JavaScript,
1
Java. WebSockets
CORS, JSON XHR.
46
.
, JavaScript , , .
weinre
weinre Java JavaScript.
JavaScript, Node.js, npm, Node. :
npm -ginstall weinre
weinre, :
weinre
weinre localhost:8080,
Control+C, , - .
, weinre:
<script src="http://localhost:8080/target/target-script-min.js#anonymous">
</script>
WebKit http://localhost:8080/
client/#anonymous, .
, Chrome,
.
Remote ( )
, ,
weinre. Elements (), Resources (), Network (), Timeline
() Console () (.1.6) -
. , Sources
(), Profiles () Audit (),
.
Adobe Edge Inspect Ghostlab

Adobe Edge Inspect ,
weinre. , (
),
. Adobe Edge Inspect weinre.
: , URL
.
Adobe Edge Inspect ,
,
Chrome. ,
.
47
. 1.6. weinre
Edge
.
Edge. Edge , Adobe.
,
Edge (.1.7). .
, Edge.
,
. ,
, , ,
.

,
- . ,
Chrome, , Edge Inspect.
- , Chrome .
Chrome Adobe Edge Inspect,
<> , .
weinre , Remote ( ) weinre. .1.6 .
Adobe Edge Inspect
, .
, .
, .
48
. 1.7. Adobe Edge Inspect Nexus 7 Google Chrome
Mac , , Ghostlab. ,
, Ghostlab:
,
Adobe Edge .
JavaScript Aardwolf
JavaScript,
Aardwolf. JavaScript, . Aardwolf :
. weinre
( , weinre Node.js),
Aardwolf XHR .
Aardwolf . , .
BlackBerry 10
, weinre , BlackBerry 10
.
BlackBerry (BlackBerry Browser), weinre,
- - . Black
Berry Browser weinre ,
-. - HTTP,
USB- Wi-Fi.
. Wi-Fi
WebKit, IP- , BlackBerry ( ).
.
49

BlackBerry. - ,
IP- , .
- BlackBerry 10 ,
.
. , Developer Tools ( ).
-. ,
OptionsPrivacy & Secrity ( ). IP- .
.
, , . Back (),
. BlackBerry .

. , , ,
. .
. ,
, .
. ,
, ,
, .

, ()
( ) .
.
,
.
.
, . ,
. ,
.
50
.
.
,
. ,
, . , iOS iPhone, iPad.
.
, .
, .
,
,
, . ,
(
), .
,
SDK . ,
. ,
.
Android. Android
Windows, Mac OS XLinux. SDK.

SDK http://developer.android.com. Android, SDK,
Android. Android Mac/
Linux Setup.exe SDK Windows.
Android
. Android (Android Virtual Device Manager) Edit () (. .1.5).
, New ()
(Device RAM)
Property ().
iOS. Mac OS X. -
, , , Mobile Safari.
, iPhone SDK 2,
.
, . . , , .
51
, , , iPhoney iPadPeek
. , .
BlackBerry. BlackBerry
Windows -, Eclipse Visual Studio

( -) , , .
Windows Phone.
Windows. Windows Phone , Windows Phone.

Windows Phone (Windows Phone SDK) http://dev.win
dowsphone.com/en-us/downloadsdk.
http://www.microsoft.com/en-us/download/deta
ils.aspx?id=35471.
Visual Studio WVGA
512. Windows Phone8,
.
Firefox OS. Firefox. -
, Firefox OS,
. , Firefox
Web DeveloperFirefox OS Simulator (-
Firefox OS).
Opera Mobile. Opera Mobile
Windows, Mac Linux http://www.opera.com/ru/developer.
Opera Mini. Opera Mini, -
, Java http://www.opera.com/ru/mobile.
.
, Symbian WebOS,
SDK, . . , .
http://www.mobilexweb.com/emulators.
-
,
, http://
www.quirksmode.org/m/tests/widthtest.html.
W3C mobileOK Checker , .
52
,
, . MobiReady , W3C MobileOK Checker. , .
Firefox, Modify Headers,
-, HTTP- .
HTTP-, , , .
.
. , , ,
, .
, , ,
, .
,
HTML5, CSS3 JavaScript.
. , ,
, . . , Wi-Fi,
3G, 4G EDGE. , ,
, .

, . ,
- .
, .

, ,
, , , . ,
,
. ,
, .
, DeviceAnywhere Nokia Remote Access. , . -
53
, , .
, .
iOS
iOS,
, .
iOS
. , Craigslist eBay, .
1,8% iOS ( 0,13%
) iOS4.3 , 12,5% iOS (0,93% ) iOS 5.
, :
. , . ,
, iPad iPod touch.
, ,
Opera Mini. iTunes .
iOS , . , .
Android
Android ,
. Android
, .
( ) Android.

. Android2.3
, - .
Android. 34% Android, 2,3% 1.

Android ,
, , . Android
, Chrome, Opera Mini, Opera
Mobile, Firefox Mobile, Dolphin Mini Dolphin HD.
1
(. http://developer.android.com/about/
dashboards/index.html). . .
54
Windows
Windows,
. Win
dows Phone 7 , Win
dows Phone 8 .
Metro.
( , ),
Windows. , Android iOS.
, , , Windows.
BlackBerry
, BlackBerry10 ,
,
.
BlackBerry,
, BlackBerry10.
BB6 BB7. , , ,
.
BlackBerry 6 WebKit. ,
. ,

BB5 , BlackBerry.
Nokia
Symbian, Lumia Windows
Phone.
Symbian, Series 40, Samsung Sony Mobile Motorolla , Android, iOS, BlackBerry
Windows. , . ,
Nokia ,
Symbian .
Nokia .
,
.
Kindle
Kindle. Silk,
WebKit.
55
WebOS
WebOS , -
. PalmPre Pixi $30.

, , . -
, , ,
, . ,
, .
, , Adobe Edge.
- .
, , .
. JavaScript.
Jasmine JavaScript,
. PhantomJS ,
, WebKit1. ,
PhantomJS
-. , DOM ( ), CSS- JSON. PhantomJS
.
PhantomJS , CasperJS. AJAX-
Sinon.JS.
,
WebKit. , .
. ,
SauceLabs, , .
, , .
, .
. . .

HTML5
HTML, . , , . , , ,
, HTML, , ,
() HTML, , .
HTML5.
, HTML5. ,
HTML.
HTML, HTML5
. ,
. . , HTML5,
, , , ,
- .
, , , , ,
HTML , . HTML,
, .
. HTML
,
. ,
. ,
, .
, :
HTML5, HTML 5.
? - ! , !
HTML5
HTML5 HTML 4 XHTML. ,
, HTML5.
. , HTML 4 XHTML,
HTML5
57
HTML51. HTML XHTML , . (doctype),

HTML 4.01 XHTML, <!DOCTYPE html>
HTML5. .
HTML5 HTML4 XHTML .
, , , -
.
HTML5 , -: -
, ID ,
,
, .
HTML5 ,
. ,
,
, , , . HTML5 ,
() . , HTML5
.
DOM,
, .
, . ,
, ,
. ,
. , , . , .
- . , , ( ).
.
, (, ,
meta-), .
, - ( ) (.2.1). ,
- , .
1
. http://www.w3.org/TR/html5-diff/.
.
58
2. HTML5
XHTML-, . ,
<img> <input>.
. 2.1.
HTML
.
, / . () () , .
CSS ,
, .
( : - . HTML5 , .)
HTML5
. . HTML5 , , , , ,
.
. ,
.
, ,
.
, . .
.
. href.
<a> (..2.1). , /,
HTML5
59
1. .
, .
,
HTML-. -, () , - , .
. 3 , ,
.
HTML5 , . id , class , title , style , lang dir -

. HTML5 accesskey, hidden tabindex.
:
contenteditable, contextmenu, spellcheck, draggable dropzone. .
, WIA-ARIA, aria-, .
, . data-*, (*) , . data- HTML5 ,
HTML. data-* data-* .
(ARIA) 6.
id
id .
id,
id. HTML5 id .
. id AZ az,
(AZ, az), (09), (-), (_),
(:) (.).
1
,
: . XHTML
readonly="readonly", checked="checked" disabled="disabled". HTML5
() : readonly, checked, disabled.
60
2. HTML5
.
.
id.
, ,
, .
<label>,
for id .
: id , .
id 4.
, id JavaScript,
. id CSS
. id ,
.
id - ,
id .
6. : ,
CSS3, id-.
class
class , . class ,
.
id, ( )
. -,
.
CSS
class . (
6):
<ahref="http://google.com" class="external popup search"> </a>
title
title , .
title ,
, , title .
title, . title .
HTML5
61
, title . , ,
<abbr>, title . title .
title , , . ,
. , CSS
title . title ::before ::after.
, title
. .
, , . title,
. title
- JavaScript
! rel title ( ).
,
data-*
HTML5: .
style
style ()
.
. , ,
, -
!
: , Web Inspector Safari Chrome, Firebug Firefox, DragonFly
Opera F12 IE, , JavaScript
,
style. .
, .
lang
lang
( dir). lang, <html>,
-. HTTP- Content-Language httpequiv="language".
62
2. HTML5
lang -
, , . ,
, -,
lang.
lang
. , .
lang ,
. <q>
, , lang. .
dir
lang.
, ,
. dir ltr
( ). - , dir <html>.
() , ,
dir. ,
title lang ,
dir. , dir
( ). lang
, .
, . title , . -
, Google!
: HTML5 dir , auto. , rtl, ltr auto.
HTML 4,
HTML5
()
(X)HTML . , HTML5 . .
HTML5
63
tabindex
tabindex
, .
, . HTML5
tabindex
HTML-.

. , . , , .
Tab, .
().
, , , . , Next ()
.
.
, Next
() Tab ,
tabindex.
HTML5 tabindex

. .
, tabindex , tabindex. tabindex,
.
tabindex , tabindex .
, , ,
. , ,

. . ,
, . ,
. tabindex. .
, , tabindex ? ,
,
64
2. HTML5
. , JavaScript
/ .
, , tabindex
: 0 1. tabindex="-1" (
, 1)
, tabindex="0"
, ,
.
: tabindex , ? , ,
, , , Next (). ,
, JavaScript. ,
-.
iPhone , tabindex .
accesskey
accesskey tabindex. ,

tabindex, ,
,
. , .

accesskey. , <input accesskey="s" name="search"
type="text"/> , accesskey s.
s, .
accesskey , . , ,
. accesskey class ,
, . :
, .
tabindex accesskey
,
. , tabindex ,
. accesskey ,
.
HTML5
65

accesskey . , HTML5,
. accesskey
,
.
HTML5:

HTML5 ,
, .
, , , .
hidden
hidden, ,
. , ,
, .
display:none;.
, , . , , .
contenteditable
contenteditable , .
,
, . ,
. contenteditable
, Opera Mini, , Android 3.0 iOS 5 .
contenteditable ,
, .
contextmenu
contextmenu <menu>, , <command>.
id <menu>,
.
, Chrome (
), .
66
2. HTML5
draggable
draggable , . ,
,
, .
. draggable ,
JavaScript dragstart, drag, dragenter, dragleave, dragover, drop dragend.
, IE10, ,
API .
dropzone
, ?
HTML5 dropzone, ,
.
.
move, copy link .
,
.
spellcheck
spellcheck , . , . ,
. , , spellcheck.
, , iOS
, autocorrect . .
ARIA
HTML5 ARIA (
-) role aria-*. ARIA
, HTML5.
ARIA (live regions), , ARIA.
WAI-ARIA
.
, - ( ARIA ) , .
,
. ARIA -
HTML5
67
, ,
. arialive : assertive,
polite off, , ARIA ,
. ariaatomic, aria-busy aria-relevant.
ARIA- role
. ,
, grid, listbox, menu, menubar, tablist,
toolbar, tree treegrid. ,
.
HTML5 ARIA (.3), article, application,
banner, complementary, contentinfo, document, form, heading, main, navigation search , ARIA, HTML5 .
. -, , role
, . -,
,
.
role ARIA
. ariadisabled, aria-busy, aria-expanded, aria-hidden , ariadescribedby, aria-haspopup aria-labelledby,
. ,
(, ) ARIA-.
data-*
HTML5 . ,
, . HTML5
.
.
/ title rel,
. title rel, data-, .
, CubeeDoo . , , ,
. LocalStorage , .
JavaScript,
68
2. HTML5
data-position data-value, data-value

:
<div id="board" class="level1">
<div data-value="0" data-position="1">
<div class="face"></div>
<div class="back"></div>
</div>
</div>
</div>
</div>
...
</div>
</div>
, data-value.
, . data-position 0
data-value , .
data-value
( 7).
data-* ,
<div class="..." rel="15" title="4"> . title , , ( -
,
, ). data-, HTML.
, . , ,
, -moz- -webkit-.
API Dataset. API dataset. API, /,
( ,
):
HTML-
1
2
3
4
5
6
7
69
//
// dataset
currCards = document.querySelectorAll('#board > div');
for (i= 0; i< qbdoo.cards; i++) {
cardinfo.push(currCards[i].dataset);
}
currentState.cardPositions = JSON.stringify(cardinfo);
, , API dataset,
getAttribute(). API,
, . qbdoo.pauseGame
( 3). API dataset, - / , DOMStringMap. ( 7)
/ JSON.
, :
1
2
3
4
5
6
for (i= 0; i< qbdoo.cards; i++) {

for (key in currCards[i].dataset) {
deck[key] = currCards[i].dataset[key];
}
cardinfo[i] = deck;
}
itemid, itemprop, itemref, itemscope itemtype

, .
: itemid, itemprop, itemref, itemscope itemtype HTML5 . , .
API 6.
HTML-
, , ,
. , .
- . (
, <), , ,
( , >).
:
<a>
<p>
<div>
70
2. HTML5
:
<m> 
< div> 
,
.
/. HTML5, XHTML,
. ,
true, .
HTML5 ,

, .
1.

. , . ,
, , .
:
<ahref="http://www.standardista.com">
<pclass="racket-tailed drongo">
<div id="content">
, :
<ahref=http://www.yahoo.com>

:
<pclass="racket-tailed" class="drongo">

<pclass=Racket-Tailed Drongo>

() ,
, ,
. .
(. ),
,
:
<ahref="http://standardista.com/mobile/ch2"> </a>
<pclass="racket-tailed drongo"> </p>
<div id="content">. . .</div>
1
, , , .
, ID .
HTML-
71
(). /
. !
, ,
:
<div id="content">
<pclass="files">
<ahref="http://standardista.com/mobile">
</a>
</p>
</div>
< >, -
. : - <a>
<p>. <p>, ,
<div>.

, , ( ). XHTML
.
.
, () .
.
HTML5 , XHTML . () :
<img/> ;
<br/> ;
<meta/> ;
<hr/> ;
<base/> URL ;
<link/> ;
<keygen/> ;
<area/> -;
<col/> ;
<command/> ;
<embed/> ( );
<input/> ;
72
2. HTML5
<param/> ;
<source/> ( );
<track/> ;
<wbr/> .

XHTML , HTML
. HTML5
, .
. XHTML ,
. HTML5 , , ,
. W3C
,
, , id, ,
.
. XHTML -
. HTML5 , . : ,
.
. XHTML
. , <img/> <br/>,
. HTML5 . , ,
, , , . -
. .
, . : , .
, , . ,
.
.
. <a>, <strong> (
<a>), </strong>,
</a>. :
HTML-
73
, ,
( ).
, . -
XHTML /
, . XHTML ,
, selected="selected". HTML5
selected. HTML5
,
true,
false.
, , .
="" , .
: , true,
. ,
false, removeAttribute(attributeName), setAttribute(attributeName, ''),
true.
, . 3, form.
,
. XHTML
. . , , . ,
span
div. , <h1-6>.

, .
, CSS JavaScript .
, - XHTML,
:
(DTD);
HTML <html></html>;
, html <head></head>;
, , <title></title>;
, html <body></body>.
74
2. HTML5
, , HTML5, XHTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> </title>
</head>
<body>
</body>
</html>
charset <meta>, ,
HTTP-. , .
, . <html>, <head> <body>,
. HTML :
<!DOCTYPE html>
<title>blank document</title>
: .2.2
. <html>, <head>, <body> ,
, DOM .
. 2.2. <html>, <head> <body>,

, DOM
( HTML-, )
, HTML-
140 . ,
HTML-
75
, .
, , .
XHTML, .
.

( (doctype), DTD)
, ,
, .
.
XML- ,
XML. DTD HTML5. -, , -,
. (.2.1).
2.1. HTML 4, XHTML HTML5

HTML 4.01 Transitional
HTML 4.01 Strict
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.1
HTML5
(DTD)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/HTML 4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML 4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html>1
, XHTML DTD 10.

. .
! HTML5, .
HTML XHTML, ,
, HTML5.
, ,
HTML5. 2. -
1
2
HTML5, .
HTML5 IE
.
76
2. HTML5
HTML 4 XHTML Strict, HTML5. , HTML5, HTML XHTML,

. , , !
, <center> <font> , !1 , , XHTML
,
. HTML5 ,
!
<html>
<html> HTML-. HTML5 , XHTML . HTML 4
, HTML5. ,
, .
, .2.2.
<html> , <head> <body>. ( ) <html> lang.
2.2. HTML

HTML
HTML 4.01 Transitional

HTML 4.01 Strict
HTML5
<html>
<html lang=en>
XHTML 1.0 Transitional

XHTML 1.0 Strict
XHTML 1.1
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
HTML5 <html> manifest.

, URL
(). , 6.
HTML5, modernizr,
<html>. .
, modernizr , <html> :
<html lang="en" manifest="cache.appcache" class="no-js">
lang . 6 manifest,
. no-js
1
http://bit.ly/16t5Z6L
HTML-
77
, modernizr1
-, .
<head>
<head> . ,
<title>, 2. , <head> <title>, HTML5.
.
<head> , , .
HTML4 HTML5, profile <head>.
, HTML5.
<head> <title>,
<style>, <script>, <link>, <meta> <base>.
<title>
<title>
</title>. <head>, <body>
<html>, <title>. ,
, .
<body> , - . <title> ,
.
<title> .
, <title> ,
.
, <title> (.2.3). , <title>
(SEO),
,
.
.
<body>
, - <title>, - .
, ,
1
Modernizr JavaScript,
HTML5 CSS3.
<head>,
CSS.
78
2. HTML5
. 2.3. <title>, Safari (iOS)

Firefox OS
, <body>. <body> <html>.

<body>,
XHTML. HTML5
XHTML , HTML4, align bgcolor, . ,
CSS. , <body> id class,
lang dir.
-, <body> , onload="doSomething();".
<body> , class id.
JavaScript, CSS.
HTML5
. ( )
:
<!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<head>
<title> - HTML5</title>
</head>
<body>
</body>
</html>
( , <html>,
<head> <meta>, , <title> <body>)
-. , -.
<title>,
, .
, :
<!DOCTYPE html>
<meta charset="utf-8">
HTML-
79
<title> - HTML5</title>
<p>, !
HTML-, .
, -, ,
.
, <head>
<head> , .
, , . , -,
, -.
, , , .
<head> <title>,
: <meta>, <base>, <link>, <script>, <style>, <command> <noscript>.
-, :
<head>
<title> HTML5</title>
<meta name="author" content="Estelle Weyl"/>
<meta name="publisher" content="O'Reilly"/>
<meta name="copyright" content="Copyright 2013"/>
<meta http-equiv="date" content=", 18 201316:15:30 GMT"/>
<meta http-equiv="date-modified"
content="11/18/2013" scheme="MM/DD/YYYY"/>
<meta name="keywords" content="html5 css3 svg
border-radius canvas audio iphone android ipad"/>
<meta name="description" content="
: CSS3 HTML5."/>
<meta name="pagetopic" content="Internet"/>
<meta name="page-type" content="Instruction"/>
<meta name="audience" content="all"/>
<meta name="robots" content="index,follow"/>
<meta name="generator" content="Sublime"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<base href="http://www.standardista.com/"/>
<script src="/js/application.js"></script>
<link rel="apple-touch-icon" href="touch-icon-iphone.png"/>
<link rel="apple-touch-icon" sizes="72x72"
href="touch-icon-ipad.png"/>
href="touch-icon-iphone4.png"/>
80
2. HTML5
<link href="/css/prettification.css" media="all" rel="stylesheet"/>

<link href="/css/tinylittledevice.css" media="
(max-device-width: 480px)" rel="stylesheet"/>
<link href="/css/print.css" media="print" rel="stylesheet"/>
<style>
p{color: #333333;}
</style>
</head>
, . . , ?
<meta>:
<meta> -
, . , <meta>: charset, http-equiv, content name.
<meta charset="UTF-8">
<meta>, , -,
HTML5:
, :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
. , HTML
UTF-8, HTTP-
.
, <title>
<head>. ,
, ,
. HTML5, , meta, :
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
: <meta> , .
charset .
, . HTML5 .
() UTF-8.
Apache, .htaccess AddDe
faultCharset UTF-8.
HTML-
81
charset, <meta>
name http-equiv. charset, <meta>
name http-equiv, content.
,
HTTP-, <meta> name content,
, , .
. <meta>, , .
description
. ,
, description ().
"description" <meta> , , .
, content ,
(.2.4):
<meta name="description"
content="CSS3, JavaScript and HTML5 as explained by Estelle Weyl">
. 2.4. , Google
keyword
"keyword" . , , .
,
, :
<meta name="keyword" content="CSS3, HTML5, JavaScript">
<meta http-equiv="">
, name <meta>
, http-equiv .
http-equiv, name,
HTTP-. http-equiv
HTTP-. http://www.standardista.com/html5/
http-equiv-the-meta-attribute-explained/ http-equiv
<meta>. .htaccess ,
82
2. HTML5
. <meta> ,
:
<meta http-equiv="cache-control" content="no-cache" />

,
. , , , , ( ).
viewport. , ,
, ,
.
,
1.
"viewport"
, .
CubeeDoo :
<meta name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1.0"/>
, ,
iOS, Android, webOS,
Windows Phone Opera Mobile.
device-width,
. !
, . , .

, .
width=<num>|device-width. , device-width -
,
,
. , , , , , 980. 200 ,
10000.
height=<num>|device-height. , device-height ,
, 480 iPhone4, .
1

, . ,
Slate, .
HTML-
83
, , . : 223.
user-scalable=no|yes. , -
, . , yes, no.
yes. .
, minimum-scale maximum-scale,
.
initial-scale=<float>. () -
, -. 1.0, - .
maximum-scale=<float>. , user-scalable no.
10, 0.25 .
minimum-scale=<float>. -. 0.25.
980. device-width, ,
980, 320.
320, device-width,
.
,
. ,
.
,
-. ,
user-scalable, ,
.
CubeeDoo -.
. , ,
. .
, -,
.
:
<meta name="viewport" content="user-scalable=yes,
width=device-width, initial-scale=1.0"/>
84
2. HTML5
, ,
- . Apple. , HTML-, CSS
@viewport. IE10.
,

- , . , Google Apple /
/API.
.
apple-mobile-web-app-capable
"apple", Android. ,
.
, . , .
- , .
, . ,
:
content yes, , .
, , JavaScript, window.navigator.stan
dalone. .
apple-mobile-web-app-status-bar-style
,
apple-mobile-web-app-capable . ,
-. , -
. ,
apple-mobile-web-app-status-bar-style:
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
- ( ),
.
. iOS
HTML-
85
default, black black-translucent.

( , , ),
, .
format-detection
format-detection , -:
<meta name="format-detection" content="telephone=no"/>
, .
,
,
. telephone="no", . ,
, , -
, .
<base> -
<base> , ,
. <base> URL URL. ,
<img src="image/drongo.gif"alt=" "/>. <base src="http://RacketTailedDrongo.com"/> RacketTailedDrongo.com drongo.gif1.
URL HTTP-, ,
, URL . . base
<head> .
, , , ,
,
. :
<base href="http://www.mydomain.com"/>
<link>

<link> . ,
, . <link>
HTML-
. <link>
1
, , :
, .
86
2. HTML5
, , 1, .
<link>:
<link
<link
<link
<link
rel="icon" href="/appleicon.png"/>2
rel="apple-touch-icon" href="/appleicon.png"/>
rel="apple-touch-startup-image" href="startup.png"/>
rel="stylesheet" href="styles.css"/>
<link> ,
href, rel, type, sizes, hreflang, media title. rev charset <link>
HTML5 . :
<link href="url to resource" rel="type of relationship" title="title"/>
rel
, href. rel href
.
<link> , .
.
<link>

<link> , . ,
,
.
,
.
, ,
:
<link href="/css/styles.css" media="all" rel="stylesheet"/>
<link href="/css/tinylittledevice.css"
media="only screen and (max-device-width: 480px)" rel="stylesheet"/>
<link href="/css/print.css" media="print" rel="stylesheet"/>
, , ,
. : / type="text/
css". ( )
, HTML5 ,
1
, , , , . http://
ru.wikipedia.org/wiki/Favicon. . .
rel="shortcut icon" IE.
shortcut, , favico.ico, .
HTML-
87
text/css . ,
media="only screen and (max-device-width: 480px)".
, <link>,
7.
<link>
, <link> .
.2.3 .
2.3. <link>
href
media
rel
hreflang
type
sizes
. URL
<link>
,
<link>
,
MIME- . , ,
rel
. ,

media
media , ,
. , all. ,
href.
, : screen
, print ..
screen, tty, tv, projection, handheld, print, braille, aural all.
@media-. CSS3 media . ,
media. ,
, .
CSS , :
<link rel="stylesheet" media=" (orientation:portrait)" href="prtrt.css"/>
<link rel="stylesheet" media=" (orientation:landscape)" href="lndscp.css"/>
@media CSS3, media. , :

(min/max)-width ;
(min/max)-height ;
(min/max)-device-width ;
88
2. HTML5
(min/max)-device-height ;
orientation , ( ) -
( );
(min/max)-aspect-ratio ;
(min/max)-device-aspect-ratio .
<link>, HTML4,
HTML5, coords, shape, urn, target, charset,
methods rev. title .
rel
rel
, href. rel , ,
. rel="stylesheet"
; , (, ,
?). .2.4
rel link.
2.4. rel
stylesheet
next
prev
index
help
contents
alternate
copyright
rel, ,

. stylesheet, / type="text/css" , text/css

.

(,
). ,

,
.
hreflang ,
. media
,
, , . stylesheet ,
,

HTML-
glossary
icon
apple-touchicon
apple-touchstartup-image
89
,

, ,

, -. , - .
,
-
apple-touch-icon apple-touch-startup-image iOS Android. Windows Phone . :

<meta name="msapplication-TileColor" content="#<color>"/>
<meta name="msapplication-TileImage" content="<image reference>"/>
<style>
<style> .
, <link>, ,
<style> , . , . , style ( , ,
scoped),
<style> ,
.
<style> type
( , type="text/css"). HTML5 , "text/css" . <link>, <style> media.
scoped HTML5, . <style> scoped,
CSS
(scope). ,
.
(, ). , CSS CSS
, .
<style> : .
12 ,
, <link>, <style>. CSS
<style>, , , HTTP-,
. ,
.
90
2. HTML5
- , HTTP, .
CSS
<style>.
JavaScript style LocalStorage,
cookie. HTTP-
cookie ( ), LocalStorage.
cookie , -
( ). LocalStorage
, , .

,
. ,
HTTP HTTP-.
,
HTTP- .
,
( ),
, LocalStorage.
<script> -
<script> - JavaScript , JavaScript .
type XHTML
type="text/javascript". HTML5 , type
text/javascript. JavaScript,
type . , language
.
src , , . ,
JavaScript-
.
JavaScript.
, <head> , ,
<script> <head>, <body>. <script>
<body>.
? JavaScript
. ,
JavaScript , .
.
,
, <head>.
HTML-
91
, JavaScript ,
,
-. - , ,
. JavaScript
.
, JavaScript: defer async. , async HTML5. async , , . defer
, , . , JavaScript
,
. ,
.
, JavaScript
, ( ,
async / defer ).
,
JavaScript ,
. JavaScript , .
<head>, JavaScript.
<script> , , , .
HTML5 ,
- JavaScript. -,
6, JavaScript . , , <script>.
JavaScript ,
<noscript>
<noscript>, ,
JavaScript.
,
<noscript> .
,
JavaScript. <noscript>,
,
JavaScript. JavaScript ,
WebKit, Blink, Opera Mobile, Windows Firefox.
92
2. HTML5
( <body>)
<body> <html>.
<html> <head>. ,
, <body>.
<head>, , . <body>
( ) .
,
: <body> .
, <body> , , :
onafterprint;
onbeforeprint;
onbeforeunload;
onblur;
onerror;
onfocus;
onhashchange;
onload;
onmessage;
onoffline;
ononline;
onpopstate;
onredo;
onresize;
onstorage;
onundo;
onunload.
JavaScript,
<body>. , ,
, .
-.
,
HTML5
HTML5 , . , . 2,
<html>, , <head>, . HTML5
: , , , . 4. ,
, 5.
, HTML5 . .
HTML
: , , ,
. HTML5 . HTML5 , CSS , ,
, . ,
HTML5 . , , , ,
.
HTML5 HTML4, . , HTML5 ,
,
CSS. 2
.
HTML5, , . ,
, .
94
3. , HTML5
HTML5
<body>. HTML 4 HTML5.
, , <address> <h1> <h6>. HTML5
, 1:
section;
article;
nav;
aside;
header;
footer.
:
body;
h1h6;
address.
,
. , <footer>, <aside> <nav>,
<div>, . ,

, ,
.
. ,
. , , . section
blockquote footer.
,
<h1>. , ( <h1> <h6>). , .
HTML5 , ,
, - () . Opera ,
, ID. - Dreamweaver Microsoft
1
hgroup, HTML5,
. WHATWG,
W3C HTML5 W3C HTML5.1.
HTML5
95
style1 MsoNormal.
, , left right, , , main , header ,

footer, content, sidebar, banner, search nav.
, Dreamweaver (
).
HTML5 25 . main
content. ? , , , , ,
. <main> ,
.
, <header> <footer>,
<div id="header"> <div id="footer">, .
-.
(.3.1) , .
. 3.1. -,
HTML5
<section>
<section> . <section> , , .
96
3. , HTML5
,
<div>1:
<section>
<header>
<h1> - HTML5 CSS3</h1>
</header>
<h2>HTML5</h2>
<p> HTML5.</p>
<h2>CSS3</h2>
<p> CSS3.</p>
<footer>Provided by Standardista.com</footer>
</section>
<article>
<article> <section>, , , , .
<article> , ,
, :
<article>
<header>
<h1> - HTML5 CSS3</h1>
<p><time datetime="2013-11-11T12:31-08:00">11.11.13</time></p>
</header>
<h2>HTML5</h2>
<p> HTML5.</p>
<h2>CSS3</h2>
<p> CSS3.</p>
<footer>
<p>Provided by Standardista.com</p>
</footer>
</article>
HTML5 pubdate,
, ,
, .
<section> <article>
,
. <article>,
1
, <section>. ,
<div>, .
HTML5
97
<section>, -
. .
, , ,
<article> <time>.
, ,
(
, , : , ). : ,
, , , , .. . , , ,
. , ,
.
, <article> ,
, , ,
, .
: <section>
,
<section> <article>
. , , , , <section>.
, , .
, ,
.
<article>, <section>, .
<nav>
<nav>
. , ,
.

. ( ), , ,
.
, , ,
<footer>. <footer> ,
<nav>.
<nav>, ( ,
), .
98
3. , HTML5
<nav> , ,
.
, WAI-ARIA role="navigation":
<nav role="navigation">
<ul>
<li><ahref="/"></a></li>
<li><ahref="/css/">CSS3</a></li>
<li><ahref="/html/">HTML5</a></li>
<li><ahref="/js/">JavaScript</a></li>
<li><ahref="/access/"></a></li>
</ul>
</nav>
<aside>
<aside> , . , <aside>,
. <aside> ,
, ,
,
. :
<aside> , , .
<aside> . ,

, <aside>
<footer> :
<section>
<h1>......</h1>

<section>
<aside>
<dl>
<dt>HTML5</dt>
<dd> HTML.</dd>
</dl>
</aside>
<header>
<header> , (
HTML5
99
<h1> <h6>). <header>
, ,
.
<header>.
<header>,
. , ,
. , <header> <section> / <article>. , , , , . ,
<header>
, , , .
<header> <div id="header"> <div class="heading">, .
<footer>
<footer>
, . , , .. <header>,
<footer>. , <section> / <article>. , .
<footer> , <footer>. <header> <footer> <article>,
<section> <body>. -
<body>, <footer>
. <div id="footer">, .
<address> (
), <footer>.
, . , :
<footer>
<p>Copyright 2013
<address>estelle@standardista.com</address>
</p>
</footer>
: <footer> <aside>
.
100
3. , HTML5

CubeeDoo
,
. ,
, - ! ,
,
, :
1 <article>
2
<header>
3
<h1>CubeeDoo</h1>
4
<h2> </h2>
5
</header>
6
<section id="game" class="colors">
7
<div id="board" class="level1">
8

9
</div>
10
<footer> 
11
<div class="control scores"></div>
12
<div class="control menu" id="menu"></div>
13
<ul>
14
<li id="level">: <output>1</output></li>
15
<li id="timer">
16
<div id="seconds"></div>
17
</li>
18
<li><button id="mutebutton"></button></li>
19
<li id="score">: <output>0</output></li>
20
</ul>
21
</footer>
22
</section>
23
<footer>
24
<ul>
25
<li><ahref="about/estelle.html"> </a></li>
26
<li><ahref="about/justin.html"></a></li>
27
</ul>
28
</footer>
29 </article>
<article> ( 622),
<article> <section>.
<header> ( 25) <footer> ( 2328).
, <h1> <h2> . .
, ,
( 1021). <footer> <section>.
101
HTML5
<address>: ,

<address> HTML5.
, . ,
. , <address> .
, <address>
. , <address>
-
<article> <body>. <body>, . <article>
<article>.
, .
:
HTML5
, ,
: .
, <p>, <pre>, <blockquote> <div>.
: <main>, <figure> <figcaption>. <hr> HTML5 ,
<hr> (.3.1).
3.1.

main
figure
figcaption
hr ( )

p
pre
blockquote
ol
li
ul
dl
dd
dt
div
, ,
. , , .
102
3. , HTML5
<main>
<main> .
, <main> ( ). <main> , , , .
<main> , ,
, , , .
<main> ,
, ,
, , , .
, . . <main> ,
. , ,
, .
<figure> <figcaption>
<figure> , <figcaption>. ,
,
.
, W3C. ? ,
? .
- , , <figure>.
, .
, , ,
, .
- <figure>:
<figure>
<img src="madeupstats.jpg" alt="
: 27% , 70%
3% ." />
<figcaption> </figcaption>
</figure>
<figure>, <figcaption>,
.
<figcaption> <figure>. <figcaption> , <figure>, <figcaption>.
<figcaption> <figure>, .
103
, HTML5
<hr>
<hr> HTML5 .
,
( ). <hr>
() .
, <hr/>, .
<li> <ol>
, 2, ,
: value type
. ,
reversed,
.
,
HTML5
HTML5 20 , . , ,
, ,
, <acronym>, .
.3.2.
3.2.
mark
time
ruby
rt
rp
bdi
wbr
data
a
small
scite
ibu
q
samp
kbd
sub
sup
bdo
span
br
em
strong
dfn
abbr
code
var
acronym
big
center
font
strike
tt
104
3. , HTML5
<mark>
<mark> , . ? . , <mark> , ,
.
,
.
- Safari ?
,
?

Google,
<mark>, :
mark {background-color: yellow;}
mark:focus {background-color: blue;}
CSS. , .3.2.
. 3.2. Opera Mobile ,

, HTML5
105
,
, .
<mark> ( CSS
).
, .
<mark> ,
, . , HTML5.
, ,
<mark> CSS:
<p><mark>HTML5</mark> .
HTML.
, HTML4.01 XHTML1.1,
<mark>HTML5</mark>
.
, .
<mark>,
CSS, , .
<time>
<time> .
,
, . ,
<time>
.
, .
datetime . datetime ,
1.
datetime ,
.
: CubeeDoo
<time>. :
11:00 ( ),
:
<time datetime="2013-11-30T11:00-8:00">next Saturday at 11:00 a.m.</time>
CubeeDoo <time>
, , .
1
.
http://www.w3.org/TR/NOTE-datetime
106
3. , HTML5
, datetime.
<rp>, <rt> <ruby>

<ruby>, ruby-,
ruby-. Ruby. Ruby- ,
(.3.3).
<rp>, ruby-, ruby-
. , ruby. ruby-,
. <rt>, ruby-, ruby- ruby-.
. 3.3. <ruby> <rt>,

. : : " "1
<rt> / <rp>: <rp> ,

<ruby>, / . <rp> ,
, ruby-.
CubeeDoo; , ruby- .
<bdi>
<bdi> ( <bdo>, ) .
, Unicode
,
. <bdo dir="rtl"> , . <bdi> , ,
<bdi> </bdi>. CSS , text-combine-horizontal, HTML
CSS, .
<wbr>
<wbr> , . , URL , .
, :
1
: https://dl.dropboxusercontent.com/u/1330446/tests/ruby.html
107
<p>
<ahref="http://isCubeeDoo.partofhtml5.com/"><wbr/>CubeeDoo.<wbr/>
<wbr/>HTML5.com</a>?
</p>
, ,
URL <wbr>.
<wbr>, , . <wbr>
.
,

HTML HTML5 . , a, small, s, cite, i, bu.
<a> . ,
, HTML5 . , ,
href, 1.
, <a> ,
name. ( ), id ,
. ,
id. , <a href="#anchorid"> , id, anchor id. , shape, coords, charset, methods rev.
target <a>,
XHTML Strict. , download, media
ping2. download ,
.
, . media , . ping URL, ()
, ,
, .
, <a> HTML5,
, , , HTML5, , . ,
HTML5 :
1
2
href , <a> .
media, ping download , , .
108
3. , HTML5
<ahref="index.html" rel="next" target="_blank">

<header>
<h1> </h1>
<p> </p>
</header>
</a>
-
,
1.
, mailto:.

, ,
. , .
tel: ,
, . iOS
, ,
. tel: Android, , ,
. sms:, .
, sms:-. :
sms:<phone_number>[,<phone-number>]*[?body=<message_body>]
, .
: ,
, iOS. Android
,
. SMS SMS. ,
SMS:
<ahref="tel:16505551212">1 (650) 555-1212</a>
<ahref="sms:16505551212"></a>

. , Safari iPhone
, , , . ,
(.
,
HTML- 2).
1
Skype . http://developer.sky
pe.com/skype-uris
109
, - Google Maps, YouTube, iTunes

Google Play. - Google Maps,
,
. , Maps:
<ahref="http://maps.google.com/maps?q=san+francisco,+ca"> -</a>
iOS YouTube iTunes

YouTube iTunes . Android
,
: Google Play.

HTML 4
, <i>, <b>, <s>, <u>
<small> .
: , .
<i> <span>,
, . ,
,
, , , .
<b> , , . , ,
,
.
<s> ,
. <s>
, HTML5 . HTML5 <s>
.
<u> .
. . , ,
, .
<small> ,
. , ,
, ,
,
. , (, ,
).
110
3. , HTML5
<cite>, ,
, HTML5 .
<cite> : . , , , ,
, .. HTML <cite>
. .
,
, ,
HTML5 . . .3.3
.
3.3.
em
strong
q
dfn
abbr
code
var
samp
kbd
sub
sup
bdo
span
br

,

. : acronym .
title

, ,

,

;

<ins> <del>.
.

.
1:
1
<picture>
. : http://www.w3.org/TR/html-picture-element/
111
embed;
video;
audio;
source;
track;
canvas.
:
img;
iframe;
object;
param;
map;
area.
,
<video>, <audio>, <source>, <track> <canvas>, 5.
<embed>. ,
HTML 4 XHTML.
, , ,
.
<iframe>
<iframe> HTML5, .
<iframe> longdesc, frameborder, marginwidth, marginheight, scrolling
align, srcdoc, sandbox seamless.
srcdoc HTML,
, <iframe>.
, <body>, srcdoc.
srcdoc &quot:,
. srcdoc,
srcdoc .
srcdoc, , src:
<iframe srcdoc="<p>Learn more about the
<ahref="http://developers.whatwg.org/the-iframe-element.html
#attr-iframe-srcdoc">srcdoc</a> ."
src="http://developers.whatwg.org/the-iframe-element.html
#attr-iframe-srcdoc"></iframe>
sandbox , <iframe>.
, ,
112
3. , HTML5
, . ,
, <iframe>
. , <iframe>
, DOM cookie. ,
sandbox , .
allow-same-origin ,
, , . allow-top-navigation
. allow-forms,
allow-pointer-lock, allow-popups allow-scripts , API
pointer-lock , .
, , ,
. ,
:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
src="http://maps.google.com" seamless></iframe>
seamless <iframe>,
.
, CSS
<iframe>,
. , <iframe>
, , .
<img>
<img> border, vspace, hspace, align, longdesc name.
srcset,

, .
,
, .
,
,
9.

, srcset,
<picture> , <object>.
1,
1
http://bot.kz/
2013/06/23519. . .
113
(SVG), 5,
.
<object>
<object> data type. ,
align, hspace, vspace border, ,
CSS. , archive, classid,
code, codebase codetype <object>,
<param>. declare
<object> . standby, , ,
, , , ,
. <object> ,
.
<param>
<param> type valuetype,
name value.
<area>
<area> nohref, rel, ping
(. <a>), media hreflang.
<embed>
, <embed/> .
. <embed> ,
, Adobe Flash Player,
, <video> <audio>.
, <img>, . URL , src. MIME-
type.

, <menu>, <detail>, <summary>
<command>.
114
3. , HTML5
<details> <summary>
- , ,
? HTML5
<details> <details>, ,
JavaScript (.3.4).
. 3.4. <summary> . ,
<details>
<details> .
, , , . <details> open,
HTML5. open,
<details> . -
115
, . <summary>
<details>. : , <details>, <summary>.
<summary> ,
open. <summary>,
<details>.
<details>/<summary>.
, JavaScript:
<details>
<summary>5
<ul>
<li>5
<li>5
<li>5
</ul>
</details>
5 </summary>
Amazon</li>
Costco</li>
Barns & Noble</li>
, <details> ( <summary>)
open (
). <summary>. <summary> summary <table>.
<summary>, <details>,
<details>, , ,
display: none;. <summary>
, <details>,
<summary>.
<summary> / <details>,
( , <details>). ,
JavaScript. <summary> ,
<details> open
, CSS :
details * {display: none;}
details summary {display: auto;}
details[open] * {display: auto;}
!
8.
<menu> <menuitem>
<menu>, HTML 4.01 XHTML.
. HTML5
116
3. , HTML5
<menu> .
.
HTML5 <menu> .
id <menu> menu
<button> menuitem <input>.
. <menuitem>, .
,
type toolbar.
, context. label
, .
, .
<menuitem>. <menuitem>,
<menu>, . type.
radiobutton ( ), checkbox (/
) command , . ,
, . <menuitem>
,
.
<menuitem> . label,
, . icon, disabled, checked, radiogroup, default command. command
. title,
.
, , ,
Windows. ,
.
XHTML HTML5,
XHTML HTML5.
:
basefont;
big;
center;
font;
strike ( <del>);
117
tt;
frame (<iframe> - );
frameset;
noframes;
acronym ( <abbr>);
applet ( <object>);
isindex;
dir.
, ,
. , <b>, <hr>, <i>, <u> <small> , . <menu>
.
<strong> , .
<a> , . ,
href.
, . -, 4.
, ,
.
<table> width, border, frame, rules, cellspacing
cellpadding.
<ol> reverse start.
<col> <colspan> ,
span.
<td> <th> .
headers, rowspan colspan, abbr, axis, width, align valign. <td>, <th>.
<tr> <thead> , .
HTML5 .
HTML5, . ( ) HTML5.
HTML5 . 4 - , JavaScript.
- HTML5
, , -,
, HTML5, , ,
. , Canvas . SVG . API JavaScript DOM .
. ,
, JS- ( ,
). CSS3 .
HTML5? ,

JavaScript.
HTML5 ,
. HTML5 ,
JavaScript. JavaScript , ,
. .
, ,
setFocus() onload. autofocus (
, , 1).
JavaScript ,
. HTML5
,
. ,
, , 1
,
, , .
, . , .
,
.
4. - HTML5
119
. , HTML5
,
.
. ,
HTML5, ,
<form>!

. type <input> .
'text'
, .
QWERTY.
HTML5, , ,
, . - HTML5. ,
, (, ,
). , .
HTML5 CSS , JavaScript .

, HTML5 JavaScript
.
HTML5 ,
, , ..
, .
.
, , .
- HTML5, .

.
, -.
-, , . , -
120
4. - HTML5
, ,
-, HTML5. , . , ,
, 1990-, HTML5 .
,
, type.

. HTML5 , .
JavaScript,
, .
, ,
JavaScript.

, (. ),
(. 7), .

, - HTML5
.
<input>
( )
,
<input>.
type
, <input>
type. , , ,
, : type="text".
<label>Phone: <input type="tel" name="phone"></label>
<label>Website: <input type="url" name="website"></label>
HTML5 23 type.
<input>. :
, type
text. .
<input> ( )
121
,
,
.
required
, required.
, ,
required, ,
,
. , , , : ,
, 12-12 , ,
. pattern, , .
.
required , buttons, range,
color hidden:
<label>Email: <input type="email" name="email" required="required" /></label>1
<label>Phone: <input type="tel" name="phone" required /></label>
,
, , ,
. , ,
, , , - . required ,
, .
: , required, :required :invalid. , , . , , CSS:

input:focus:invalid {
background-color: #CCCCCC;
}
input:valid {
background-color: #00FF33;
}
input:required {
border: 2px solid #0066FF;
}
1
: required, required="required",
XHTML Strict.
122
4. - HTML5
, CSS3, 7.
: ,
required ARIA aria-required="true" ( ARIA, -, 6):
<input type="tel" name="phone" required aria-required="true"/>
:
min max
,
min max.
min max , ,
: number range.
,
min/max,
.
, number,
. , min max. , , number, .
,
min max, .
range min,
max , max min.
,
number range.

, -. ,
, ,
.
, , , . ,
, :
<label>Reservation Time:
<input type="time" min="17:00" max="22:00" name="dinner" required>
</label>
, .
17:00, 22:00 . ,
, JavaScript
,
.
<input> ( )
123
step
step ,
/ range number, step . , ,
5, 1,
, :
<p>
<label for="cost">Price </label>
<input type="number" min="5" max="100" step="5" name="cost" id="cost"/>
</p>
, ,
step.
,
, number,
, ,
. , 7 .
2, step 5 ( ), 7 , 100 :
<p>
<label for="cost">Price </label>
<input type="number" min="2" max="100" step="5" name="cost" id="cost"
required/>
</p>
step for. . for .
placeholder
, , JavaScript, -. , . , .
, -.
- , , . HTML5 ,
. placeholder , ,
-. ,
JavaScript .
124
4. - HTML5
placeholder , placeholder , . placeholder ,

.
placeholder , ,
. , title <input>, <label> placeholder.
, ,
. <label>, <title> <placeholder>. .
placeholder text,
search, url, telephone, email password, ,
date color. placeholder, ,
. pattern, . placeholder .
:placeholder-shown
CSS- 4. ,
<input>
- (. ):
input:placeholder-shown {}
input:not(:placeholder-shown) {}
, ,
. - , .
, JavaScript
.
JavaScript ,
placeholder, min, max, pattern,
. JavaScript .
pattern
pattern ,
placeholder, . pattern
JavaScript, <input>.
, .
pattern ,
. pattern
. , ,
JavaScript, , pattern
<input> ( )
125
, . , ,
*.
.4.1 .
4.1. ,
for
?
*
+
{n}
{n,m}
[]
[n-m]
[^n-m]
\d
\D
\s
\S
\w
\W
()
|
0 1
0
1
n
n, m
, , . , [123] 1, 2 3
, . [123] [13]
^ . , nm
. [09]
, . [^09]
( )
(
)
. [09AZaz]
, . [^09AZaz]
()
,
. gr(a|e)y gray grey
.
, pattern ,
, .
pattern title, .
:
<label for="col"> Color: </label>
<input pattern="#[0-9A-Fa-f]{6}"
name="col" type="color" placeholder="#ffffff "
id="col" title="Ahash sign followed by 6 hexadecimal digits"/>
<label for="cc"> Credit Card: </label>
<input type="text" pattern="[0-9]{13,16}"
name="cc" id="cc" title="13 to 16 digit credit card number"
placeholder="credit card #"/>
126
4. - HTML5
color,
. .
pattern,
color. ,
pattern, . , .
. , pattern, ,
, .
(.4.1). , .
. 4.1. .
(BlackBerry 10)
CSS. :invalid
, pattern -
. :valid ,
.
readonly
readonly
. , ,
<input> ( )
127
, URL, / . ,
<textarea>. , , , , , ,
. , , IE.
readonly ,
:
<input type="text" value="Not Editable" readonly/>
<input type="text" value="Not Editable" readonly="readonly"/>
disabled
disabled .
, <output>. HTML4 disabled <fieldset>. <fieldset>, disabled ,
<fieldset> (.
form ). , , disabled, disabled <fieldset>.
CSS: :disabled,
.
, readonly disabled? , readonly

. disabled
, .
maxlength
maxlength text, password, url, search,
telephone email, <textarea>. / number. HTML4
text password.
maxlength
URL, .
, : -
URL ? , , , ,
.
128
4. - HTML5
,
. Twitter ,
- 140, , .
size
size .
: ,
, <select>,
. size
<input>
CSS .
size , HTML5. size , (
maxlength) (
multiple).
form
HTML-, HTML5, . form HTML- . ,
, .
HTML- form id, <form>, <form>
-, HTML-. ,
HTML- , , .
, :
<form id="form1">
<-- -->
</form>
<p>
<label for="userid">User ID</label>
<input type="text" id="userid" name="user" form="form1"/>
</p>
#userid <input> #form1. HTML
name value, #userid,
. , form HTML5, id
#userid form. #form1 #userid ,
<input> ( )
129
-, HTML5,
- <form>.
HTML5 <fieldset> , form. ,
<form>.
: form='''' - ,
, . .
, removeAttribute('form'), setAttribute('form', '');,
.
autocompletion
1.
, . ,
, . autocomplete () , (, , )
. autocomplete
: on, off default. on , off .
off , ,
, (, ) (, ).
, . , on ,
, ,
. , HTML- ( ).
, ,
:
<p>Login: </p>
<p>
<label for="user">Username: </label>
<input type="text" name="user" id="user" autocomplete="on"/>
</p>
<p>
<label for="pwd"> Password:</label>
<input type="password" name="pwd" id="pwd" autocomplete="off"/>
</p>
1
Google API requestAutocomplete(), -. , .
130
4. - HTML5
autofocus
autofocus , ,
.
. autofocus , <input> ( ), <button>,
<select> <textarea> . autofocus , .
, ,
, autofocus. jQuery, , , :
$('[autofocus]').last().focus();
: autofocus,
. , .
, , ,
.
: iOS , .
HTML5 .
23 , . ,
. , type, , <input>.
text (, maxlength size).
, , , text. , :
color, disabled .
<input>
23 .
, HTML5.
.

,
HTML5. , : HTML
, , ,
<input>
131
<input>. ,
.
: , ,
. type. , , submit:
input:not([type=submit])){
border: 1px solid #666666;
}
:not 8.
: <input type="text">
, text, type="text", ,
. text type: type , text.
text <input>. type

,
type="text". ,
HTML5, text.
HTML5,
Netscape4.7. .
value . ,
value . value , ( )
, .
: name, disabled, form, maxlength, readonly, size, autocomplete,
autofocus, list, pattern, required placeholder. ,
, text HTML5
:
<label for="username"> </label>
<input type="text" name="username" id="username"/>
value,
, .
, . , value. , placeholder .
132
4. - HTML5
,
, placeholder.
,
, , . ,
.
: <input type="password">
password, type="password",
. , , , , ,
value,
( ). pAssW0rd,
. ,
, .
: , POST
SSL-. ,
. GET, URL
: https://www.website.com/index.php?user=Estelle&password=pAssW0rd.
, POST
HTTPS. , POST
, ,
:
<label for="password"></label>
<input type="password" name="password" id="password"/>
WebKit
. CSS -webkit-text-security.
-webkit-text-security circle, square, disc none,
, , .

:
,
.
: <input type="checkbox">
checkbox, type="checkbox",
. .
<input>
133
(), . , (indeterminate), .
,
. , ,
-. ,
, .
- -,
.
.
name value .
, name
value /.
, :
<input type="checkbox" name="remember" value="true">
<label for="remember"> </label>
. , . CSS :checked. , , ,
:
input[type=checkbox]:checked + label {
color: #cccccc;
}
CSS , . 8
, :checked.
: <input type="radio">
radio, type="radio",
.
( ). ,
, .
,
, . , , .
, ,
. , ,
.
name value. , :
134
4. - HTML5
;
value name. value;
,
;
:
. , , ,
. JavaScript
,
:
<p> ( ):</p>
<ul>
<li>
<label>red:
<input type="radio" name="favoritecolor" value="red"/>
</label>
</li>
<li>
<label>green:
<input type="radio" name="favoritecolor" value="green"/>
</label>
</li>
<li>
<label>blue:
<input type="radio" name="favoritecolor" value="blue"/>
</label>
</li>
</ul>
:
name. name .
ID, .
, . .
, for id .
<label> .
: <input type="submit">
submit, type="submit",
. , . -
<input>
135
,
. -,
disabled. -, JavaScript, return false
preventDefault() .
disabled,
. JavaScript preventDefault()
return false .
<input type="submit" value=" "/>
: onsubmit <form>, . ,
.
,
value, .
name, /
.
HTML5
<form> , .
HTML- <form>, . form: form="id_of_form_to_submit".
,
form.
, , ,
HTML CubeeDoo:
<form>
<ul>
<li>
<label
<input
</li>
<li>
<label
<input
</li>
<li>
<input
<label
</li>
<li>
<input
</li>
</ul>
</form>
for="username"> </label>
type="text" name="username" id="username"/>
for="password"></label>
type="password" name="password" id="password"/>
type="checkbox" name="remember" value="true"/>
for="remember"> </label>
type="submit" name="submit" value=""/>
136
4. - HTML5
: <input type="reset">
, type="reset", . , ,
disabled JavaScript. onreset,
<form>, . , .
,
, ,
.
. ,
,
.
.
- ,
,
.
<input type="reset" value=" "/>
, :

.
reset , value. ,
/ .
: <input type="file">
file, type="file",
.
, -
.
iOS 6.0 ( Safari iPhone/iPad).
iOS file . ,
file IE10 Windows Phone 8, Windows Phone 8 RT
.

.
, Browse
() Choose ().
, . ,
CSS ,
file:
<input>
137
input[type="file"] {
/* " " */
}
input[type="file"]::-webkit-file-upload-button {
/* */
}
file : name, disabled,

accept, autofocus, multiple, required capture. value,
.
accept , . ,
. file
min max, , , .
0 1 min max . , multiple.
accept , , :
<input type="file" name="image" accept="image/*;capture=camera">
<input type="file" name="video" accept="video/*;capture=camcorder">
<input type="file" name="audio" accept="audio/*;capture=microphone">
, . , Android 3.0, Chrome Android (0.16),

Firefox Mobile 10.0 Opera Mobile14.
1. capture accept, .
:
<input type="file" name="image" accept="image/*" capture>
<input type="file" name="video" accept="video/*" capture>
<input type="file" name="audio" accept="audio/*" capture>
, .
, , capture .
: <input type="hidden">
hidden, type="hidden", : type="hidden", name="somename" value="some value". hidden
,
1
138
4. - HTML5
. hidden
ID, IP- ,
.
hidden
, JavaScript. HTML5 , <output> LocalStorage, cookie.
hidden . ,
hidden
/, .
: <input type="image">
image, type="image", submit <img>, src alt.
value name, /
. ,
"file".
: <input type="button">
button, type="button" , . , , JavaScript .
, value:
<input type="button" value=" "/>
button <button>, ,
type="button". , <button>
,
JavaScript . input type="button",
.
<button>, .

. WebKit Mozilla appearance.
-webkit-appearance -moz-appearance.
<input>
139
, .
, .
appearance ,
. , , . ,
, appearance, checkbox (),
button () slider-horizontal.
DOM <div> slider-horizontal.
appearance CSS.
<input>
!
text
: , , URL.
.
. , , HTML5 , , .
<input> . HTML5 13
type HTML- <input>:
search;
tel;
url;
email;
datetime;
date;
month;
week;
time;
datetime-local;
number;
range;
color.
HTML5 . , radio, checkbox button,
, type. ,
( ) ,
.
140
4. - HTML5
BlackBerry10.
tel ,
QWERTY, , .4.4.
CSS- :invalid. JavaScript

( JavaScript) CSS:
input:focus:invalid {background-color: #CCCCCC;}
: <input type="email">
email .
, .
email iPhone, 3.1.
AZ, @, , _123. , .4.2:
<p>
<label for="email"> : </label>
<input id="email" type="email" name="email"
placeholder="name@domain.com" required multiple/>
</p>
email multiple, , .
, .

email name, disabled, form, autocomplete, autofocus,
list, maxlength, pattern, readonly, required, size placeholder.
URL: <input type="url">

email, url
-. , , -. iOS
url AZ, ,
, , .com. , .4.3,
. BlackBerry ,
, .
<input>
. 4.2. .
BlackBerry10, iPod, Windows Phone Firefox OS
141
142
4. - HTML5
. 4.3. URL Firefox OS, iPod, BlackBerry 10,

Windows Phone Chrome Android
, url, , URL , . , Q:// , ftp://.

URL ( HTML5), , URL/URI . W3C
.
(. .4.3), -
.
, pattern:
<p>
<label for="url">-: </label>
<input id="url" type="url"
pattern="^(http|https|ftp)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]*"
placeholder="http://www.domain.com" required />
</p>
: <input type="tel">
tel . url email, tel
. ,
, , ,
.
. , .
, +1(415) 555-1212 , 415.555.1212.
<input>
143
, tel?
(. .4.4).
,
, !
, placeholder
.
, pattern
setCustomValidity() ( ).

:
<p>
<label for="tel">: </label>
<input id="tel" type="tel" placeholder="XXX-XXX-XXXX"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required />
</p>
: <input type="number">
number ,
. number
, , .4.5.
min, max step.
min , max . step . step 1,
. min, max step
.
,
,
.
.
, ,
.
( )
step.
. ,
, .
, , max
min, min. , :
<input type="number" min="0" step="5">
144
4. - HTML5
. 4.4.

, ,
min + n* step, n , min/
max. , min=2, max=10 step=5, 7 ,
10 :
<p> 100 999</p>
<p>
<label for="number">: </label>
<input id="number" type="number" placeholder="100 to 999"
pattern="[1-9][0-9]{2}" min="100" max="999" required />
</p>
<input>
. 4.5.
<p> 0 1000, 5</p>

<p>
<label for="even">, 5: </label>
<input id="even" type="number" placeholder="0, 5, 10 …"
pattern="[0-9]*[05]" min="0" max="1000" step="5" required />
</p>
<p> 10.0</p>
<p>
<label for="float"> : </label>
<input id="float" type="number" placeholder="0.1"
pattern="[0-9](?\.[0-9])?" min="0.1" max="9.9" step="0.1"/>
</p>
145
146
4. - HTML5
, HTML5, API. step stepUp() stepDown():

input.stepUp(x)
input.stepDown(x)
,
step, x 1, .
min max.
pattern number,
, , number.
pattern (graceful
degradation) , pattern, 1.
number, . pattern="[0-9]*" pattern="\d+|\
d+\.\d+" number. min, max step,
.
: <input type="range">
range , , .4.6.
,
.
number, min,
max, step.
Safari 2.0, Safari5 min, max step. ,
- WebKit. Opera, BlackBerry, IE10 Chrome
range. Mobile Firefox range, 23. Android range .

. ,
value. 20 30,
25.
min, max step, 0, 100 1 . ,
range , .
: , ? , . WebKit:
input[type=range]{-webkit-appearance: slider-vertical;}
1
, Safari iOS 6 pattern, number

.
<input>
147
. 4.6.
Windows Phone, BlackBerry 10, iPhone Chrome
, , .
Opera, Presto.
: <input type="search">
search .
, . , ,
, search-cancel-button.
, .4.7.
search ()
. , Go()
Enter ().
: <input type="color">
color , ,
.4.8. color, ,
, .
. #000000. ,
color , .

, indianred (-).
, .
, .
, ,
#[a-zA-Z0-9]{6}.
pattern placeholder, , . ,
148
4. - HTML5
. 4.7. BlackBerry 10 (
) iOS6.1 ( Search ())
. 4.8. BlackBerry 10 Opera Mac
149
color, , :
<label for="clr">: </label>
<input id="clr" name="clr" type="color" placeholder="#000000"
pattern="#[0-9A-Fa-f]{6}" required />

,
, date, datetime, datetime-local, month, time week. ISO 8601. ,
, ,
. date -
, , .
: <input type="date">
date : , .
,
.
.
-.
, ,
: --:
<p>
<label for="date">: </label>
<input id="date" name="date" type="date"
placeholder="YYYY-MM-DD" required />
</p>
<p>
<label for="dob"> : </label>
<input id="dob" name="dob" type="date"
placeholder="YYYY-MM-DD" min="1900-01-01" required />
<p>
date , (pattern). , , . JavaScript,

, ..,
.
.4.9, , date,

. , (, , ).
150
4. - HTML5
date
. /.
, .
. 4.9. , iOS, BlackBerry,

Android Firefox OS,
151
: <input type="datetime">
datetime :
(, , ), (, , ,
). (UTC) , .
min, max step , :
min="2012-03-01T12:00Z".
, ,
:
<p>
<label for="datetime"> : </label>
<input id="datetime" name="datetime" type="datetime" placeholder="YYYYMM-DD"
min="2010-01-01T00:00Z"max="2011-12-31T23:59Z" required />

</p>
<p>
<label for="dte"> : </label>
<input id="dte" name="dte" type="text" placeholder="YYYY-MM-DDT00:00Z"
pattern="\d{4}\-\d{2}\-\d{2}T\d\d\:\d\dZ" required />
</p>
:
<input type="datetime-local">
datetime-local datetime, UTC (Z
).
: <input type="month">
month ,
. ,
, . , min 0001-01, max 2147483647-12. min max. step. , step="6", .
:
<p>
<label for="month">: </label>
<input id="month" name="month" type="month" placeholder="YYYY-MM" required
min="2010-01" max="2020-01" step="6"/>
</p>
JavaScript , 01.
152
4. - HTML5
: <input type="time">
time 24-
. 0,
24.
min max.
, . 60,
60, . step 900 ,
15. , 15:
<p>
<label for="time"> : </label>
<input type="time" min="09:00" max="17:00" name="time" id="time"
step="900" placeholder="12:00" required />
</p>
type , .
, , , . .
: <input type="week">
week , ,
, . 01 52. , 2014 : 2014-W01.
1 , ,
4 . 1 :
<input type="week" name="week" id="week" min="2010-W01" max="2020-W02" required />
week .
, 23 .
:
button;
checkbox;
color;
date;
datetime;
datetime-local;
email;
file;
hidden;
image;
153
month;
number;
password;
radio;
range;
reset;
search;
submit;
tel;
text;
time;
url;
week.

- JavaScript
. ,
,
, .
JavaScript . ,
. , . , URL:
<form>
<ul>
<li>
<label>
: <input name="name" required"/>
</label>
</li>
<li>
<label>
: <input name="email" type="email" required />
</label>
</li>
<li>
<label>
-: <input name="website" type="url" required />
</label>
</li>
154
4. - HTML5
<li>
<input type="submit" value=""/>
</li>
</ul>
</form>
,
. , email url
, . -
,
, , .4.10.
. 4.10. , ,

type pattern, (.4.11).
, iOS Android .
. 4.11. , ,

,
. , HTML5, .
, , , .
, .
JavaScript,
.
, .
155
, HTTP-
.
, , ,
,
.
JavaScript.
HTML5 , - .
HTML5 DOM,
- .
HTML5 ,
validity1.
validity API . , .
validity, :
var element = document.querySelector('#form_control_id');
var validityStateObject = element.validity;
var validityStateObject = document.form_id.form_control_id.validity;
validityStateObject validity:
element.validity.valueMissing. ,
( required), , valueMissing
true, false. valueMissing ,
, ;
element.validity.typeMismatch. true,
, false. , number,
email url, , URL, typeMismatch true;
element.validity.patternMismatch. -
,
pattern, ,
patternMismatch true, false. pattern .
, pattern . , patternMismatch , pattern, .
1
, , . , .
156
4. - HTML5
, pattern title,
. ;
element.validity.tooLong. maxlength,
tooLong. true,
,
false. ,
. maxlength
.
tooLong , maxlength;
element.validity.rangeUnderflow. rangeUnderflow , min.
rangUnderflow true,
;
element.validity.rangeOverflow. rangeOverflow
rangeUnderflow. ,
max;
element.validity.stepMismatch. true,
, step,
false. stepMismatch , step , min .
step
;
element.validity.valid. , valid ValidityState true,
false. , customError, .
false , valid true . -
( true), valid
false;
element.validity.customError.
customError. true, -
() , , .
customError,
.
. , setCustomValidity(message),
message ,
(..4.1, 4.10 4.11).
customError, true, -
157
.
false, .
, ,
customError true. ,
setCustomValidity(""),
.
customError true, ,
, . , .

, .

CSS.
WebKit ,
. ,
, , DOM. ,
:
::-webkit-validation-bubble
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-message
: ::-webkit-vali
dation-bubble. ::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-arrow ,
16 . . ::-webkitvalidation-bubble-message
. , ,
,
CSS1.
1
WebKit, Blink.
Chrome. ,
-.
158
4. - HTML5
, HTML5, , , . ( ) ,
.
. ,

.
, , . .
, , .
, :
<span class="required">*</span>

, . .
HTML5, , CSS.
, , , , , , , , ,
.. ,
, :
input:required,
input:invalid {
background-color: #FFFFFF;
border: 1px solid #FF0000;
}
input:valid {
}
input:read-only {
background-color: #DDDDDD;
}
input:checked + label {
color: #666666;
font-style: italic;
}
159
68. ,
,
, .
ARIA aria-required="true", title
aria-labeledby ,
.

, .
HTML5 : <datalist>, <output>, <keygen>, <progress> <meter>. ,
,
HTML5.
<datalist> list
text, email, url, , , <input>, list.
,
.
list id <datalist>. <datalist> HTML5.
<datalist> <option>,
<input>. <input>,
<datalist>
list, . , list, <datalist>.
<datalist> , <option>. list,
<datalist>
. , <select> (.4.12):
<p>
<label for="url">Animals: </label>
<input id="animals" type="text" placeholder="animals and sounds"
requiredlist="animalnames" name="animals"/>
</p>
<datalist id="animalnames">
<option value="quack">duck</option>
<option value="banana slug" label="sssss"/>
<option value="sheep" label="bah"/>
<option value="horse" label="neigh"/>
</datalist>
160
4. - HTML5
. 4.12. <datalist> ,
( Opera 10.6)
, Google. <datalist>
. , .
, <option>, <datalist>.
, Google,
. AJAX-.
<datalist>.
,
<datalist>. ,
, <option>.
,
, . . <datalist> ( ).
<datalist> ,
.
,
.
, <datalist> (
),
<select>. <datalist>,
, ,
:
<p>
<label for="url">Web Address: </label>
<input id="url" type="url" placeholder="http://www.domain.com"
requiredlist="mydatalist" name="url"/>
</p>
<datalist id="mydatalist">
<p><label>Or select from the list</label>
<select name="url2">
<option value=http://www.standardista.com label="Standardista"/>
<option value="http://www.oreilly.com" label="O'Reilly"/>
<option value="http://www.evotech.net" label="Evolution
Technologies"/>
161
</select>
</p>
</datalist>
, <datalist> (.4.13). <datalist>

<p>, <label> <select> . <datalist>,
<option>, .4.12. JavaScript, ,

.
. 4.13. <datalist> .
<datalist>, <datalist>,
. :
URL, <p> <datalist> .
Next(), <datalist>
, , , JavaScript. HTML :
<input type="text" name="animal" list="dl_animals" id="animals" />
<datalist id="dl_animals">
<select id="slct_animal">
<option value="moo">Cow</option>
162
4. - HTML5
<option value="sssss">Banana Slug</option>

<option value="bah">Sheep</option>
</select>
</datalist>
JavaScript:
var select = document.getElementById('slct_animal'),
input = document.getElementById('animals');
select.addEventListener('change', function() {
input.value = this.value;
}, false);
CSS:
input[list],
datalist select {
float: left;
height: 1.4em;
position: relative;
}
input[list] {
z-index: 2;
width: 20em;
}
datalist select {
width: 1.2em;
}
select name, select

. select ,
(select spinner).
, list.
<output>
<output> <span>, ,
DOM . <output>,
HTML5, form, name for, onchange, onforminput onformchange; , .
output value.
, , . <output> , . ,
DOM.
for <output>
<label>. for <output> ID ,
.
163
<output> , , ,
, for.
CubeeDoo. CubeeDoo <output>
: , , ,
. <output> DOM.
HTML- :
<output name="score">0</output>
<output name="level">1</output>
<output name="time">120</output>
, ,
, 0 , , 2.
JavaScript .
<meter>
, <meter> ,
. <meter>
, . .

, ,
.
<meter>, , min, max, high, low optimum. optimum
, .
min max .
high low
, , , .
, , .
.
. ,
. , high low.
, .
optimum (.4.14).
164
4. - HTML5
. 4.14. <meter>
<meter> . <progress>.
<meter>, ,
, . ,
<progress>.
<progress>
<progress> <meter>, ,
. <meter>,
, <progress> ,
. , <progress> JavaScript,
(.4.15).
<progress> value max.
, value
max.
165
. 4.15. <progress> Firefox OS Chrome Android
<keygen>
<keygen> ,
/. <keygen>
. <keygen> ,
.
<keygen> challenge, keytype, autofocus, name, disabled form, keytype rsa, challenge
, .
Opera, WebKit Firefox. , ;
.

. ,
, ,
HTML5.
166
4. - HTML5
<form>
<form> . . novalidate
(novalidate="novalidate"), .

<form>. form,
, .
, <form> autocomplete.
, action.
, , action
.
<fieldset> <legend>
<fieldset> . <fieldset> <legend>, . <fieldset>
. <legend> ,
<fieldset>. , <legend>
<fieldset> .
disabled,
<fieldset>, <legend>. form,
<fieldset> (
form). name .
<select>, <option>, <optgroup>

<select> . <select>
<option>
<optgroup>, <option>. Safari,
size,
. .
<textarea>
<textarea> , -
, . .
HTML5 wrap. wrap <textarea> soft ( ) hard. soft , ,
, hard . wrap hard, cols.
167
HTML 4 , <textarea>
, rows cols. HTML5 rows cols
<textarea> , HTML4. ,
wrap hard, cols .
rows cols . CSS. .
<button>
<button> : submit, reset button
( submit). <input type="button"/> <button>
. </button>.
.
<label>
<label> HTML5, , , .
<label> -,
. . ,
for. ,
<label>.
for
id .
, /
.

. , . ,
, ,
. ,
, .
<label>, ,
.
HTML5 , JavaScript
,
. -
. , .
,
,
HTML5, ,
API, ,
, .
,
(SVG), (Canvas),
. , -API, , .
.
, - .
.
( Opera Mini)
<canvas>, <video> <audio>, -API, ,
, -
..
,
, , . ,
,
: , -
, .
, , , . , .
API HTML5
HTML
. <img>. . HTML5
SVG, <canvas>, -
API HTML5
169
. , HTML5 <video>
<audio>, .
SVG
SVG
. SVG 2001

. SVG ,
, , .
SVG XML- , , , , , ,
, (, ..),
.
,
. , . ,
. , . SVG .
SVG, .
.svg Android, Android 3 .
SVG <img> iOS 3.2 ,
Android 3.0 IE 8 .
SVG CSS background-image
Android3 , iOS3.2 , Opera Mobile. HTML- <svg> HTML5 iOS5 , Android3 , IE9 (
). Android2.3.3 , Amazon Silk WebOS HP , SVG. SVG
Opera Mini ( <canvas>,
), SVG , Opera Mini
JavaScript.
XML, SVG <html>.
<svg>. XML-,
SVG XML- (SVG DTD). <svg> . SVG <head> <body>.
, <svg> ,
<svg>.
170
5. , ,
SVG .
()
(.5.1).
. 5.1. , SVG
1
2
3
4
5
6
7
8
9
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" height="220" width="320"
version="1.0">
<title> </title>
<desc> </desc>
<rect x="10" y="10" width="300" height="200"
style="fill: #ffffff; stroke: #e7e7e7;"/>
<circle cx="160px" cy="107px" r="60px" fill="#d60818"/>
</svg>5
, ? 13 SVG DTD , , <svg>.

: . CSS background-position
SVG, SVG .
- SVG.
<title> ( 4), SVG . 5 <desc>.
, , SVG.
<desc> <title>, .
SVG ,
aria-label.
6 <rect>, . SVG
: <path>, <rect>, <circle>, <ellipse>, <line>,
<polyline> <polygon>. : x, y, width
height X, Y(
API HTML5
171
), . ,
style.
HTML-, SVG CSS
. style, .
, , , HTML.
CSS , ,
. fill background.
. stroke CSS border.
.
CSS-
SVG-. ,
, 1
SVG,
<img>.
<circle> ( 8) . <circle>
r, . <circle>
, <rect>, . cx X, , cy Y, .
, , fill
<rect> CSS, <circle> .
SVG
, : <img>, <object>
<embed>:
<img src="flag.svg" alt=" "/>
:
<embed type="image/svg+xml" src="flag.svg" width="320" height="220"/>
:
<object data="flag.svg" type="image/svg+xml" width="320" height="220"></object>
: <embed> <object> alt, SVG

. <desc> <title> aria-label ,
1
WebKit Mozilla
SVG <img>, SVG
.
172
5. , ,
SVG-. <svg>,
<img>, <embed> <object>,
CSS.
:
SVG

.
SVG, SVG , .
CSS , . , SVG
, SVG-
CSS, . SVG , , , , (
7):
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="00300329" preserveAspectRatio="xMidYMid meet">
<title> </title>
<style>
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {
background-image: url(images/small.png");
}
}
@media screen and (min-width: 401px) and (max-width: 700px) {
svg {
background-image: url(images/medium.png);
}
}
@media screen and (min-width: 701px) and (max-width: 1000px) {
svg {
background-image: url(images/big.png);
API HTML5
173
}
}
@media screen and (min-width: 1001px) {
svg {
background-image: url(images/huge.png);
}
}
</style>
</svg>
, , viewbox
preserveAspectRatio. viewbox ,
: min-x( X), min-y( Y),
width () height ().
(viewbox), SVG-.
<img>
SVG, <object> . <object> :
<object data="awesomefile.svg" type="image/svg+xml"></object>
<object>
. , width height CSS width height.
SVG- viewbox preserveAspectRatio, <object>
,
, width height.
<object>, <img>, alt. , ()
SVG1, ,
<title>, SVG,
, alt.
<object> SVG . SVG
, @media.
<object>, .
HTTP-:
SVG, .
HTTP-,
data <object> URI 2.
1
2
http://www.iheni.com/just-how-accessible-is-svg/
URI IE9 .
. , ,
, SVG,
https://github.com/estelle/clowncar
174
5. , ,
,
() SVG ().
SVG
SVG.
,
( ),
SVG JavaScript. API SVG-. SVG
, .
W3C ,
API.
SVG. SVG
. Adobe Illustrator, , ,
,
SVG. SVG-,
.
Amaya , SVG,
, , , foreignObject, -, . Amaya
W3C. Amaya SVG,
. Inkscape , Illustrator, CorelDraw Xara. Inkscape SVG, W3C.

CubeeDoo
CubeeDoo SVG. -, SVG-
. -, URI SVG .
. ,
, .
SVG-. , (
.5.2), :
1
2
3
4
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400"
version="1.0">
<desc>, , </desc>
API HTML5
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
175

<rect x="10" y="10" width="80" height="80" style="fill: #d60818;"/>
<rect x="10" y="110" width="80" height="80" style="fill: #ffff33;"/>
<rect x="10" y="210" width="80" height="80" style="fill: #00FF00;"/>
<rect x="10" y="310" width="80" height="80" style="fill: #0000FF;"/>

<circle cx="150" cy="50" r="40" style="fill: #d60818;"/>
<circle cx="150" cy="150" r="40" style="fill: #ffff33;"/>
<circle cx="150" cy="250" r="40" style="fill: #00FF00;"/>
<circle cx="150" cy="350" r="40" style="fill: #0000FF;"/>

<polygon points="250,10210,50250,90290,50" style="fill:
#d60818;"/>
#FFFF33;"/>
#00FF00;"/>
#0000FF;"/>

<polygon points="310,10350,90390,10" style="fill: #d60818;"/>
<polygon points="310,110350,190390,110" style="fill: #FFFF33;"/>
<polygon points="310,210350,290390,210" style="fill: #00FF00;"/>
<polygon points="310,310350,390390,310" style="fill: #0000FF;"/>
</svg>
1 (DTD). 3 , SVG. ,
, SVG- . 4 , , .
710 . 9 : , , 10
210 .
80 80 . #00FF00.
<rect x="10" y="210" width="80" height="80" style="fill: #00FF00;"/>
1316 (). 16 : , 150 350 40.

#0000FF.
<circle cx="150" cy="350" r="40" style="fill: #0000FF;"/>
176
5. , ,
. 5.2. SVG-
1828 :
. . 19
: ,
250 50 . 210 50 .
90 , 290
50 . ,
, #d60818 .
<polygon points="250,10210,50250,90290,50" style="fill: #d60818;"/>
, , ,
.
URI CSS- .
, SVG URI :
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2F
www.w3.org%2F2000%2Fsvg%22%20version%3D%221.0%22%3E%3Crect%20x%3D%220%22%20y
%3D%220%22%20fill%3D%22%23abcdef%22%20width%3D%22100%25%22%20height
%3D%22100%25%22%20%2F%3E%3C%2Fsvg%3E);
CubeeDoo . URI
:
background-image:
background-image:
url("data:image/svg+xml;utf8,%3Csvg%20xmlns=
'http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E
API HTML5
177
%3Cpolygon%20points='39,13%2022,28%206,28%206,47%2022,48%2039,63%2039,14'%20
style='stroke:#111111;stroke-width:5;stroke-linejoin:round;
fill:#111111;'%20/%3E%3Cpath%20d='M%2048,50%2069,26'%20%20style='fill:none;
stroke:#111111;stroke-width:5;stroke-linecap:round'%20/%3E%3Cpath%20%20d='M%20
69,50%2048,26'%20style='fill:none;stroke:#111111;stroke-width:5;
stroke-linecap:round'%20/%3E%3C/svg%3E");
. Amaya. . CSS background-image. url(path/mute.jpg)

url(path/mute.svg) url("data:image/svg+xml;utf8,<svg... />
</svg>");. SVG- .
Internet Explorer, SVG (
IE9 IE10), URI
.
HTML5 (HTML5 Canvas) API JavaScript

. API HTML-
, <canvas>. . CSS- ,
, .
, (WebGL) .
. WebGL ,
. .
, API
.
,
. DOM , <canvas> , . ,
JavaScript . , .
<canvas>.
, .
JavaScript, .
JavaScript .
<canvas> . HTML :
178
5. , ,
<canvas id="flag" width="320" height="220">

. .
</canvas>
, HTML.
<canvas></canvas>. id
JavaScript, DOM.
, ,
<canvas> <canvas> .
API <canvas> , , aria-label.
, , .
JavaScript. (.5.3).
. 5.3. ,
.
JavaScript. <canvas> JavaScript
:
document.getElementById('flag')
document.getElementsByTagName('canvas')[0]
document.querySelector('#flag')
,
API . , :
1
2
3
4
5
6
7
<script>
var el= document.getElementById("flag");
if (el && el.getContext) {
var context = el.getContext('2d');
if (context) {
context.fillStyle = "#ffffff";
API HTML5
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
179
context.strokeStyle = "#cccccc";
context.lineWidth = 1;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba(0, 0, 0, 0.4)';
context.strokeRect(10, 10, 300, 200);
context.fillRect(10, 10, 300, 200);
context.shadowColor='rgba(0,0,0,0)';
context.beginPath();
context.fillStyle = "#d60818";
context.arc(160, 107, 60, 0, Math.PI*2, false);
context.closePath();
context.fill();
}
}
</script>
2 <canvas> id.
, , - . 4 getContext.
, Modernizr.
, . Modernizr
, . Modernizr, , . HTTP-, Modernizr ,
.
5 getContext(contextId)
-. 2d , <canvas>.
, 6,
. .
( )
. WebKit
CSS1, - DOM,
:
background: -webkit-canvas(theCanvas);
CSS :
var context = document.getCSSCanvasContext("2d", "theCanvas", 320, 220);
JavaScript. JavaScript ( CSS ).

1
Firefox 4+ CSS - -moz-element('#myCanvas').
180
5. , ,
6- 13- . ,
, ,
.

. context.
(stroke linewidth), (fill) (shadowOff, setX, shadowOffsetY,
shadowBlur shadowColor) .
strokeRect() 14. ,
SVG: 10, 10, 300, 200.
X, Y, .
,
. SVG ,
, , . stroke, fill, linewidth border , , , . , ,
getImageData().
, , .
15 fillRect
(
fillStyle), , (
).
( 14 15)
: 10, 10, 300, 200.
. ,

.
, .
,
.
, 1,
0,5. .
, ()
, DOM , ,
. , JavaScript
, shadowColor. , , .
, , .
, shadowColor
. 16.
API HTML5
181
beginPath() (17) closePath() (20). , . , , , ,

, . , beginPath() closePath() .
: context.arc(x-offset, y-offset, radius, startAngle, endAngle, an
ticlockwise) , . , context.arc(160, 107, 60, 0,Math.PI*2,
false);. ,
. .
(
). 2, :
. .
, ( 18).
fill() ( 21), fillStyle.
<canvas>. http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html
,
, , , , , .
Canvas HTML5 SVG , , . -

,
.
, SVG XML. ,
JavaScript. : , .
SVG . , .
.
, ,
. SVG ,
. SVG XML, . SVG
182
5. , ,
JavaScript. SVG DOM SVG DOM API

JavaScript. ,
, -, .
.
. : , , . .
DOM.
API.
requestAnimationFrame. , API .
, (, ) ,
. , API ,
.
<canvas> (IE9
). SVG , (
IE9 Android3). SVG Canvas ,
.
SVG . ,
DOM . DOM , , .
DOM, -,
. SVG
DOM, DOM .
. , , , -
.
,
,
.
( ), .
WebGL. ( WebGL)
,
. WebGL BlackBerry10. Fire
foxOS. ,
183
, , .
, - , JavaScript .
WebDL (GPU), (CPU). ,
WebGL . - , , .
/
HTML5
-. , Flash QuickTime.
,
,
.
HTML5 , <video> <audio>. <video> <audio>
( Opera Mini), - .
, ,
. , ,
, .

HTML5 <video> <audio>, ,
.

. , , , iPhone iPad
Flash. <video> <audio>, H.264, AAC (
).
HTML5, . Firefox, Chrome,
Android Opera Ogg/Theora (.ogv). IE9, Safari, Chrome, Android
iOS MPEG4/H.264 (.mp4). Firefox 4+, Chrome, Opera Andro
id (2.3+) WebM/VP8 (.webm). IE9,
(. 5.1).
184
5. , ,
5.1.
(IE9 Ogg WebM)
iPhone/
iPad
<video>
Android
Ogg
H.264
WebM
3.01
2.3
Black
Berry
7
Opera
Mobile
11
11
7
14
Opera
Mini
Win
Chrome
dows/IE Android
9
Firefox
Android
(9*)
(9*)
. Theora/
Ogg, VP8 H.264. Theora/Ogg (.ogv) , Firefox3.5, Chrome4 Opera10.5+. IE . WebM,
VP8, ,
Chrome, Mozilla Firefox Opera10.6.
VP8 .
, Google . , WebM/VP8 , Google Nokia,
-.
H.264 ,
. Adobe
Flash, , Android iPhone, . , Chrome
, . Firefox H.264 2013
. Opera .
, ,
, .5.1.
, .
<video>

. WebM ( VP8 Vorbis)
MP4 ( H.264 AAC). <video>, HTML5, <source>. , Flash.
1
. http://www.broken-links.com/2010/07/08/making-html5-video-work-on-androidphones/
185
<video> <audio>
<video> <audio> ,
.
<video> <audio> :
src. src, , -
URL - .
<source>;
autoplay. autoplay
, ,
. -,
;
loop. loop -
,
. - ,
, ;
controls. controls (, Play, Pause
..);
preload. preload ,
, .
none, . metadata,
, ..,
.
<video>, <audio>:
poster. poster URL ,
,
. ,
,
;
width. width --
, ();
height. height --
, ().
<video> ( ,
.5.2):
<video autoplay controls loop poster="poster.jpg" preload="metadata"
src="video.mp4" height="360" width="480">Fallback Text</video>
186
5. , ,
5.2. <video>
<video>
autoplay

,
controls
,
loop
,
poster="/img/poster.jpg"
,

preload="metadata"
: none, metadata auto
src="/video/video.mp4"

height="360"

Fallback Text ( ) HTML-,

</video>
</video>
HTML5 <audio> <video>

.
HTML5. , CSS,
API. API
,
JavaScript, play(), pause(), muted ended.
HTML5 , , :
<video src="myVideo.mp4" width="400" height="300"
controls poster="myImage.jpg">
You don'tsupport HTML5, but you can still
<ahref="myVideo.ogv"> download the video here</a>.
</video>
, -. , . .
HTML5 <source>. . <source>
( ): src, type media.
, src <video>
<audio>. src <source> .
canPlayType() , .
type . ,
, , .
,
MIME.
187
,
, .
, , .
, . :
<video width="400" height="300" preload="none" poster="posterImg.jpg"
controls>
<source src="myVideo.mp4" type="video/mp4; codecs=avc1.42E01E,
mp4a.40.2"/>
<source src="myVideo.webm" type="video/webm; codecs=vp8, vorbis"/>
<source src="myVideo.ogg" type="video/ogg; codecs=dirac, speex"/>
<object width="400" height="324" type="application/x-shockwave-flash"
data="myVideo.swf"/>
<param name="movie" value="myVideo.swf"/>
<param name="flashvars"
value="image=posterImg.jpg&file=myVideo.mp4"/>

<ahref="linktovideo">
<img src="posterImg.jpg" width="400" height="300"
alt=" "/>
</a>
</object>
</video>
HTML5, .
, ,
. HTML5, Adobe Flash. Flash, <video>
-. ,
.
Flash- 24 , .
, Flash 24, , HTML5.
,
Flash (. ,
<track>):
<video width="400" height="300" preload="none" poster=
"posterImg.jpg" controls>
<source src="myVideo.mp4" type="video/mp4;
codecs=avc1.42E01E, mp4a.40.2"/>
<source src="myVideo.webm" type="video/webm;
codecs=vp8, vorbis"/>
<source src="myVideo.ogg" type="video/ogg;
codecs=theora, vorbis"/>
<img src="posterImg.jpg" width="400" height="300"
188
5. , ,
alt=" " title="Your browser does

not support video"/>
<track kind="subtitles" label="English" src="en.vtt"
srclang="en" default></track>
<track kind="subtitles" label="Deutsche" src="de.vtt"
srclang="de"></track>
</video>
, -,
(). ,
. ,
.
, , ,
..
<audio>:
<audio id="sound">
<source src="music.mp3" type="audio/mp3"/>
<source src="music.ogg" type="audio/ogg"/>

</audio>
Dev.Opera .
<track>. -
, ,
, .
<track>, , , .
<track> <video> <audio>,
src <track> ,
. kind ,
src. kind subtitles, captions, descriptions,
chapters metadata.
- , , :
subtitles. kind . ,
,
. ,
;
captions. , -
. , ,
,
, .
,
;
189
descriptions. , -
, .
, -
;
chapters. , .
;
metadata. , ,
-.
, src.
srclang , <track>.
label <track>.
label
, .
default, <track>
,
<track>. <track>,
.
, JavaScript
JavaScript <audio>
<video>, (feature detection)
JavaScript:
if (createElement('audio').canPlayType) { /* */}
. <audio> <video> play() pause(). HTML

JavaScript . :
<div id="controls" style="display: none">
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>
</div>
<script>
if (document.createElement('audio').canPlayType) {
if (document.createElement('audio').canPlayType('audio/mp3') ||
(document.createElement('audio').canPlayType('audio/ogg')) {
// HTML5 <audio>
document.getElementById('player').style.display = 'block';
} else {
... flash ...
}
</script>
190
5. , ,
:
var videoClip = document.querySelector('#clip');
var playButton = document.querySelector('#playButton');
var pauseButton = document.querySelector('#pauseButton');
playButton.addEventListener('touchEnd', function() {
playVideo();
});
pauseButton.addEventListener('touchEnd', function() {
pauseVideo();
});
function playVideo() {
//
videoClip.play();
//
playButton.disabled = true;
pauseButton.disabled = false;
}
function pauseVideo() {
//
videoClip.pause();
//
playButton.disabled = false;
pauseButton.disabled = true;
}
function MuteUnMute() {
//
document.getElementById('mute').value = videoClip.muted ? 'Mute' :
'Unmute';
//
videoClip.muted = videoClip.muted ? false : true;
}
CubeeDoo. .
, , , , ,
, ..
,
<audio>, . - , JavaScript.
,
. , HTML:
191
<audio id="nonmatchsound" preload src="notmatch.mp3"></audio>

<audio id="matchsound" preload src="match.mp3"></audio>
, , .
JavaScript:
playSound: function(matched) {
if (qbdoo.mute) {
return false;
}
if (matched) {
qbdoo.matchfound.play();
} else {
qbdoo.failedmatch.play();
}
},
, HTML.
JavaScript,
:
playSound: function(matched) {
//
if (qbdoo.mute) {
return false;
}
//
if (!qbdoo.audio) {
qbdoo.audio = document.createElement('audio')
}
if (matched) {
qbdoo.audio.src = qbdoo.matchedSound;
}
else {
qbdoo.audio.src = qbdoo.failedMatchSound;
}
qbdoo.audio.play();
},
, , <audio>.
. ,
. ,
LocalStorage ( 6).

<video> HTML-.
, .
192
5. , ,
CSS. ,
. , (, CSS-).

, .
,
( ).
(intrinsic dimensions).
(, ) . ,
.

(4:3, 16:9 ..).
, .
, . ,
56,25 75% . , <video> .
, :
.wrapper {
position: relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
/ * */
padding-bottom: 75%;
}
video {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<video>
Flash ,
.
<video> . , iPhone, Android Windows Phone8 . iPad
193
Fullscreen ( ), . iOS Android
(GPU), Android 4 CPU.

, mime- ,
Firefox . .htaccess AddType video/ogg.ogv, .
iPhone iPad (autoplay)
, .
,
. ,
JavaScript.
http://videojs.com/.
,
GPL Handbrake, Mac OSX, Linux Windows.

,
. ,
. , .
API HTML5
-,
-
. -, ,
.
, - , . ,
, . ,
, ,
Submit (), .
HTML5 , ,
HTTP- .
. HTML5 ,
,
, .
indexDB, API , , , API LocalStorage SessionStorage.
?
, , ,
. HTML5 onLine (Navigator).
, :
var isOnline = navigator.onLine;
true false ( ). , true, , , .
-,
195

,
, , , .
, CubeeDoo , Wi-Fi, ,
, . -,
.
HTML-
.
, ,
.
-
.
-, HTML5
, API
(AppCache).
,
. , ,
.
:
;
;
.
.
5 ( 5 ). .
,
, , .
, <html> manifest.
URL , .
HTML- manifest="URL_of_manifest":
<!doctype HTML>
<html manifest="cubeedoo.appcache">
<title>...
196
6. API HTML5
<html> manifest,
(), , ,
, , ,
. . , , , .
, , .
? manifest,
, . , , , ,
. , , , .
,
, , .
, , . , , .
, , . . , .
, .
,
. , .
,
. , .

.appcache . ,
. CACHE MANIFEST. , ,
.
.appcache MIME- text/cache-manifest. :
AddType text/cache-manifest .appcache
.htaccess . . . .appcache
:
-,
197
CACHE MANIFEST
#version01
#
CACHE:
index.html
css/styles.css
scripts/application.js
# ,
NETWORK:
signin.php
dosomething.cgi
FALLBACK:
/ 404.html
: , ,
.
#. .
,
- .
: CACHE, FALLBACK, SETTINGS NETWORK.
.
, CACHE, .
, ,
CACHE. : , (HTTPS), ,
, .
, <html> , , CACHE.
, .
, NETWORK, . ,
.
, FALLBACK, : ,
, , . ,
. SETTINGS prefer-online.
cache.appcache ( ),
, , .
198
6. API HTML5
JavaScript applicationCache. ,
, , JavaScript, HTML
CSS. .
, ,
. ,
#version01 #version02, ,
. ,
. : , ,
, .
,
. -, . .appcache .appcache, .
,
, . . , , , (
, ).

, .
, ,
, ,
.appcache , .
. ,
- .
, , .
,
. , -.
, .
, applicationCache.update().
(UPDATEREADY), :
var appCache = window.applicationCache;
if (appCache.status == appCache.UPDATEREADY) {
appCache.swapCache();
}
: UNCACHED, IDLE, CHECKING,

DOWNLOADING, UPDATEREADY OBSOLETE.
- ,
.
-,
199
, , .
, ,
, -. ,
,
.
,

updateready. , .
,
.
CubeeDoo .
, . , (
, , ).
- , CACHE:
FALLBACK:, :
CACHE MANIFEST
#version01
CACHE:
index.html
css/cubeedoo.css
scripts/cubeedoo.js
assets/matched.mp3
assets/notmatched.mp3
images/shapes.svg
NETWORK:
login.html
FALLBACK:
/ 404.html
, manifest
<html> . . , -,
:
<html lang="en-us" manifest="cubeedoo.appcache">
, - ,
.
404 ( ), .
200
6. API HTML5

-
, . , . ,
CubeeDoo (),
, ,
. , ,
. LocalStorage, IndexedDB
Web SQL, .
LocalStorage Web SQL (
, - ).
. IndexedDB, iOS Android (
IE10, Blink Firefox).
LocalStorage SessionStorage /
. : cookie, ?
, cookie ,
LocalStorage.
cookie
Cookie , . cookie ( ), -
HTTP. cookie. HTTP ,
. cookie , JavaScript. ,
,
, .
300400cookie, cookie
4,
20cookie. HTTP- cookie.
,
,
. , cookie .
cookie 80
( 20cookie-, 4),
. , , , , .
201
-,
LocalStorage
. LocalStorage
, .
LocalStorage .
SessionStorage ,
, . SessionStorage
, , ,
.
,
, ,
SessionStorage. , ,
SessionStorage, / LocalStorage .
HTTP- ,
cookie. , cookie,
, . HTML5 cookie . , .
LocalStorage SessionStorage .
.6.1 . SessionStorage,
LocalStorage.
6.1. SessionStorage LocalStorage
setItem(key, value)
. ,
:
SessionStorage.setItem('keyname', 'data value')
LocalStorage.setItem('keyname', 'data value')
getItem(key)
. null,
:
SessionStorage.getItem('keyname')
SessionStorage.keyname
LocalStorage.getItem('keyname')
LocalStorage.keyname
removeItem(key)
. :
SessionStorage.removeItem('keyname')
LocalStorage.removeItem('keyname')
clear()
/. :
SessionStorage.clear()
LocalStorage.clear()

202
6. API HTML5
6.1 ()
key(position)
, :
SessionStorage.key(position)
LocalStorage.key(position)
length
length . ,
/ SessionStorage:
SessionStorage.length
LocalStorage.length
SessionStorage LocalStorage . , : SessionStorage

LocalStorage .
, API .
,
, JSON . , HTTP-.
LocalStorage

, http://m.bing.com/, LocalStorage
HTTP-, .
<style> :
( <style>, 2) , HTTP- , JavaScript
CSS / LocalStorage.
/.
cookie.
, cookie-, , . ,
. , HTTP-.
,
,
LocalStorage.
,
1.
1
sessionStorage http://www.nczonline.net/blog/2009/
07/21/introduction-to-sessionstorage/
-,
203

, , , Wi-Fi, , , ,
.
, , ,
,
. , LocalStorage. Financial Times
, .
CubeeDoo
CubeeDoo LocalStorage , . SessionStorage , . SessionStorage
LocalStorage .
.
API .
CubeeDoo .
. ,
, ,
.
LocalStorage ,
. , API
. LocalStorage , , ,
.. ,
. SessionStorage,
.
/ SessionStorage
, .
SessionStorage .
SessionStorage LocalStorage
, . ( )
, , , , .
, , SessionStorage. SessionStorage , .
204
6. API HTML5
, ,
SessionStorage. ,
, ,
.
, , , JavaScript.
SessionStorage
, HTML5 ! SessionStorage,
localStoragr, .
( ) :
storeValue , ;
alterValue , ;
pauseGame , LocalStorage;
playGame ,
. , ;
reset LocalStorage , ,
. , .
: qbdoo
CubeeDoo. , :
1 var qbdoo = {
2
//
3
currentLevel: 1,
4
currentTheme: "numbers",
5
gameDuration: 120,
6
score: 0,
7
matchedSound: 'assets/match.mp3',
8
failedMatchSound: 'assets/notmatch.mp3',
9
mute: true,
10
cardCount: 16,
11
iterations: 0,
12
iterationsPerLevel: 2,
13
possibleLevels: 3,
14
maxHighScores: 5, ...
, , , , , .. .
.
, SessionStorage.
storeValues() :
1
2
3
4
storeValues: function(newgame) {
var currentState = {};
//
currentState.currentTheme = qbdoo.currentTheme;
-,
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
205
currentState.timeLeft = qbdoo.timeLeft;
currentState.score = qbdoo.score;
currentState.cardCount = qbdoo.cardCount;
currentState.mute = qbdoo.mute;
currentState.iterations = qbdoo.iterations;
//
//
if (newgame == 'newgame') {
currentState.currentLevel = qbdoo.currentLevel;
currentState.score = 0;
currentState.gameDuration = qbdoo.gameDuration;
SessionStorage.setItem('defaultvalues',
JSON.stringify(currentState));
return;
} else {
return currentState;
}
},
storeValues() , ,
,
JavaScript. .
, ,
, . , , 49 1416,
( ).
currentState,
. 17 JSON
stringify() JSON.
SessionStorage defaultvalues.
setItem() SessionStorage. defaultvalues getItem(). playGame().
alterAValue()
, storeValues(), ,
:
23
24
25
26
27
28
29
30
31
32
alterAValue: function(item, value) {

var currentState =
JSON.parse(SessionStorage.getItem('defaultvalues'));
if (value) {
currentState[item] = value;
} else {
qbdoo[item] = currentState[item];
}
SessionStorage.setItem('defaultvalues',
return value;
},
206
6. API HTML5
alterAValue() ,
. ,
.
/ , . alterAValue()
SessionStorage, ,
SessionStorage , ,
, .
SessionStorage
getItem(), 24. JSON,
SessionStorage , setItem()
storeValues(). JSON,
JSON getItem(). JSON.parse()
currentState .
alterAValue(), , . currentState
, .
, alterAValue()
.
pauseGame() playGame()
,
:
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
pauseGame: function(newgame) {
var currentState = {}, i, cardinfo = [];
if (qbdoo.game.classList.contains('paused')) {
qbdoo.playGame();
return false;
}
qbdoo.pauseOrPlayBoard('pause');
currentState = qbdoo.storeValues();
currentState.currentLevel = qbdoo.currentLevel;
for (i= 0; i< qbdoo.cardCount; i++) {
cardinfo.push(qbdoo.cards[i].dataset);
}
currentState.cardPositions = JSON.stringify(cardinfo);
LocalStorage.setItem('pausedgame',
qbdoo.clearAll();
},
-,
207
pauseGame()
(Pause/Game), . .
. , 3638 , ,
( paused), playGame(), .
, 41 pauseOrPlayBoard(),
.
, .
, . , , storeValues() 42 (
).
43 currentLevel.
, /
cardinfo. 4547. JSON, pausedgame.
50 LocalStorage.
, clearAll().
,
data-value 0 . ,
data-value . 7
, .
classList. : 36 classList. classList, DOM, , ,
DOM.
classList class :
node.classList.add(class) ;
node.classList.remove(class) ,
. , ;
node.classList.toggle(class) ,
, , ;
node.classList.contains(class) : true, DOM , false
;
classList iOS 5 , Android 3 , IE10.
, Pause Play.
CSS paused, pauseGame(). ,
36 true, playGame():
55
56
playGame: function(newgame) {
var cardsValues, cards, i, currentState = {};
208
57
58
59
6. API HTML5
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
if (newgame == 'newgame') {
currentState =
JSON.parse(SessionStorage.getItem('defaultvalues'));
qbdoo.timeLeft = qbdoo.gameDuration = currentState.gameDuration;
} else {
//
currentState = JSON.parse(LocalStorage.getItem('pausedgame'));
if (qbdoo.game.classList.contains('paused')) {
qbdoo.game.classList.remove('paused');
}
qbdoo.timeLeft = currentState.timeLeft;
}
qbdoo.reset('pausedgame');
qbdoo.currentTheme = currentState.currentTheme;
qbdoo.mute = currentState.mute;
qbdoo.currentLevel = currentState.currentLevel;
qbdoo.score = currentState.score;
qbdoo.cardCount = currentState.cardCount;
qbdoo.iterations = currentState.iterations;
qbdoo.setupGame(currentState.cardPositions);
},
playGame() ,
, , .
, , . ,
. playGame()
.
( 5860), SessionStorage. getItem(). ,
currentState.
gameDuration , , timeLeft.
, ,
, LocalStorage. getItem(),
pausedgame, defaultvalues. pausedgame . pausedstate JSON
currentState. paused.
.
defaultvalues, SessionStorage, ,
LocalStorage.
setupGame, .
-,
209
70 reset(), , LocalStorage.
removeItem(), / LocalStorage, :
81
82
83
reset: function(item) {
LocalStorage.removeItem(item);
}
CubeeDoo ,
.
JSON.stringify(),
JSON, LocalStorage.
SessionStorage 30.
SessionStorage, defaultvalues, JSON,
. 625 ,
, , 1825 API ,
2. /, .
, LocalStorage:
gameState = LocalStorage.getItem('cubeedoo');
:
LocalStorage.removeItem('cubeedoo');
, LocalStorage SessionStorage, (.6.1).
. 6.1. LocalStorage SessionStorage

-
: LocalStorage
SessionStorage ,
210
6. API HTML5
. , , .
SessionStorage .
, ,
player, SessionStorage:
if (!player || player == 'UNKNOWN') {
player = qbdoo.player = prompt('Enter your name') || 'UNKNOWN';
SessionStorage.setItem('user', player);
}
:
player: SessionStorage.getItem('user') || '',
, SessionStorage.
. ,
cookie,
. LocalStorage,
, ,
. , , ,
SessionStorage.
- CubeeDoo . ,
, LocalStorage.
SessionStorage, , , , SessionStorage,
. , ,
. ,
, ,
,
SessionStorage, LocalStorage.
, ,
LocalStorage, SessionStorage.
. ,
!
SQL/
HTML5 .
, - Web SQL,
.
,
(, IE Firefox). IndexedDB
, Web SQL WebKit Opera Mobile, . ,
-,
211
Web SQL , iOS

Android IndexedDB.
, ?
. SQL
, /.

. API
. LocalStorage , ,
.
, API .
SQL, Web SQL ,
.
Web SQL
openDatabase. openDatabase() : , , .
openDatabase() .
, . , , :
window.openDatabase(database_name, database_version, display_name, db_size);
,
.
CubeeDoo : LocalStorage
Web SQL. , Web SQL,
. ,
LocalStorage.
qbdoo.storageType:
storageType: (!window.openDatabase)? "WEBSQL": 'local',
Web SQL ,
, , .
, :
var dbSize = 5 * 1024 * 1024; // 5 dbSize
if (!qbdoo.db) {
if (window.openDatabase) {
qbdoo.db = openDatabase("highscoresDB", "1.0", "Scores", dbsize);
}
}
212
6. API HTML5
. transaction()
: , ,
. transaction()
, openDatabase(), ,
openDatabase(), .
SQL-, executeSQL():
db.transaction(transaction_callback, error_callback, success_callback)
executeSQL. executeSQL() : SQL-, , SQL- SQL, . SQL- SQL-,

:
db.transaction(function(trnactn) {
trnactn.executeSql('SELECT * FROM scores', [], callbackFunc,
db.onError);
});
CubeeDoo :
saveHighScores: function(score, player) {
qbdoo.db.transaction(function(tx) {
tx.executeSql("INSERT INTO highscoresTable (score, name, date)
VALUES (?, ?, ?)", [score, player, new Date()], onSuccess,
qbdoo.onError);
});
function onSuccess(tx, results){
//
}
},
SQL ,
, ,, SQL,
. ,
SQL ( Web SQL), Safari,
Chrome Opera, Firefox Internet Explorer.
, - WebKit Opera,
- . LocalStorage
, IndexedDB.
CubeeDoo
, CubeeDoo
Web SQL. Web SQL
, LocalStorage. storageType qbdoo:
storageType: (window.openDatabase)? "WEBSQL": 'local',
-,
213
, , , .
, , . Web SQL
, , ASC
DESC , .
SQL- create:
createTable: function() {
var i;
tx.executeSql("CREATE TABLE highscoresTable (id REAL UNIQUE, name
TEXT,
score NUMBER, date DATE )", [],
function(tx) {console.log('highscore table created'); },
qbdoo.onError);
});
},
SQL- insert LocalStorage setItem() (

Web SQL):
saveHighScores: function(score, player) {
if (qbdoo.storageType === 'local') {
LocalStorage.setItem("highScores",
JSON.stringify(qbdoo.highScores));
} else {
tx.executeSql("INSERT INTO highscoresTable (score, name, date)
VALUES (?, ?, ?)", [score, player, new Date()],
onSuccess,
qbdoo.onError);
});
function onSuccess(tx,results){
//
}
}
}
. , LocalStorage Web SQL. SQL select

:
loadHighScoresLocal: function() {
var scores = LocalStorage.getItem("highScores");
if (scores) {
qbdoo.highScores = JSON.parse(scores);
}
214
6. API HTML5
qbdoo.sortHighScores();
}
},
loadHighScoresSQL: function(){
var i, item;
tx.executeSql("SELECT score, name, date FROM highscoresTable
ORDER BY score DESC", [], function(tx, result) {
for (i= 0, item = null; i< result.rows.length; i++) {
item = result.rows.item(i);
qbdoo.highScores[i] = [item['score'], item['name'],
item['date']];
} // for
}, onError); //
function onError(tx, error) {
if (error.message.indexOf('no such table')) {
qbdoo.createTable();
} else {
console.log('Error: ' + error.message);
}
}
qbdoo.renderHighScores();
}); //
},
renderHighScores() :
//
renderHighScores: function(score, player) {
var classname, highlighted = false, text = '', i;
for (i= 0; i< qbdoo.maxHighScores; i++) {
if (i< qbdoo.highScores.length) {
if (qbdoo.highScores[i][1] == player && qbdoo.highScores[i][0]
== score) {
classname = ' class="current"';
} else {
classname = '';
}
text += "<li" + classname + ">" +
qbdoo.highScores[i][1].toUpperCase() +
": <em>" + parseInt(qbdoo.highScores[i][0]) + "</em></li> ";
}
}
qbdoo.highscorelist.innerHTML = text;
},
SQL- drop ,
. Web SQL ,
reset() removeItem(), LocalStorage:
215
eraseScores: function() {
qbdoo.reset("highScores");
} else {
tx.executeSql("DROP TABLE highscoresTable", [],
qbdoo.createTable,
qbdoo.onError);
});
}
qbdoo.highscorelist.innerHTML = '<li></li>';
},
onError: function(tx, error) {
console.log('Error: ' + error.message);
},
reset: function(item) {
LocalStorage.removeItem(item);
}
IndexedDB
IndexedDB
.
, , .
DOM , IndexedDB
.
,
. API,
, ,
IndexedDB , Web SQL.

HTML5 -
, API,
. , HTML5 API ,
(, ).
HTML5 -, -, -. API
,
. , ARIA, -.
216
6. API HTML5

. , (, , ).
, , , , , .

(.6.2).
(opt-in): - , .
.
; , . ,
, , .
, ,
.
. 6.2. ,

217

IP-, , Wi-Fi, GPS
, . , .
API , , ,
. API
.
, ,
:
if (navigator.geolocation) {
//
}
getCurrentPosition() watch
CurrentPosition(),
. , . watchCurrentPosition() , , , GPS-. -
, getCurrentPosition().
. CubeeDoo , :
navigator.geolocation.getCurrentPosition(handle_success,
handle_errors);
}

coords, latitude longitude,
altitude, accuracy, altitudeAccuracy, heading speed.
.
navigator.geolocation.getCurrentPosition(handle_success,handle_errors);
function handle_success(position) {
alert('Latitude: ' + position.coords.latitude + '\nLongitude: '
+ position.coords.latitude);
}
function handle_errors(err) {
switch(err.code) {
case err.PERMISSION_DENIED:
alert("User refused to share geolocation data");
218
6. API HTML5
break;
case err.POSITION_UNAVAILABLE:
alert("Current position is unavailable");
break;
case err.TIMEOUT:
alert("Timed out");
break;
default:
alert("Unknown error");
break;
}
getCurrentPosition() watch
CurrentPosition() coords, :
position.coords.latitude;
position.coords.longitude;
position.coords.altitude;
position.coords.accuracy.
watchCurrentPosition() :
position.coords.heading;
position.coords.speed.
.
, Kindle Opera Mini,
(IE9 ).
CubeeDoo ,
:
1 function getLocation() {
2
3
navigator.geolocation.getCurrentPosition(success, error);
4
console.log('got position');
5
} else {
6
error('not supported');
7
}
8
}
9
function error(text) {
10
text = text || 'failed';
11
console.log(text);
12
}
13
function success(location) {
14
var lat = location.coords.latitude;
15
var long = location.coords.longitude;
16
var url = "http://maps.google.com/maps?q=" + lat + "," + long;
17 }
219
getLocation() 2 ,
. : navigator (
,
). getCurrent
Position() geolocation 3. latitude longitude coords ,
1416 Google. 9 , . , .
-
JavaScript,
, . , , ,
.. , , ,
. -
JavaScript, ,
. , , , . - ,
, ,
.
- AJAX. , .
, -
.
, . . JavaScript
,
DOM .
, ,
, - - . , postMessage().
JavaScript - ,
-, . -, , . -
220
6. API HTML5
, ,
:
if (window.Worker) {
// -
}
-, Worker()
URI , . URI , :
var webWorker = new Worker('subcontractor.js'); //
}
- postMessage().
-, onmessage , -.
terminate() close().
terminate() , :
var webWorker = new Worker('subcontractor.js'); //
webWorker.postMessage(some_message);
}
( subcontractor.js)
:
// subcontractor.js
self.onmessage = function(event) {
//
var stuff = event.data;
//
postMessage(stuff);
};

. , ,
, . setTimeout() , clearTimeout() , setInterval()
clearInterval().
importScripts(),
. URI
:
/* */
importScripts('scripts/jquery-min.js', 'application.js');
- DOM, . , .
221
- ,
JavaScript.
CubeeDoo JavaScript,
AJAX. -,
. ,
-. 1000000 , - (
LocalStorage ).
- ,
-:
var webWorker = new Worker('js/sort.js');
webWorker.postMessage(qbdoo.highscores);
webWorker.onmessage(function(event) {
qbdoo.highscores(event.data);
});
-, ,
highscores onmessage,
postMessage:
self.onmessage = function(event) {
var sortedScores = sortScores(event.data);
self.postMessage(sortedScores);
};
HTML5 .
, .
.
, , . - ,
,
, , .
class. , ,
, , , .
,
HTML5, - . , HTML5, itemscope, itemprop, itemref itemtype.
itemscope ,
, , . itemprop, ,
222
6. API HTML5
. itemprop ,
itemprop,
itemprop itemref . , itemscope, itemref,
ID-.
itemprop.
,
.
.
http://www.data-vocabulary.org/.

.
. , ,
, RDF.
itemscope, itemprop, itemtype .. -
class ,
, . , .
, class
HTML- ( <span> <div>)
. ,
HTML5.
HTML5, :
<ul>
<li><img src="http://standardista.com/images/estelle.jpg"
alt="photo of Estelle Weyl"/></li>
<li><ahref="http://www.standardista.com">Estelle Weyl</a></li>
<li>1234 Main Street<br />San Francisco, CA 94114</li>
<li>415.555.1212</li>
</ul>
, hCard (
):
<ul id="hcard-Estelle-Weyl" class="vcard">
alt="photo of Estelle Weyl" class="photo"/></li>
<li><aclass="url fn" href="http://www.standardista.com">Estelle
Weyl</a></li>
<li class="adr">
<span class="street-address">1234 Main Street</span>
<span class="locality">San Francisco</span>, <span
class="region">CA</span>,
<span class="postal-code">94114</span>
223
<span class="country-name hidden">USA</span>

</li>
<li class="tel">415.555.1212</li>
</ul>
class="vcard" , HTML <ul> , . hCard, HTML vCard. ,

, .
: ,
, , URL . ,
. , fn (full name).
. , adr : , ,
, . CSS,
hidden
. hCard http://microformats.org/code/
hcard/creator.
:
<ul id="hcard-Estelle-Weyl" itemscope
itemtype="http://microformats.org/profile/hcard">
<li><ahref="http://www.standardista.com" itemprop="fn">Estelle
Weyl</a></li>
<li itemprop="adr">
<span itemprop="street-address">1234 Main Street</span>
<span itemprop="locality">San Francisco</span>,
<span itemprop="region">CA</span>,
<span itemprop="postal-code">94114</span>
<span class="hidden" itemprop="country-name">USA</span>
</li>
<li itemprop="tel">415.555.1212</li>
</ul>
:
<ul id="hcard-Estelle-Weyl" class="vcard" itemscope
itemtype="http://microformats.org/profile/hcard">
<li><aclass="url fn" href="http://www.standardista.com"
itemprop="fn">Estelle Weyl</a></li>
<li class="adr" itemprop="adr">
<span class="street-address" itemprop="street-address">1234 Main
Street</span>
<span class="locality" itemprop="locality">San Francisco</span>,
<span class="region" itemprop="region">CA</span>,
<span class="postal-code" itemprop="postal-code">94114</span>
224
6. API HTML5
<span class="country-name hidden" itemprop="country-name">USA</span>

</li>
<li class="tel" itemprop="tel">415.555.1212</li>
</ul>
,
. , .
, . ,
.
.
API
API ,
. document.getItems(itemType) nodeList, , . document.getItems() nodeList, , .
URL ,
.
nodeList,
properties:
var allMicrodata = document.getItems();
var firstItemName = allMicrodata.properties['name'][0].itemValue;
DOM ,
itemscope.

. , .
- ,
. - ,
. JavaScript,
.
cookie , , , . , , .
- (ARIA)
225
API HTML5
.
,
.
, , ,
:
window.addEventListener('message', function(e) {
if (e.origin == 'http://the_domain.com') {
// . ,
//
}, false);
:
var theFrame = document.getElementById("myIFrame").contentWindow;
theFrame.postMessage("The message", "http://www.the_domain.com");
CORS:
CubeeDoo
,
,
.
, , ,
(CDN) . ,
,
CORS, Firefox Internet Explorer: , , .
. origin, , . ,
, , . ,
, .

- (ARIA)
HTML5, , . . ARIA (
-) HTML5,
. JavaScript ARIA. ARIA HTML5
226
6. API HTML5
:
Flash . , , Flash , .
HTML5 <video>, <audio>, <svg> <canvas>, ,
<canvas>, . DOM, .
-,
, ,
- . ARIA

, ,
JavaScript-. , ,
. , . . . ,
? API ARIA ( )
.
, ARIA
-. JavaScript,
.
-,
- (WCAG 1). ,
:
JavaScript.
-,
, JavaScript , . ARIA . , ,
. ,
.
,
ARIA, . ARIA, , ,
, ,
. ARIA
, . ARIA .
ARIA title , . ,
- (ARIA)
227
! JavaScript, jQuery Dojo, ARIA .

, IE8, ARIA.

ARIA role, .
, ARIA , -
HTML- .
role ARIA , -
, ,
. ,
().

, .
, , , . , ARIA,
.
, .
.
, -
, ARIA CSS
role , . ,
, <span> , role , , , . role ,
,
.
, , . : . ,
CSS <span> , <input type="checkbox"....
, ,
, , <span>. ARIA role ,
ARIA,
:
<span role="checkbox" aria-checked="true" tabindex="0"/>
role.
<span>, ,
, ,
228
6. API HTML5
. , , .
60 ARIA, :
alert
alertdialog
application
article
banner
button
checkbox
columnheader
combobox
complementary
contentinfo
definition
dialog
directory
document
form
grid
gridcell
group
heading
img
link
list
listbox
listitem
log
main
marquee
math
menu
menubar
menuitem
menuitemcheckbox
menuitemradio
navigation
note
option
presentation
progressbar
radio
radiogroup
region
row
rowgroup
search
scrollbar
separator
slider
spinbutton
status
tab
tablist
tabpanel
textbox
timer
toolbar
tooltip
tree
treegrid
treeitem
role,
. , role="checkbox" <input type="checkbox"/>.
, <span> ,
ARIA <span role="checkbox">. ,
, .
-
- WAI-ARIA,
http://www.w3.org/WAI/intro/aria.php.
API, HTML5.
. , .
, ,
, .

CSS3
CSS3 10.

WebKit/Blink, Opera Firefox. IE10 IE11! ( ) . CSS.
Internet Explorer (IE8
), CSS3-.
,
.
CSS2 1998. CSS3, , , .
? CSS 2.1 . CSS3 ,
CSS 2.1.
CSS-,
. ,
, 3 (level 3),
4.
1. , , CSS3.
WebKit/Blink, Opera Mozilla . Internet Explorer9 - Microsoft.
.
,

CSS3.
- -
230
7. CSS3
IE, CSS3 HTML5

, Windows ( PlayStation, Wii
..), , ,
. HTML5 CSS3 ,
, , , Windows,
, .
CSS
DOM- JavaScript ( jQuery). CSS3,
CSS-. , ,
, CSS3,
HTML-,
, HTML
.
CSS:
CSS3,
CSS. , , ,
CSS, CSS-.
, CSS.
(Cascading Style Sheets (CSS)) -. CSS
,
. CSS ,
. : , ,
, CSS-,
. ,
, . CSS-,
-.
HTML ,
<font> <center>, -
. - (HTML)
(CSS) (JavaScript). , <font color="green">,
.
color="green" -.
CSS:
231
1996!
,
1996, - CSS. <center>, <b>, <i>1, <font>, <tt> , .
CSS.
...
CSS
, . , , .
CSS- :
{
1: 1;
2: 2;
}
, ( )
. ,
, ,
.
/
, 8.
CSS- ,
, .
, .
,
:
p{
color: blue;
margin-bottom: 12px;
}
: ,
12 .
,
, . ,
! , , ,
1
3, HTML 5 <i> <b>

, , .
232
7. CSS3
, , , ,
.
, CSS ,
.
CSS , .
, ,
, , , ,
(ID). .
, , :
,
.
, <p> style:
<pstyle="color:blue; margin-bottom: 12px;">
:
<style>
p{
color: blue;
margin-bottom: 12px;
}
</style>
, <style>, <style
type="text/css">. HTML5 type="text/css" , .
, <link>:
<link rel="stylesheet" src="styles.css"/>
.
- ,

, - . , , @import <link>.

. CSS, , .
CSS:
233
CSS . , . -.

- , , (anti-pattern) ,
HTTP-. 2
<style>.
HTTP-.
:
<link>
<link>. <link>
2, . ,
CSS. , :
<link type="text/css" rel="stylesheet" src="styles.css" media="all"/>
XHTML , MIME-
type="text/css". , ,
( ) CSS-. ,
HTML5 , - CSS, ,
, . (relation rel)
"stylesheet", , (type) test/css,
, (media) "all":
<link rel="stylesheet" src="styles.css"/>
rel,
rel="stylesheet". CSS. CSS, , . , , .
rel , .
"stylesheet",
, text/css.
234
7. CSS3
src URL-, , CSS.

<link> .
XHTML, .
media. media, , media="all", . ,
CSS , :
All , ;
braille , -
;
embossed ;
handheld , -
. , ,
iPad ,
screen all,
handheld;
print ,
PDF-
;
projection -
;
screen , -
, ,
, , ;
speech . ,
CSS 2 aural;
tty ,
(, , );
tv , ,
.
, , , media="screen", media="all" , all.

@media:
235
CSS:
@media screen {
p{
color: blue;
}
}
@media print {
p{
color: red;
}
}
CSS3 media .
CSS
, ,
(SVG)
. HTML, ,
, media
, CSS-
:
<link media="only screen and (max-device-width: 480px)"
href="mobile.css" rel="stylesheet"/>
,
, .7.1.
7.1. @media-
width

min-width
height
min-height
device-width
device-height
orientation
min-device-width
min-device-height
aspect-ratio
min-aspect-ratio
device-aspect- ratio
min-device-aspect-ratio

max-width

max-height

max-device-width

max-device-height

( ).
(
)
max-aspect-ratio

max-device-aspect-ratio
,
236
7. CSS3
. , iPhone :
<link media="only screen and (width: 320px) and (orientation: portrait)"
href="iphone.css" rel="stylesheet"/>
. . ,

, , , . ,
, , , ,
.

CSS-, .
, ( ) ,
. 1400 1
320:
#content { background-image: url(/images/small/bg.jpg);
}
#content { background-image: url(/images/large/bg.jpg);
}
, @media- ,
.
. ,
.
. . ,
.
@media 11.
,
:
1
Java
Script, , , ,
:
width = window.innerWidth;
height = window.innerHeight;
CSS:
237
@media screen and (transform-3d) {

.transforms {}
}
, -
.
@supports-:
@supports (display: table-cell) and (display: list-item) {
.query .supports { display: block; }
}
(supports query) ,
CSS
CSS-. ,
.
window.matchMedia. CSS, CSSOM . window.matchMedia1, , MediaQueryList (mql),
:
var mql = window.matchMedia(mediaquery);
if (mql.matches) {
//
}
mediaquery .
, ,
500 :
var mqobj = window.matchMedia('(orientation: portrait)');
if (mqobj.matches) {
document.querySelector('body').classList.add('portrait');
}
if (window.matchMedia("(max-width: 500px)").matches) {
// , 500
} else {
// , 500
}
.
, ,
:
1
iOS 5 Android 3, window.matchMediais

, IE.
238
7. CSS3
var mqobj = window.matchMedia('(orientation: portrait)');

mqobj.addEventListener('orientationchange', bodyOrientationClass);
function bodyOrientationClass() {
if (mqobj.matches) { //
document.querySelector('body').classList.remove('landscape');
document.querySelector('body').classList.add('portrait');
} else {
document.querySelector('body').classList.remove('portrait');
document.querySelector('body').classList.add('landscape');
}
}
addEventListener, ,
. ,
.
:
myobj.removeEventListener('orientationchange', bodyOrientationClass);
CSS
( !), CSS,
.
1. HTTP-.
,
HTTP-. HTTP-
.
.
HTTP-
, .
,
, -
.
, , , ,
CSS- style.css, home.css, about.css, footer.css, sidebar.css .. all.css.
CSS- ,
, .
HTTP- CSS. ,
CSS- -
CSS:
239
, CSS- , .
,
, . CSS
, Sass, , CSS- .
, ,
CSS,
. .
2. .
, <head> . .
.

( , ).
, -
HTTP- .
.
1 ( HTTP-)
, CSS HTTP-,
HTTP- , (, 2,
, ).
, ,
. .
, HTTP-, ,
, CSS,
, HTTP-
3G . , , HTTP-
. .
2, . CSS JavaScript .
JavaScript
API- LocalStorage.
,
. cookie-.
, HTTP-, cookie-
HTTP-, ,
240
7. CSS3
, , , , .
. LocalStorage , , LocalStorage,

HTTP-,
. LocalStorage 6.
3. CSS
. ,
user agent (UA) stylesheet.

, <em>,
<h1> <h6>, <li>. ,
UA-. ,
. 1 CSS-,
:
, .

, UA-.

, .
,
WebKit ( , , ), CSS 2.
, margin: 0;, padding: 0; background-repeat: no-repeat;.
,
- .
* , , , .
, 3.
1
Yahoo! CSS http://developer.ya

hoo.com/yui/reset/. background repeat: no-repeat;,
.
Normalize.css CSS-,
HTML- ( ). ,
.
HTML5BoilerPlate GitHub
.
CSS:
241
4. ,
. , (ID). , . ,
,
.
HTML-.
,
. ID-
, . CSS- , , ID-,
. ,
,

.
.
, :
<pid="myP" class="blue">
<strong class="warning"></strong></p>
:
body p#myP.blue strong.warning {
color: red;
}
:
.warning{
color:red;
}
CSS- , ,
.
, , , , . , : , ,
- . : -, , - (chartreuse). Google.
, !
:
body aside.sidebar p#myP.blue strong.warning {
color: #7FFF00;
}
242
7. CSS3
, , :
aside .warning{
color: #7FFF00;
}
Sass , , 10 .
, , .
CSS
: DOM- .
5. !important. ,
!important () . ( ).
, : !important
, .
, !important, . :
p{color: green !important;}
p#myP {color: blue;}
<pstyle="color: red" id="myP">
, !important.
!important CSS,
-. ,
!important ,
.
!important . !important
, ,
. !important ,
, , <span>-
<a>- - .
, !important,
!important , UA- , .
UA- , , , .
CSS. -
CSS
243
, ,
,
1, , ,
.
. , , , , , ,
!
CSS
CSS,
CSS3. , . ,
CSS3. ,
CSS .
CSS-,
, .

, DOM- , .
- ,
.
CSS 2.1 CSS3,

, , IE8
.
CSS, , ,
, , (ID)
. , CSS-, CSS.
, CSS3 ,
, . CSS.
1
CSS 9 Advanced CSS,

Friends of Ed.
244
7. CSS3

, , :
a{
color: blue;
}
p{
color: pink;
}
strong {
color: green;
}
CSS , , ,
.
<p>
<ahref="..."><strong> </strong> </a>
</p>
,
, , CSS, .
,
:
p,li {
text-transform: uppercase;
}
- :
pstrong {
color: pink;
}
li a{
color: black;
}
CSS, , , , strong <p>. - , ,

<a> <p> <li>.
Internet Explorer , HTML5. , , , , CSS3.
CSS
245

, :
.copyright {
font-size: smaller;
}
.urgent {
font-weight: bold;
color: red;
}
<pclass="copyright">
<ahref="..."><strong class="urgent"></strong> </a>
</p>
,
, . ,
.
HTML :
class . , class :
.
:
<pclass="class1 class2"> </p>
<pclass="class2 class1"> </p>
,
.
:
p.copyright {
font-size: xx-small;
}
, p , xx-small , copyright.
<li class="copyright"> ,
xx-small, .copyright,
p.copyright.
, CSS,
.
p.copyright .copyright.
,
.copyright. , ,
.
246
7. CSS3
: copyright Copyright
copyRight.

,
(ID). , :
#divitis {
color: orange;
font-size: larger;
}
<pclass="copyright" id="divitis">
<ahref=""><strong class="urgent"></strong> </a>
</p>
,
,
, , .copyright p.copyright.
#divitis a{} .copyright a{}, ,
, pa{}, a{}. , ,
.7.2 :
DOM- .

,
, .
.
, .
, , .
CSS3
, CSS: ,
.
, CSS. CSS 2
CSS3
247
, ,
,, , , (*).

, . CSS3

.
CSS3
, , ( ) , CSS2, Internet Explorer
CSS2.1, IE8.
Opera, Chrome, Safari, Firefox Internet Explorer ( IE9)
CSS2.1 CSS3 :

:link :visited <a>.
() , Opera, Chrome, Safari, Firefox Internet

Explorer, IE9, CSS2.1 CSS3.

, , ,
, .
: *
CSS 2 . (*):
* {
color: blue;
}
footer * {
color: white;
}
,
.
: , - , , <footer>. ,

.
248
7. CSS3
: E
, , .
- :
section, aside, p{
color: red
}
: .class
.
, (.):
.myClass {
color: green;
}
: #id
,
, .
( ).
, (#):
#myId {
color: black;
}

, . :
<pclass="firstclass secondclass" id="myparagraph">

, .7.2.
7.2. , ,

p
.firstclass
.secondclass
p.firstclass
p.secondclass
.firstclass.secondclass
0-0-1
0-1-0
0-1-1
0-2-0
249
CSS3
p.firstclass.secondclass
#myparagraph
p#myparagraph
p#myparagraph.
firstclass p#myparagraph.
secondclass
p#myparagraph.first
class.secondclass
,
,
,
.

,
.

,
.
<p>

0-2-1
1-0-0
1-0-1
1-1-1
1-2-1
! ,
. , .
, ,
CSS / .
, .7.2,
. - , id, , , , JavaScript .
, - , .7.2,
.
: ,

, . CSS
.
, , .
.
, (
, ).
.
, .
, .
250
7. CSS3
, CSS
.
:
<div id="myParent">
<pclass="copyright" id="divitis"> <ahref="...">
<strong class="urgent"> </strong> </a></p>
<pclass="second classitis">
<ahref="..."><em></em> </a></p>
</div>
,
,
.
: EF
E F(
), F
E. :
p strong {} <strong>,
, ;
#myParent a{} <a>. -
,
id="myParent";
.copyright .urgent {} urgent, copyright;
li strong {} , <strong>
.
: ?
#myparagraph.myclass { }
#myparagraph .myclass { }
: #myparagraph .myclass,
.
, : ,
myparagraph, myclass.
:
myclass, myparagraph.
, CSS
!
: E> F
E > F.
F, E . EF,
CSS3
251
F , ( ).
(>) , F E:
div > p {} , <div>;
p > strong {} ,
<strong> <a>, <p>.
, -
.
CSS3,
! ,
> EF
, E> F.
CubeeDoo. . <div>, #board , ,
, HTML :
#board > div {
position: relative;
width:23%;
height:23%;
margin: 1%;
float: left;
transform-style: preserve-3d;
transition: 0.25s;
box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
cursor: pointer; /* for desktop */
}
#board.level2 > div {
height: 19%;
}
height: 15%;
}
,
. CSS , ,
: 23% ,
. , 23%
.
252
7. CSS3
<div>-. <div>- <div>-,

? >
. #board > div
<div>-,
, #board. CSS-
, ,
, .
23%, 1
. , #board,
level2 level3, 19 15% ,
.
,
.
<div>- 23, 19 15%
<div>-, , -
.
<footer>, <article> ,
, :
article > footer,
article > footer ul {
text-align: center;
margin: auto;
width: 100%;
}
article > footer li {
float: none;
display: inline-block;
}
article > footer p{
clear: both;
}
: E+ F

, (+), (F)
(E).
p:first-of-type + p{} ,

<div>,
.
253
CSS3
: E~ F
, ,
(~)
. , , F E.
F , E.
,
.

.7.3.
7.3.
EF
E>F
E+F
E~F
.content p

, (
)
content
ul.main > li ,

main.
, DOM <ul>,
main
h1 + p
, h1 h1
h1 ~ p
, h1 h1

2 .
CSS , CSS-
. CSS 2. CSS3 , .
CSS 2 ,
, , ,
, , , .

. CSS
.
254
7. CSS3
CSS 2.1
HTML
, .7.4:
<ul>
<li><ahref="http://x.com/selectors.pdf" hreflang="en-us" rel="nofollow"
title="CSS- "></a></li>
<li>
<input type="checkbox" name="spec" id="spec" value="web workers rock"/>
<label for="spec"> -?</label>
</li>
</ul>
7.4. CSS 2
, ,
,
E[attr]
E[attr=val]
E[attr|=val]
E[attr~=val]
a[rel]
input[type]
label[for]
a[rel="nofollow"]
input[type="checkbox"]
a[hreflang|="en"]
a[title~="browser"]
input[value~="workers"]
val1
, val
val,

CSS 2.1
,
, , ,
, , .
, . ,
. , , ,
. , , HTML
.
CSS. -
, , 1
. , .
CSS3
255
,
.
, a[hreflang|=fr],
, , , -.
.7.1:
<style>
a[hreflang] {
padding-right: 18px;
background-position: 100% 0;
}
a[hreflang|="en"] {
background-image: url(img/usa.png);
}
a[hreflang|="es"] {
background-image: url(img/esp.png);
}
a[hreflang|=fr] {
background-image: url(img/fra.png);
}
</style>
<ul>
<li><ahref="/us/index.html" hreflang="en-us">English</a></li>
<li><ahref="/fr/index.html" hreflang="fr-fr">Franais</a></li>
<li><ahref="/fr/index.html" hreflang="es-es">Espaol</a></li>
</ul>
. 7.1.

hreflang fr.
256
7. CSS3
, , ,
.. , ,
. , HTML -
.
CSS3 , ,
, ,
.
.

HTML . , CSS3, .7.5:
<ul>
<li><ahref="http://x.com/selectors.pdf" hreflang="en-us" rel="nofollow"
title="CSS- "></a></li>
<li>
<input type="checkbox" name="spec" id="spec" value="web workers
rock"/>
<label for="spec"> -?</label>
</li>
</ul>
7.5. CSS3
,
E[attr^=val]
E[attr$=val]
E[attr*=val]
a[href^="http"]
input[value^="web"]
a[href$=".pdf"]
input[name$="spec"]
a[href*=":"]
val
val
val
CSS
. . , a[href^=http] CSS
URL-1, a[href$=".pdf"] , , ,
PDF.
1
a[href^=http] URL,
HTTP HTTPS, , HTTP.
, a[href^="http://"], a[href^="https://"].
, , : a[href^=http][href$=pdf], PDF- , HTTP
PDF, a[href^="http://"] [href^="https://"] , http:, https:.
CSS3
257
,
, , , ,
PDF-, -,
, . , , ,
, . (.7.2),
, :
<ul>
<li><ahref="file.zip">Link 1</a></li>
<li><ahref="file.pdf">Link 2</a></li>
<li><ahref="file.html">Link 3</a></li>
<li><ahref="file.html" target="_blank">Link 3</a></li>
</ul>
<style>
a[target="_blank"]::after {content: " (opens in new window)";}
a[href$=".zip"]::after {content: " (.zip file)";}
a[href$=".pdf"]::after {content: " (.pdf file)";}
</style>
. 7.2. ,
, , , , , .
, HTML,
. , , [type=CHECKBOX] [type=checkbox],
, ,
a[href^=http] a[href^=HTTP] ,
1.
1
CSS- 4 .
. .
258
7. CSS3
. ,
, , , , :
a[href^="mailto:"] {
padding-left: 30px;
background: url(emailicon.png) no-repeat left center;
}
}
@media print, screen and (min-width: 640px) {
a[href^="mailto:"]::after {
content: "(" attr(data-address) ")";
opacity: 0.7;
}
}
,
480, ,
, , 640
.
CSS 2.1 CSS.
,
, , , , URL- .
, ,
- , ,
, , . ,
.
CSS2.1.
::after CSS 2.1 content.
,
CSS 2.1 ( ).

, .
CubeeDoo. CubeeDoo data-value. data-value.
colors1.
1
numbers shapes. numbers

, shapes 5 SVG.
CSS3
259
<div class="back">
data-value :
.colors
.colors
.colors
.colors
.colors
.colors
.colors
.colors
.colors
.colors
.colors
.colors
.colors
div[data-value="0"] .back {background-color:transparent;}

div[data-value="1"] .back {background-color:#F00;}
div[data-value="2"] .back {background-color:#090;}
div[data-value="3"] .back {background-color:#FF0;}
div[data-value="4"] .back {background-color:#F60;}
div[data-value="5"] .back {background-color:#00F;}
div[data-value="7"] .back {background-color:#F0F;}
div[data-value="10"] .back {background-color:#fff;}
div[data-value="12"] .back {background-color:#ccc;}
,
class HTML.
DOM . , ,
: DOM-.
: :link :visited. :link , :visited . ,
. Safari 5
, .
, ,
. ,
.
tabindex
:hover, :active :focus
. , /
. :focus :active
. tabindex . :focus :active
tabindex (. 2).
:focus :hover.
, . CSS . :hover .
260
7. CSS3
.
, ,

. , , :
-webkit-tap-highlight-color .
background-color, -
, .
, , . ,
. , , .
;
-webkit/moz/ms-user-select.
, none
, (
). , , .
,
Opera Blink, ;
-webkit-touch-callout. none,
( ,
), .
user-action CSS3 user-interface ( )
user-interaction ( ).
: :enabled :disabled.
:checked
type="checkbox" type="radio".
.7.6 , .
7.6. CSS ,
:link
:visited
:hover

. CSS 1,
. CSS 1,

, ,

CSS3
:active
:focus
:enabled
:disabled
:checked
:indeterminate
261

, ,
, ,

( ,
)
, :active
. .active
, CSS :active, .active touchstart touchend.
, , ,
, .
touchstart touchend,
pointerenter pointerleave.
touchstart touchend1 :hover,
:active. .hover,
:hover, .active, :active,
tabindex ,
, :
var myLinks = document.querySelectorAll('[tabindex]');
for (var i= 0; i< myLinks.length; i++) {
myLinks[i].addEventListener('touchstart',
function() {
this.classList.add('hover');
this.classList.add('active');
}, false);
myLinks[i].addEventListener('touchend',
function() {
this.classList.remove('hover');
this.classList.remove('active');
}, false);
}
1
touchstart touchend . Apple, . W3C pointer. touch-

, pointer-,
touchstart touchend , Apple,
. . 13.
262
7. CSS3
hover ,
,
. , CSS hover, hover:
.hover, :hover {
/* css hover */
}
.active, :active1{
/* css active */
}
- .hover CSS .
:hover,
touchStart:
<script>
var everything = document.querySelectorAll('a, label, span, input, [tabindex]');
for (var i= 0; i< everything.length; i++) {
everything[i].addEventListener('touchstart',
function() {
//
}, false);
}
</script>
<style>
a:hover,
label:hover,
span:hover,
input:hover {
/* css hover */
}
</style>
,
. label
!
<li>
<input type="checkbox" name="spec" id="spec" value="web workers rock"/>
<label for="spec">Are web workers in the specifications?</label>
</li>
input[type=checkbox]:checked + label {color: red;}
. : ,
, . , :checked .
1
(*) . .
CSS3
263

(UI) . UI- CSS3 ( .7.7) ,
HTML5. :required,
:valid :invalid 2004,
- HTML5 required
(. 4).
7.7. UI ,

:default
UI-,

:valid
,
,
:invalid
, ,
:in-range
, ,

:out-of-range
, ,

:required
,
required
:optional
,
required
:read-only
:read-write
, , contentEditable-
(.2)
UI, , Basic User Interface Module,

CSS3. CSS-
4 (CSS Selectors Level 4).

CSS3 ,
HTML DOM. .7.8
.
- , . n- .
264
7. CSS3
7.8.
:root
:nth-child()
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:first-child
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty

, HTML5 <html>
, n-
N- ,

N- ,
N- , ,
(CSS 2); ,
:nth-child(1)
(CSS 2); ,
:nth-last-child(1)
, ;
, :nth-of-type(1)
, ;
, :nth-last-of-type(1)

, ( )
:root, . , HTML5 <html>.

n- .
n-
:nth-of-type(), :nth-child()
. ,
, .
, .
Even odd
, odd () even (),
,
odd even.
, n- odd even
, . , / , . , :
table {
background-color: #ffffff;
}
tr:nth-of-type(even) {
background-color: #dedede;
}
CSS3
265

CSS. <tr>,
.
.
, .
, <tr>-
<tbody>.
, .
. <tr>-
, ,
, .

,
. , :
tr:nth-of-type(8) {
background-color: #ff0000;
}
CSS . , tr:nth-of-type(even)
( (0-1-1),
) .
, nth-child nth-of-type
. ,
, .
:nth-of-type :nth-child
:nth-of-type :nth-child ,
.
:
p:nth-child(3) {color: red;}
p:nth-of-type(3) {color: blue;}
p:nth-child(3) , , . <p>3</p> ,
, .
p:nth-of-type(3) ,
, <p>4</p>, :
<article>
<p>1</p>
266
7. CSS3
<div>2</div>
<p>3</p>
<p>4</p>
</article>
:nth-of-type(8) ,
:nth-child(8), <tbody>
<tr>. p:nth-of-type(8) p:nth-child(8),
. :nth-oftype(8) ,
, .
:nth-child(8) ( , ) ,
. ,
. ,
.

, ,
.
(xn+y), x , y . , even odd
(2n) (2n-1) .
: (2n) 2-, 20, 21,
22, 2, 4, 6, 8, 10-.. (2n-1) 2-, , 2-, , 1, 3,
5, 7, 9-.. (4n-2),
4-, 2-, 2, 6, 10, 14-..
+ , .
5-, 5- ,
(5n). , ,
( n, ), .
, 2n+9, 9- . n = 0
1. :nth-of-type(2n+9) 9, 11, 13-. :nth-last-of-type(2n+9)
, 9, 11, 13-.. . ,
,
, .
CubeeDoo :nth-of-type()
. CSS
250, :
CSS3
267
#board > div.matched:nth-of-type(2){

-webkit-animation-delay: 250ms;
}

iPhone,
.
, :
article ul li:last-of-type {
border-bottom: none;
}
,
, .

. :last-of-type, ,
<ul>- <li>-,
:last-child, :nth-lastof-type(1) :nth-last-child(1).
, :first-of-type , :last-of-type. , ,
, :
article ul li:first-of-type {
border-top: none;
}
, , 12 ( 12, HTML5
CSS3 ), ,
, ,
, .
.
1. 30 , 3, 8, 13, 18, 23 28.
2. 17.
3. 10 , 1, 3, 5, 7 9.
4. 50 , 10, 20, 30, 40, 50.
5. 30 , 6, 10, 14, 18, 22, 26, 30.
1. (5n2) (5n+3).
2. (17).
3. (odd) (2n1) (2n+1).
4. (10n).
5. (4n+2).
268
7. CSS3
n
. .

, .7.9.
7.9. :target, :lang :not
E:target
E:lang(L)
E:not(s)

,

, (L)
E, (s)
. , E, , s
:target
:target , . , div- ID , div-
, , :target, ,
- .
, #main:target <div id="main">,
URL thispage.html#main. , , . -
,
CSS.
:lang(en)
E:lang() E, E ,
:lang(). E lang,
, , .
, HTML <html lang="enus"> US English.
E E:lang(en), E:lang(fr)
, -
. ,
<blockquote lang="fr-fr">, p:lang(fr)
CSS3
269
, , p:lang(en), , ,
, .
:not(s),
:not(s) ,
s. E:not(s) E,
. E:not(F) E, F.
.
, , :
input[type=checkbox]:not(:checked)

checkbox (), . CSS3
, :checked . ,
DOM.
:not ,
, ,
, .
p:not(.copyright). , , copyright.
:not(a). , .
pa:not(:visited). , .
li:not(:last-of-type). , -
.
input:not([type=radio]):not([type=checkbox]). -
, .
h1:not(header > h1):not(#main h1). , header > h1 #main h1
, .

, :not :
ul > li:nth-of-type(n+2):nth-last-of-type(n+2)
,
, ,
:
ul > li:not(:first-of-type):not(:last-of-type)
ul > li:not(:first-child):not(:last-child)
270
7. CSS3
:not , , :
li:not(#someID) /* 1-0-1 1-0-0 */
li:not([title]) /* 0-1-1 0-1-0 */

(other) , ,
:
<li>
<input type="checkbox" value="other" id="other">
<label for="other"> other: </label>
<input type="text">
</li>
,
:
input[type="checkbox"]:not(:checked) ~ input {
display: none;
}
,
. ,
display: none .
,
, . ,
. <span>-,
, DOM.
, , . ::first letter
, DOM (
), .
, , ,
.
:first-letter .
,
::first-letter, ,
IE .
:first-line ::first-line . ,
.
CSS3
271
, ::selection.
. ::selection
CSS3,
, (
Firefox, -moz-).
. ,
:
.willNotBeSelectable {
-webkit-tap-highlight-color: #bada55;
-webkit-user-select: none;
-webkit-touch-callout: none;
-ms-touch-action: none;
}
tap-highlight ,
. user-select: none; ,
/ . :
CubeeDoo , ,
,
. touch-callout,
. touchaction none,
Windows .
::before ::after
::before ::after .
, DOM.
::before ::after . , ,
warning:
.warning::after {content: '!';}
, .

.clearfix, :after
. :
(. .7.1)
(..7.2).

content,
.
272
7. CSS3
,
, .
, , DOM .
:before :after ,
IE, IE8.
CubeeDoo. CubeeDoo numbers shapes:
.numbers
.numbers
.numbers
.numbers
.numbers
.numbers
.numbers
.numbers
.numbers
.numbers
.numbers
.numbers
.shapes
.shapes
.shapes
.shapes
.shapes
.shapes
.shapes
.shapes
.shapes
.shapes
.shapes
.shapes
div[data-value="1"] .back:after{ content:'1';}

div[data-value="1"] .back:after{ content:'';}
div[data-value="9"] .back:after{ content:'';
div[data-value="11"] .back:after{ content:''}
.
data-value. SVG background-position
data-value .
,
.
.
, ,

Firefox.

, . -
: DOM-
273
.
,
( ), ,
,
, ,
..
- .

(::),
. CSS3 .
, CSS3. ::after
:after, , ,
:hover , ,
.
, :: ( ), W3
, .

, CSS 1 2 (, :first line,
:first-letter, :before :after).
: DOM-
, ? ! , ,
. , , , WebKit :
::-webkit-validation-bubble {}
::-webkit-validation-bubble-arrow-clipper {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-message {}
. ,
WebKit
, . ,
, 1:
1
Mozilla http://
mzl.la/1cdK4mx
274
7. CSS3
::-webkit-progress-bar {}
::-webkit-progress-value {}
,
, - Chrome
DOM (.7.3).
. 7.3. DOM,
, range.

. DOM
,
. webkit-sliderrunnable-track, .
::-webkit-slider-runnable-track.
div- ,
-webkit-slider-thumb
. -,
DOM, :
input[type="range"]::-webkit-slider-runnable-track {
-webkit-flex: 110px;
min-width: 0px;
-webkit-align-self: center;
box-sizing: border-box;
display: block;
-webkit-user-modify: read-only;
}
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-webkit-media-slider-thumb {
-webkit-appearance: sliderthumb-horizontal;
display: block;
-webkit-user-modify: read-only;
}
: DOM-
275
- Blink, ,
DOM, -.
: CSS. CSS .
, , ,
.
CSS , ,
,
: , .
CSS- , ,
, , .
. .
( )
( ).
,
, .
, , ,
, .., . , .
(* ), ,

(>, + ~) . .
, , , , ,
, , .
:not ,
. class , HTML
.
CSS.
,
.
:
, ,
!important
.
276
7. CSS3
(. 5 CSS), !important
( ),
.
, ,
, , ,
, , http://specifishity.com. .
! ,
CSS-, , , , ,
, .
, CSS3, .

CSS3
, ,
, CSS3. , iPhone,
iPod, iPad, Android, Galaxy,
Microsoft Surface, , WebKit, Firefox,
Opera Windows 8, , . (
Windows 7, ) ,
CSS3 HTML5. .
, , CSS3.
CSS3
CSS. CSS3. 9
CSS3.
CSS3 ,
. , , . , , , , CSS3, ,
,
.
CSS
CSS3 : ( ), rgb() . CSS3 HSL, HSLA, RGBA , .
278
8. CSS3
RGB, RGBA
, .
HSB (hue, saturation, brightness , , ) HSL HSLA (hue), (saturation) (light). RGBA HSLA
- .
: .8.1 , ,
CSS3.
8.1. CSS1

#RRGGBB
#RGB
rgb(r, g, b)

(red), (green),
(blue)
hsl(h, s, l)
#ff00ff
#f0f
rgb(255, 0, 255)
rgb(100%, 0, 100%)
hsl(300, 100%, 50%)
cmyk1(c, m, y, k)
cmyk(29%, 55%, 0, 0)
hsla(h, s, l, a)
hsla(300, 100%, 50%, 1)
rgba(r, g, b, a)

rgba(255, 0, 255, 1)
rgba(100%, 0, 100%, 1)
fuchsia
transparent
currentColor
(hue), (saturation),
(lightness)
(cyan), (magenta),
(yellow), (black)
(hue), (saturation),
(lightness), (alpha)
(red), (green),
(blue), (alpha)

( )

,
0 255 00 FF, . : , , , (#),
.
, #FFFFFF ,
, . . , , ,
#000000, .
00 FF , , : , , ,
1
CMYK-
paged media, ,
.
CSS
279
. -,
#FF0000. , ,
- #CC0000.
? ,
, #FFCC00 #ffcc00, ,
, .
, 3, , #000000
.
RGB- , #RGB,
, R, GB, AF, af, 09. ,
. ,
RGB-, #369
#336699. #FF9900 #F90, #F312AB
1.
, , ,
- . ,

, ,
. . , .
, <input type="co
lor"> , ,
#000000 .
,
.
1990-, - (web-safe colors).
, - .
.

, .
1
, - ( FF , 00 ), CSS-
(CSS Colors Level 4).
280
8. CSS3
rgb()

,
.
rgb,
.
, , :
#FFFFFF = #FFF = rgb(255, 255, 255) = rgb(100%, 100%, 100%).
, RGB . rgb()- ,
,
, .
:
rgb(255, 255, 255)
rgb(100%, 100%, 100%)
:
rgb(255, 100%, 255);

RGBA
CSS3 RGBA. RGB, A -.
rgb() CSS3
rgba(), alpha,
. - (red),
(green) (blue) . . 1 , 0
, 0.5 50%- .
0 1,
.
, , 1
, :
rgb(255, 255, 255)
rgb(100%, 100%, 100%)
rgba(255, 255, 255, 1)
rgba(100%, 100%, 100%, 1)
, 1 .
: rgba(0, 0, 0, 0) ,
, .
CSS
281
, , rgba(0,
0, 0, 0), rgba(255, 255, 255, 0),
.
.8.1 , rgba(0, 0, 0, 1) . -,
. .8.1 ,
.
RGBA . ,
,
. , , - .
text-shadow: 5px 4px 6px #666666; text-shadow: 5px 4px 6px rgba(0, 0,
0, 0.4);.
. 8.1. - ,

RGB, RGBA .
RGBA,
- .
, , : HSL()
HSL , CSS3. HSL :
(hue), (saturation) (lightness). HSL- , ,
282
8. CSS3
.
, ,
, . HSL , .
. HSL, ,
.
hsl() , rgb(),
, , ,
0 359, ,
50%.
: 0 = , 60 = , 120 = , 180 = , 240 = , 300 = ,
. - ( ),
. - HSL.
: 100% (-
), 50% , 0% . 100% ( ),
#808080 .
rgb() rgba(), hsl() hsla(). hsla(),
(hue) , ,
0 1
. , hsla(300, 100%, 50%, 0.5) , 50%- .
HSL HSLA , , -.
, 0, (100%)
(0%) .
CMYK
? ? , ( ), ( -) , . CMYK
(cyan), (magenta), (yellow) (black),
, : (
) CMYK, RGB.
RGB. ,
, HSL.
CMYK. CMYK
CSS
283
, , , . , CMYK ,
. CMYK CSS3 paged media, (color module).

, ,
aqua, fuchsia lime, .
,
, RGB HSL.
, -
(, IE gray
colors a , lightgray, lightgrey).
- , -
, .
,
.
transparent, rgba(0, 0, 0, 0), .
, transparent ,
1.
'transparent' #FF0000,
rgba(255, 0, 0, 0), .
- , , RGB- HSL-.
CurrentColor
CSS3 , currentColor ( ),
'color:' , .
currentColor
, Helvetica Neue Light:
.bolderText {text-shadow: 001px currentColor;}
1
transparent ,
, . transparent ,
- .
284
8. CSS3

. ,
, . , , currentColor
.

CSS 2.11 , W3C CSS3 currentColor
transparent.

. ,
,
- :
activeBorder ;
activeCaption ;
appWorkspace -
;
background ;
buttonFace ;
buttonHighlight ;
buttonShadow ;
buttonText ;
captionText ;
grayText ;
highlight ;
highlightText ;
inactiveBorder ;
inactiveCaption ;
inactiveCaptionText ;
infoBackground ;
infoText ;
match ;
menu ;
menuText ;
scrollbar ;
threeDDarkShadow 3D-;
1
CSS
285
threeDFace 3D-;
threeDHighlight 3D-;
threeDLightShadow 3D-;
threeDShadow 3D-;
windowFrame ;
windowText .
, , :
-webkit-activelink , ;
-webkit-focus-ring-color , -
, ;
-webkit-link ;
-webkit-text , ;
-moz-buttonDefault;
-moz-buttonHoverFace;
-moz-buttonHoverText;
-moz-cellHighlightText;
-moz-comboBox;
-moz-ComboboxText;
-moz-Dialog;
-moz-DialogText;
-moz-dragtargetzone;
-moz-EvenTreeRow;
-moz-Field;
-moz-FieldText;
-moz-html-CellHighlight;
-moz-html-CellHighlightText;
-moz-mac-accentdarkestshadow;
-moz-mac-accentdarkshadow;
-moz-mac-accentface;
-moz-mac-accentlightesthighlight;
-moz-mac-accentlightshadow;
-moz-mac-accentregularhighlight;
-moz-mac-accentregularshadow;
-moz-mac-chrome-active;
-moz-mac-chrome-inactive;
-moz-mac-focusring;
286
8. CSS3
-moz-mac-menuselect;
-moz-mac-menushadow;
-moz-mac-menutextselect;
-moz-MenuHover;
-moz-MenuHoverText;
-moz-MenuBarText;
-moz-MenuBarHoverText;
-moz-nativehyperlinktext;
-moz-OddTreeRow;
-moz-win-communicationstext;
-moz-win-mediatext.
Firefox.
:
#myElement {
color: -webkit-focus-ring-color;
background-color: -webkit-link;
text-shadow: 3px 3px 3px -webkit-text;
-webkit-box-shadow: 4px 4px 4px -webkit-activelink;
}
-
. , ,
. ,
,
.
: CSS, .

. , CSS .
? CSS. - #800000, maroon, rgba(128, 0, 0), rgba(128, 0, 0, 1.0), hsl(0, 100%, 13%)
hsla(0, 100%, 13%, 1.0).
,
, , , ,
, . CSS, Sass,
. CSS, .
,
hsla() rgba(). , ,
.
, CSS
287
. . .
, CSS
,
. , ( ) ,
. , ,
.
, ,
, .
, , .

, .
.8.2.
8.2. , CSS1
em
ex
ch
rem
vw
vh
vmin
vmax
px
in
cm
mm
pt
pc
%
,
, x
, 0 ()
,
, : 100 vw
, : 100 vh
vh vm
vh vm
, , , , 1/72
, 1/72
, 1/12
, , self ,
, vmax ch, Android Opera, vmax, Safari.
288
8. CSS3
CSS , . ,
rem, vh, vw, vmin vmax, ,
.
rem.
CSS3 root em.
em ,
, rem <html>.
, rem
. rem , IE9, iOS 4 Opera 12 ( Android).
, (zero-length), null,
0. . , 0deg.
, . ,
,
. ,
, ,
zoom-.
, JPEG- GIF-,
, . CSS width height image .
, ,
auto inherit:
p{
height: auto;
font-size: inherit;
}
dpi, dpc, dppx

iPhone 480320. i-
, iPhone 4 iPod touch 4G,
320480, 960640. iPad 1024768, 7681024.
iPad (DPI)
20481536. Safari Chrome ,
Nokia, OpenMoko, Android WebKit .
289
, CSS
, ,
DPI, ,
. , iPhone4 DPI,
, ,
,
, - ,
DPI , . .8.3 .
8.3.

dpi
dpc
dppx
CSS3

.
dpi, dpc dppx.
CubeeDoo
, px , rem vh vm
.
. ,
,
, ddpx:
@media
only screen
only screen
only screen
only screen
only screen
only screen
and
and
and
and
and
and
(-webkit-min-device-pixel-ratio: 2),
(
min--moz-device-pixel-ratio: 2),
(
-o-min-device-pixel-ratio: 2/1),
(
min-device-pixel-ratio: 2),
(
min-resolution: 192dpi),
(
min-resolution: 2dppx) {
/* */
}
,
CSS3, ,
.
, .
290
8. CSS3
, , ,
, .
, .8.4
.
8.4. ,

deg
grad
rad
turn
ms
s
Hz
kHz
()
, , 0,
.

.8.4. ,
, CSS , .
,
turn, . , ,
, rad (), deg () grad ().
Hz() kHz (). ms () s().
.
, , , .

, , .
, ,
!
0 360, . , .
, 90 deg
. 90 deg 90 .
, CSS
291
CSS .8.2:
.image1, image5 {
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg); /* IE9 */
transform: rotate(-5deg);
}
.image2, image4 {
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
}
. 8.2.

, , 1/400 . , ,
. 100 90
(.8.3).
. 8.3. 90 , 100 1,571
292
8. CSS3
, , 180/, 57,3. 2 . 1 ,
. 1.570796326794897 rad 100 90deg.
360 deg. , 2 turn = 720 deg. , turn

. :
transform: rotate(2.5turn);
, ! : (s) (ms). 1000 1 . , s

, ms . , , s ms, . :
animation-duration: 0.5s;
animation-duration: 500ms;
( )
. : Hz() kHz
(). 1000Hz = 1kHz ( ). .
, .
CSS ,
, class="low",
, squeal.
:
p.low { pitch: 105Hz; }
q.squeal {pitch: 135Hz;}
CubeeDoo. CSS ,
CSS, JavaScript.
JavaScript. 180deg
200 ms. ,
.
293

, . CSS , CSS3. ,
,
.
CSS . :
, ,
,
CSS .
, :
.sameValues {
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.twoValues {
padding-top: 3px;
padding-right: 6px;
padding-left: 6px;
}
.threeValues {
padding-top: 3px;
padding-right: 6px;
padding-left: 6px;
}
.fourValues {
padding-top: 3px;
padding-right: 6px;
padding-left: 12px;
}
:
.sameValues {
padding: 3px;
}
.twoValues {
padding: 3px 6px;
}
.threeValues {
294
8. CSS3
padding: 3px 6px 12px;

}
.fourValues {
padding: 3px 6px 9px 12px;
}
,
. , CSS3 ( 9),
. ,
, .
,
, ,
.
,
. , ,
. ,
, , .
TRouBLe () ,
(T ), (R right), (B bottom) (L left).
, , .8.5 ,
, ,
.
8.5. , , ,
,
3px
2px 4px
3px 1px 5px
1px 2px 3px 4px

: 2px
: 4px
: 3px
: 1px
: 5px
: 1px
: 2px
: 3px
: 4px
TRBL (T ; R ; B ; L )
TB RL
T RL B
TRB L
, : CSS-
background-position , LR TB, TB LR.
,
, , .
.
:
295
.myClass {
border: 1px solid #ff0000;
}
:
.myClass {
border-width: 1px;
border-style: solid;
border-color: #ff0000;
}
, , :
.myClass {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ff0000;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ff0000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ff0000;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #ff0000;
}

12. border , ,
.

- , . ,
,
.
60 , , , . CSS, CSS3 .
,
, ,
. ,
. !
CSS3: ,
CSS2, CSS3 .
W3C ,
(Recommendation level), .
CCS3 20,
( - ). ,
CSS, CubeeDoo.
,
iPhone.
iPhone CSS. CSS 2.1, , border-radius ( ), ,
, text-shadow ( ), box-shadow ( ),
background-size ( ), text-overflow (
). CubeeDoo.
, iPhone
HTTP- . CSS, ,

, ,
.
CSS3 , , HTTP-,
. CSS3 , DOM, . DOM- ,
.
CSS
297
CSS3, .
, CSS3 ,

HTTP-, . HTTP- ,
CSS-, , . CSS, ,
, , .
, .
CSS
. CSS
,
.
CSS3 HTML5 , .
11
, .
, ruby- ,
, 1. , .
CSS CSS3,
. CSS - CSS, .
CSS
CSS3, ,
, .

(border), (margin) (padding):
border-bottom;
border-bottom-color;
border-bottom-style;
border-bottom-width;
border-color;
1
CSS- speech, paged media ruby, W3C-

: http://www.w3.org/TR/css3-speech/,
http://www.w3.org/TR/css3-page/ http://www.w3.org/TR/css3-ruby/
298
9. CSS3: ,
border-left;
border-left-color;
border-left-style;
border-left-width;
border-right;
border-right-color;
border-right-style;
border-right-width;
border-style;
border-top;
border-top-color;
border-top-style;
border-top-width;
border-width;
margin;
margin-bottom;
margin-left;
margin-right;
margin-top;
padding;
padding-bottom;
padding-left;
padding-right;
padding-top.

border.
, , .
(,
). , border-style: dotted;
, border-style-right:
dashed; .
.
border-style.
border-image border-style (.11).
CSS
299
, W3C,
/ , .
box-sizing, .
,
, , .
border-style
border-style .
CSS3 border-style,
border-radius border-image,
.
border-style dashed, dotted,
double, groove, hidden, inset, none, outset, ridge solid.
hidden, none,
. , , ,
none hidden, transparent. hidden .
WebKit-
border-color, inset, outset, groove
ridge. WebKit .
, border-style
, , none. , border-style none.
border-image, ,
11.
border-color
border-color , . CSS,
CSS 8. currentColor:
border-style, border-color, ,
currentColor.
CSS.
.
300
9. CSS3: ,
,
, ,
:
blockquote {
background-color: green;
position: relative;
color: white;
padding: 15px 25px;
margin: 10px 10px 0;
}
blockquote:after {
border: 15px solid;
border-color: green transparent transparent;
top: 100%; left: 10px;
width: 0; height: 0;
position: absolute;
content: '';
}
, , , ,
. . .9.1.
. 9.1. ,

,
, ?
border-width
border-width .
border-width thin, medium, thick inherit,
medium.
, (px, em ..), 8.
, .9.1,
15 ,
, . .
CSS
301
border-width border-image
: border-image ,
border-width, border-image
border-width.
,
. ,
, .
CSS
HTML .
CSS ( ), , ,
, .
, ,
.
.9.2,
(content), (padding), (border) (margin).
Content , .
Padding , .
, 1.
Border , . , . .
.
, , .
Margin , . . , .
,
.
, , . , , .
= + + + + .
= + + + + .
, .9.2 .
, ,
. , 0, .
1
,
background-clip background-origin.
302
9. CSS3: ,
. 9.2. W3C
, ,
1.
= + + + + +
+ .
= + + + + +
+ .
box-sizing
box-sizing , , -
CSS3, , Microsoft , W3C . 100%-

, . box-sizing
box-sizing border-box:
.box {
width: 100%;
padding: 10px;
border: 1px solid currentColor;
-webkit-box-sizing: border-box; /* Android (3.0) */
-moz-box-sizing: border-box; /* Firefox */
}
1
,
.
CSS3
303
, 100% 100%, ,
IE6/IE7, box-sizing border-box.
box-sizing , IE8, Firefox

WebKit- iOS 4.3, Android 3.0 BlackBerry7,
.
calc() box-sizing:
border-box!
. , -
, . :
,
, .
,
.
CSS3
, CSS3. iPhone, CSS.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>iPhone Look and feel</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>
</head>
<body>
<header>
<nav>
<ul>
<li class="button cancel">Cancel</li>
<li class="button done">Done</li>
</ul>
<h1>Languages</h1>
</nav>
</header>
<article>
<ul>
<li lang="en-us">English</li>
<li lang="fr-fr">Franais</li>
<li lang="es-es">Espaol</li>
...
</ul>
304
9. CSS3: ,
</article>
</body>
</html>
HTML CSS,
-,
iPhone (.9.3).
. 9.3. CSS, - ,
, iPhone
border-radius
CSS3, ,
border-radius.
.

CSS- border-radius - , .
, ,
.
.
CSS3
305

,
,
.
HTTP-,
, DOM. ,
,
.
, , , , ,
, , , . (
) ,

. border-radius
, - !
!
border-radius :
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
border-top-left-radius:
..
border-radius :
border-radius: length{1,4} / length{1,4} /* */
border-(top|bottom)-(left|right)-radius: length length /* */
, ,
,
(.9.4).
: , ( ) . .
, , ,
, . ,
.
: , , , . TRBL , ,
,
.
306
9. CSS3: ,
. 9.4. border-radius,

DOM
:
myObj.style.borderTopLeftRadius
myObj.style.borderTopRightRadius
myObj.style.borderBottomRightRadius
myObj.style.borderBottomLeftRadius
, (-) JavaScript .
radius left, top border, border-top-leftradius. JavaScript CSS-
DOM- . , , JavaScript
CSS.
JavaScript .
border-radius
iPhone CubeeDoo
! iPhone (. .9.3)
Cancel () Done
() . CSS3,
,
. CSS :
1
2
article ul {
border: 1px solid #A8ABAE;
CSS3
3
4
5
6
7
307
border-radius: 10px;
width: 300px;
margin: 10px auto;
}
2 1 . 3 border-radius, 10. Android2.1 iOS 3.2,

-webkit-.
, , : Android
,

.
Android . ,
.
.
6 margin 10 ,
auto. margin ,
(Top Bottom),
(Left Right). ( ?
8.)
.
CSS:
8
9
10
11
12
13
14
15
16
17
18
article ul {
list-style-type: none;
}
article li {
line-height: 44px;
border-bottom: 1px solid #A8ABAE;
padding: 010px;
}
article li:last-of-type {
border-bottom: none;
}
CSS .
:last-of-type 16.
7. article li:last-of-type {border-bottom: none;},
<ul>, <article>.
308
9. CSS3: ,
article li:not(:last-of-type)
, , . <ul>,
<li>, .
?
Done () Cancel () iPhone,
CubeeDoo. .
CSS
, CSS HTML-, .
Cancel () Done (), . Cancel
() Done (). , ,
iPhone.
.
iPhone PNG- , iOS . .
CSS3 , ,
HTTP- . iOS CSS,
.svg, .gif, .webp, .png .jpeg.
, ,
, background-images, list-styleimages border-images. ,
.
CSS-, .
, .
CSS- (CSS Images Level 4) , .
, ,
,
WebKit. CSS- , CSS . - WebKit,
.
CSS
309
:
: .
. ,
:
background-image: -webkit-gradient(linear, /* WebKit1 */
background-image: -webkit-linear-gradient( /* Android, iOS 6.1,
BB10 */
background-image: linear-gradient( /* iOS7, Chr26+, IE10+, FF 16+, O12.1+ */
:
background-image: -webkit-gradient(radial, /* WebKit */
background-image: -webkit-radial-gradient( /* Android, iOS 6.1,
BB10 */
background-image: radial-gradient( /* IE10, FF16, O12.1, Chr26, iOS7 */

WebKit, . ,
. Mozilla Opera2
, Internet Explorer
.

.
, - .
, .
. , , , . .
, , ,
,
.
.
, , ,
1
WebKit Chrome 9,
iOS Safari 4.3, Android 3.2 BlackBerry 7.
, -moz- -o-, , . ,
Firefox 415 / Opera 11.112.0.
310
9. CSS3: ,
1024 , .
.

. .

, ,
:
-prefix-linear-gradient(<angle|keyterm>, <colorstop>, [<colorstop>,] <colorstop>)
angle .
top bottom, / left
right,

.
:
linear-gradient([<angle>| to<keyword>], <colorstop>, [<colorstop>,] <colorstop>)
, -,
to, -, , ,
-, , .
, , to, , , .
,
,
.
,
to:
, . ? . .

CSS
(<angle>) .
, , .
, .
.
0, 90. 0
(.9.5).
CSS
311
. 9.5.

. 0 ,
. CSS- . 0 , , 90 .
.
. : top (), bottom (),
left ( ) right ( ) , : top left
( ) bottom right ( ).
.
, ,
(background-image)
. , top
,
, top right
, , .
CSS-, ,
, to ( ), , . , ,
. , to top ,
, to top
right ,
.
312
9. CSS3: ,
top 270deg , to
bottom 180deg , ,
, .9.6.
,
:
/* */
-webkit-linear-gradient(#000000, #FFFFFF);
-webkit-linear-gradient(top, #000000, #FFFFFF);
-webkit-linear-gradient(270deg, #000000, #FFFFFF);
/* */
linear-gradient(#000000, #FFFFFF);
linear-gradient(to bottom, #000000, #FFFFFF);
linear-gradient(180deg, #000000, #FFFFFF);
. 9.6.
,
(.9.7), , ,
:
/* */
-webkit-linear-gradient( top left, #000000, #FFFFFF);
linear-gradient(to bottom right, #000000, #FFFFFF);
, 315deg 135deg ,
, top left to bottom
right, .
315deg 135deg , top left ( ) to bottom right (
), , , ,
to bottom right. ?

, , .
313
CSS
. 9.7. ,

, 100% .
(background) (size)
, .
, ,
. , ,
, ,
. , , , (.9.8):
background-image: -webkit-linear-gradient(top left, #000000, #FFFFFF);
background-image: linear-gradient(bottom right, #000000, #FFFFFF);
. 9.8. ,
( )
( )
314
9. CSS3: ,
.9.8 ,
,
.
, to bottom right top left.
, , , .

,
. ,
. , ,
,
, 10% ? , .
, ,
.
0%, 0% 0
, .
,
100%.
( ),
( )
, 0%, 100%.
.
200, (.9.9):
-webkit-linear-gradient(top, #00000010%, #FFFFFF 90%);
-webkit-linear-gradient(top, #00000020px, #FFFFFF 180px);
linear-gradient(to bottom, #00000010%, #FFFFFF 90%);
linear-gradient(to bottom, #00000020px, #FFFFFF 180px);
, , .9.9,
10%
. 10%-
. 90%-
. 80% .
, , .
.
CSS
315
. 9.9. 0

, (
, ).
. ,
, 1996,
2013, :
1
2
3
4
5
6
7
background-image: linear-gradient(
red,
orange,
yellow,
green,
blue,
purple);
:
1
2
3
4
5
6
7
red 0%,
orange 20%,
yellow 40%,
green 60%,
blue 80%,
purple 100%);
,
, , ,
,
, - .
, ,
( ),
,
, :
1
2
3
red 16.7%,
orange 16.7%,
316
4
5
6
7
8
9
10
11
9. CSS3: ,
orange 33.3%,
yellow 33.3%,
yellow 50%,
green 50%,
green 66.7%,
blue 66.7%,
blue 83.3%,
purple 83.3%);
16,7% , . : 0%,
. 16,7% .
16,7%. 0%
. , .
, -.
(,
, ) , HSLA RGBA:
linear-gradient(180deg,
rgba(0,0,0,0.1) 10%,
rgba(0,0,0,0.9) 90%);
iPhone CubeeDoo
, ,
iOS-,
. iOS.
, :
1
2
3
4
5
6
7
8
9
10
11
header {
/* */
padding: 7px 10px;
background-color: #6D84A2;
display: block;
height: 45px;
-moz-box-sizing: border-box;
line-height: 30px;
border-bottom: 1px solid #2C3542;
border-top: 1px solid #CDD5DF;
311 . 4, .
, , , .
, -
CSS
317

,
.
,
IE box-sizing: border-box.
-moz-, , , , .
.
,
. 50%:
15
16
17
18
19
20
background-image: -webkit-linear-gradient(top,
rgb(176, 188, 205) 50%,
rgb(129, 149, 175) 100%);
background-image: linear-gradient(to bottom,
rgb(176, 188, 205) 50%,
rgb(129, 149, 175) 100%);
50%, ( ).

.
, BlackBerry 7, Android 3.0 ,
:
12
13
14
background-image: -webkit-gradient(linear, 00, 0100%,

color-stop(0.5, rgb(176, 188, 205)),
color-stop(1.0, rgb(129, 149, 175)));
WebKit-, iOS 4.3, Android 3.0

BB7, :
-webkit-gradient(linear, < >, < >,
color-stop(<float>, <>)[, color-stop(<float>, <>),
color-stop(<float>, <>)])
, color-stop,
0 1 .
, .

,
top, bottom, left right.
.
318
9. CSS3: ,
( )
color-stop, .
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0.1, red),
color-stop(0.3, orange),
color-stop(0.5, yellow),
color-stop(0.7, green),
color-stop(0.9, blue)
);
, ( ), ,
, 10% , , ,
90% 100%.
- .
,
.

:
.
RGBA ( HSLA),

:
21
22
23
24
25
26
27
28
29
30
31
background-color: rgb(129, 149, 175);

background-image: -webkit-gradient(linear, 00, 0100%,
color-stop(0.5, rgb(255, 255, 255, 0.4)),
color-stop(1.0, rgb(255, 255, 255, 0)));
background-image: -webkit-linear-gradient(
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0));
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0));
top to
bottom, , 100%, ,
, 100%.
- , - , iPhone-.
. . ,
-.
CSS
319
? . ,
( , ):
.nav li {
background-image: -webkit-linear-gradient(bottom,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0));
background-image: linear-gradient(to top,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0));
}
.cancel {background-color: #4A6C9B;}
.done {background-color: #2463DE;}
, . -
.
,
50%. .
50%, backgroundposition.
background-size ,
.
.
CSS1 backgroundposition, (background-position: 015px),

CSS3 background-size (
).
background-size
background-size . , ,
contain, cover auto.
contain ,
, - . ,
background-size: contain, ,
,
. ,
background-position background-repeat.
cover , , , , ,
. ,
320
9. CSS3: ,
background-size: cover, . auto . ,

, .9.10.
. 9.10. background-size, auto, cover, contain

( background-repeat: no-repeat)
, .
, ,
, , .9.10,
. ,
auto.
:
( ), . .9.10 , 150 px 150 px
( 250250) ,
.

, . contain, cover, auto,

. , , , ,
auto.
background-size , , ,
. - , , , . ,
. 9.1 background-size.
9.1. iOS
1 .button {
2
background-image:
3
-webkit-gradient(linear, 0100%, 00%,
4
from(rgba(255,255,255, 0.1)),
5
to(rgba(255,255,255,0.4)));
CSS
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
321
background-image:
-webkit-linear-gradient(bottom,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.4));
background-image:
linear-gradient(to top,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.4));
}
.cancel {
background-color: #4A6C9B;
float: left;
}
.done {
background-color: #2463de;
float: right;
}
, (header), , . ,
background-size, :
50% 100%- .
, , backgroundrepeat: no-repeat. :
background-size: 2px 50%;
background-repeat: repeat-x;
2
. 2 ( ),
1 , Chrome.
, ,
- - , .
. , 100% 100%,
, ,
.
.
CSS background-repeat: no-repeat. , , no-repeat,

, . , ,
.
322
9. CSS3: ,
DPI background-size. background-size

DPI.

DPI, .
, , .
CSS
background-size.
, 100
300. PNG- 100300
. DPI PNG-
200600 . , .
100300 CSS-
,
, background-size.
background-size auto,
200600 . div #logo 100300 ,
:
#logo {
width: 300px; height: 100px;
background-image: url(logo.png);
background-size: contain; /* */
background-size: 300px 100px;
}
@media
screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2),
screen and (-min-moz-device-pixel-ratio: 2),
screen and (-o-min-device-pixel-ratio: 2/1),
screen and (min-device-pixel-ratio: 2),
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {
#logo {
background-image: url(hidpi/logo.png);
}
}
, background-size: contain; background-size:

300px 100px;, div- , .
background-size :
background-size , . -
CSS
323

iOS , .
iOS-? GIF? . , CSS-. iOS-
, .
, , ,
. . , ,
:
background-image:
-webkit-gradient(linear, 00, 100% 0,
color-stop(0.4, #ffffff),
color-stop(0.4, #000000),
color-stop(0.6, #000000),
color-stop(0.6, #ffffff));
background-image:
-webkit-linear-gradient(right,
#ffffff 40%,
#00000040%,
#00000060%,
#ffffff 60%);
background-image:
linear-gradient(to left,
#ffffff 40%,
#00000040%,
#00000060%,
#ffffff 60%);
,
, 40%,
60% (.9.11).

.
, ,
. 7 :
1
2
3
background-color: #C5CCD4;
background-image:
324
9. CSS3: ,
. 9.11. ,

4
5
6
7
8
9
10
11
12
13
14
15
color-stop(0.7142, #C5CCD4),
color-stop(0.7142, #CBD2D8));
background-image:
-webkit-linear-gradient(left,
#C5CCD40.7142,
#CBD2D80.7142%);
background-image:
linear-gradient(to right,
#C5CCD40.7142%,
#CBD2D80.7142%);
background-size: 7px 2px; 1
background-repeat: repeat;
,
, .
, .
, .
, 213, ,
, 100% , . -, ,
, .

,
. backgroundrepeat background-size.
7,
5, #C5CCD4,
1
2 , 1,
. - Chrome, 2.
CSS
325
2, #CBD2D8.
, . , , :
background-image:
color-stop(5px, #C5CCD4),
color-stop(5px, #CBD2D8));
background-image:
-webkit-linear-gradient(left,
#C5CCD45px,
#CBD2D85px);
background-image:
linear-gradient(to right,
#C5CCD45px,
#CBD2D85px);
repeatinglinear-gradient() background-size backgroundrepeat.

CSS3 background-size background-repeat,
, . CSS3 , , repeatinglinear-gradient:
background-image:
-webkit-repeating-linear-gradient(left,
#C5CCD40,
#C5CCD45px,
#CBD2D85px,
#CBD2D87px);
background-image:
repeating-linear-gradient(to right,
#C5CCD40,
#C5CCD45px,
#CBD2D85px,
#CBD2D87px);
background-size: 7px 7px;
background-repeat: repeat;
.
7. . ,
.
326
9. CSS3: ,

1. , ,
background-size
background-repeat, 14 15.
, .
, BlackBer
ry10, iOS5, Safari 5.1 Chrome 10, -
WebKit-. ,
Chrome Chrome Android.
, Chrome
.
CubeeDoo
Chrome Android , CubeeDoo.
, - Chrome ,
, , .
CubeeDoo
. ,

, :
body {
background-color: #eee;
background-image:
-webkit-repeating-linear-gradient(-135deg,
transparent 0,
transparent 4px,
white 4px,
white 8px),
-webkit-repeating-linear-gradient(135deg,
transparent 0,
transparent 4px,
white 4px,
white 8px);
background-image:
repeating-linear-gradient(-135deg,
transparent 0,
1
, Chrome . , ,
110, , , , ,
100.
CSS
327
transparent 4px,
white 4px,
white 8px),
repeating-linear-gradient(135deg,
transparent 0,
transparent 4px,
white 4px,
white 8px);
}
,
, .

? CSS3
DOM- .
,
. ,
background-image ,
.
,
. ,
DPI ,
:
#board {
color: #fff;
height: 400px;
width: 100%;
float: left;
text-align: center;
background-color: #eee;
background-image:
-webkit-gradient(linear, 00, 100% 100%,
color-stop(0.5, rgba(255,255,255,0)),
color-stop(0.5, rgba(255,255,255,0.5))),
-webkit-gradient(linear, 0100%, 100% 0,
color-stop(0.5, rgba(255,255,255,0)),
color-stop(0.5, rgba(255,255,255,0.5)));
background-image:
-webkit-linear-gradient(-135deg,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.5) 50%),
-webkit-linear-gradient(135deg,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.5) 50%);
background-image:
linear-gradient(-135deg,
rgba(255,255,255,0) 50%,
328
9. CSS3: ,
rgba(255,255,255,0.5) 50%),
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.5) 50%);
background-size: 2px;
}
, background-size.
, , .
,
.
, background-size , background-image.
background, , .
,
background-color.
-

,
-.
background-size, :
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
color-stop(.5, rgba(255, 255, 255, 0)),
color-stop(.5, rgba(255, 255, 255, 0.1)),
color-stop(1, rgba(255, 255, 255, 0.4)));
background-image: -webkit-linear-gradient(bottom,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.4));
background-image: linear-gradient(to top,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.4));
, ,
.

, ( ), - . -
329
, ,
.
, , , .
, ,
,
.
,
.
WebKit . WebKit
.
, background-size , .
CSS,
, , text-overflow.
:
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
.button {
background-color: #4A6C9B;
background-image:
-webkit-gradient(linear, 0100%, 00%,
from(rgba(255,255,255,0.1)),
to(rgba(255,255,255,0.4)));
background-image:
-webkit-linear-gradient(bottom,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.4));
background-image:
linear-gradient(to top,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.4));
color: #FFFFFF;
border: 1px solid #2F353E;
border-color: #2F353E #375073 #375073; /* TLR B*/
border-radius: 4px;
text-decoration: none;
font-family: Helvetica;
font-size: 12px;
font-weight: bold;
height: 30px;
padding: 010px;
330
27
28
29
30
31
32
33
34
35
36
37
38
39
40
9. CSS3: ,
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);

overflow: hidden;
max-width: 80px;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-box-shadow:
01px 0 rgba(255,255,255, 0.4);
-webkit-box-shadow:
01px 0 rgba(255,255,255, 0.4),
inset 01px 0 rgba(255,255,255,0.4);
box-shadow:
01px 0 rgba(255,255,255, 0.4),
inset 01px 0 rgba(255,255,255,0.4);
}
!
( 26 ), , text-shadow, box-shadow text-overflow. ! .
-
, .
1820 4,
. 15 :
,
, . , .
100% ,
. , 16
background-repeat: no repeat . 2 (backgroundsize: 2px 50%;), , background-repeat: repeat-x;.
26 , ,
, . HTML-
, . <li>- ,
, . nav-, ,
, cancel done, .
text-shadow 27 ,
CSS ! .

CSS 2 CSS 2.1.
! .
331
Apple . Apple.com
, ,
.
,
. 3,5
, , ,
IE6 (,
10- , ,
Mac), .

IE,
. , text-shadow, HTTP- .
text-shadow , . text-shadow
(leftOffset), (topOffset),
(blurRadius) (color),
. ,
:
text-shadow: <leftOffset> <topOffset> <blurRadius> <color>[,
<leftOffset> <topOffset> <blurRadius> <color>][,
<leftOffset> <topOffset> <blurRadius> <color>];
: .
. ,
, . . ,
0, .
, 0,
.
currentColor (. 8).
, Helvetica Neue Light,
DPI
. :
text-shadow: 001px currentColor;
. CSS 1
, .
currentColor,
, .
332
9. CSS3: ,
, :
.
.
.
, . , , (
- ).
:
rgba(0,0,0,0.4);.
.
, Apple,
- 1 . , ( <h1>)
:
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
1, .
, text-shadow .
, , CSS
. .
width,
overflow text-overflow
28- 31-,
.
.
:
. ,
, , <h1> . Languages , ,
Supported Languages?
- <button>
. ,
(
list-item, inline, inline-block ..), , width !
333
text-overflow
text-overflow Basic UI. , . ellipsis , :
text-overflow: ellipsis | clip
, , text-overflow: ellipsis; . ,
1. ,
overflow,
, , visible (
), white-space nowrap pre.
clip,
.
ellipses , . Firefox,
9, string.
,
.
-
( - ) .
, , ,
:
h1 {
white-space: nowrap;
width: 180px;
overflow: hidden;
-o-text-overflow: ellipsis; /* opera mini, mobile */
text-overflow: ellipsis;
}
, white-space,
overflow , , width, ,
, , .
white-space
white-space
. white-space normal, nowrap, pre, pre-line,
1
,
, -webkit-line-clamp, text-overflow: -o-ellipsis-lastline; WebKit Opera .
334
9. CSS3: ,
pre-wrap inherit. normal, -
,
. nowrap
. pre-wrap
, nowrap:
.
text-overflow: elipses;, . , CSS 1.

, . CubeeDoo
box-shadow
. CSS3 , iPhone, box-shadow
.
box-shadow .
box-shadow,
. , inset.
outline
text-shadow , . ,
IE9. Android 3.0 iOS 5
-webkit-.
box-shadow text-shadow, inset:
box-shadow: inset <leftOffset> <topOffset> <blurRadius> <spread> <color>[,
inset <leftOffset> <topOffset> <blurRadius> <spread> <color>][,
inset <leftOffset> <topOffset> <blurRadius> <spread> <color>];
box-shadow : none
( ) , ,
(leftOffset), (topOffset),
(blurRadius), (spread) (color)
inset ( ). ,
.
335
. text-shadow, ,
.
.
inset, , . inset, ,
.
, inset boxshadow text-shadow. , Android,
3.0, iOS 3.2
-webkit- inset. iOS 4.xBlackBerry 7
-webkit-, ,
inset, .
( - )1:
1
2
3
4
5
6
7
8
-webkit-box-shadow:
3px 4px 5px 6px rgba(0,0,0, 0.4);
-webkit-box-shadow:
3px 4px 5px 6px rgba(0,0,0, 0.4),
inset 1px 1px 1px #FFFFFF;
box-shadow:
3px 4px 5px 6px rgba(0,0,0, 0.4),
inset 1px 1px 1px #FFFFFF;
box-shadow, .
,
, :
, , ,
. ;
, , , .
;
,
. . ,
. ,
;
, ( -
) .
. , ;
1
1 2 Android 3.0 iOS 3.2,

inset. 35 WebKit, Safari5, iOS 4.3, Andro
id3.0 BB 7. 68 Safari 5.1, Opera10.5+, Opera Mobile 11+,
Chrome9+, IE9+ Firefox 4+. Opera Mini .
336
9. CSS3: ,
. , -
-.
, ,
. ,
,

/ . ,
currentColor;
inset, -
, .
5
.
inset.
1
( ?) . , ,
.
XY,

. (
inset ) , ,
.
.
text-shadow, , box-shadow, , .
, z-index, - ( - ,
), -
.
,
, ,
, .
,
. , 20 ,
, ,
- , .
20
, 60/.
iPhone,
, , , , .
337
,
.
, , .
3739 CSS- -
:
box-shadow:
01px 0 rgba(255,255,255, 0.4),
Inset 01px 0 rgba(255,255,255,0.4)
:
1
1 .
-webkit- ,
Android.
: CubeeDoo
CubeeDoo . CSS.
, CSS. , , :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#board > div {

}
.back {
border: 5px solid white;
}
.back:after,
.face:after {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 3px;
pointer-events: none;
}
.back:after {
background-color: #fff;
background-size:
50% 50%,
00;
background-image:
338
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
9. CSS3: ,
url('data:image/svg+xml;utf8,<svg width="40" height="40"

xmlns="http://www.w3.org/2000/svg"><g><text
xml:space="preserve"
text-anchor="middle" font-family="serif" font-size="40"
id="svg_1"
y="30" x="20" stroke-width="0" stroke="rgb(119, 160, 215)"
fill="rgb(119, 160, 215)"></text></g></svg>'),
rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
background-image:
xmlns="http://www.w3.org/2000/svg"><g><text
xml:space="preserve"
id="svg_1"
rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
box-shadow:
inset 1px 1px 0 currentcolor,
1px 1px 1px rgba(0,0,0,0.1);
color: rgb(119, 160, 215);
}
#board > div.flipped {
}
.control {
border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
background-image:
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.025));
background-image:
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.025));
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
border-radius: 5px;
}
.
.
1. 1 <div>-,
#board, -
. , ,
. 2
.
339
2. 7- 17- -
. 10
content, 0 , ,
, 1 ,
. borderradius 3 px, .
position: absolute , ,
, .
3. 17- 35- . , background-repeat background-color.
,
background-size , .
4. , -
.
box-shadow.
.
.
SVG, 5. . . (
, WebKit-),
, SVG
Android . ,
, , , ,

SVG.
5. (.9.12) :
. ,
.
5 .
, 5 5 .
,
.
1
, .
340
9. CSS3: ,
. 9.12. CubeeDoo:

6. , , 33, -
.
7. 34 . , , -
. ()
SVG,
. , currentColor
drop-shadow.
8. , . , -
, . , ,
, ,
. 36 , , div-,
flipped (). div-
, , . ( ) 11.
9.
39- 52- ,
CubeeDoo.
( )
40 41 .
341
10. ,
. , -,
.
11. 50 51 ,
.
, ,
iPhone, ,
CubeeDoo.
, CSS3,

HTTP-.
CSS3 SVG, 5, ,
.
,

. , ,
, ,
11.
10
CSS3:
,

, , , , CSS- Flash, Canvas JavaScript.

,
, , ,
CSS3.
Flash, JavaScript <canvas>?
Flash
iOS. Flash, Adobe
Flash Player, Flash Player 11.1 for
Android, BlackBerry PlayBook 2011.
Flash ,
Flash ,
. ,
, Flash, .
, JavaScript, .
, , ,
, .
CSS-
. CSS, ,
,
1. , ,
.
1
CSS- ,
CSS.
CSS-
343
, ,
: , , ,
. ,
. ,
.
, ,
, ,
- .
, , , .
, .
CSS . , , Geocities 1990-.
CSS-
CSS- . - :hover, , ,
0. CSS-,
.
CSS- .
:
transition-property, , ,
transition-duration, ,
transition-timing-function, ,
, transition-delay,
.
, ,
.
, , ,
, . 1:
1
: -webkit- iOS6 ,
Android, BlackBerry 10 Chrome 25; -o- Opera 12 -moz- Firefox
15. IE IE10, .
-webkit-, , , , .
344
10. CSS3: ,
nav a{
background-color: rgb(255,255,255);
transition-property:background-color;
transition-timing-function:linear;
transition-duration:0.8s;
transition-delay:200ms;
}
. ( )
.
.
, animation, . , ,
.
,
transition: background-color.

, ,
all:
nav a:hover, nav a.hover {
background-color: rgb(0, 0, 0);
border: 5px dashed #CCCCCC;
}

(.10.1).
. 200, 800 , . .10.1 , ,
200.
. 10.1. background-color,
, ,
800 200
, , . , .
- .
CSS-
345
transition-property
transition-property , . , , :
background-color;
background-position;
background-size;
border ( , );
border-color;
border-radius;
border-width;
border-spacing;
box-shadow;
bottom;
clip;
color;
columns;
column-width;
column-count;
column-gap;
column-rule ( , );
crop;
flex;
flex-basis;
flex-grow ( );
flex-shrink ( );
font-size;
font-size-adjust;
font-stretch;
font-weight;
height;
left;
letter-spacing;
line-height;
margin;
346
10. CSS3: ,
max-height;
max-width;
min-height;
min-width;
opacity;
order ( flex);
outline-color;
outline-offset;
outline-width;
padding;
perspective;
perspective-origin;
right;
text-decoration-color;
text-indent;
text-shadow;
top;
transform;
transform-origin;
vertical-align;
visibility;
width;
word-spacing;
z-index.
, ,
. ,

.
, ease in, ease out cubic-bezier,
.
, , top: 0; top: 100px; 50 px, , , display: block; display: none;

( . 10.1 )
, , . height: 600px; height: 700px;, height: auto;
height: 700px;.
347
CSS-
10.1.
height
100 px
200 px
150 px
height
auto
200 px
opacity
0,5
display
block
none
, ,
, ,
background-position background-size.
visibility.
, , ,
.
(visible) (hidden)
, .
,
, .
transition-property
, ,
all.
, , all:
nav a{
-webkit-transition-property: background-color; /* iOS6-, BB, Android, Ch25-*/
-moz-transition-property: background-color; /* FF4 to 15 */
-o-transition-property: background-color; /* O10.5 to 12 */
transition-property: background-color; /* IE10, FF16+, 012.5+, Ch26+, iOS7 */
-moz- -o-
. -ms- ,
Firefox Opera. , transition

, -webkit-.
, , transition, , . , , ,
.
transition-duration
transition-duration
.
348
10. CSS3: ,
,
.
8. .
( )
, :
-webkit-transition-duration: 0.5s;
transition-duration: 500ms; ...
transition-timing-function
transition-timing-function ,
.
ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end,
steps(x, start), steps(x, end) .
: , ,
. ,
! ,
CSS3 , , , - .
, step
(ease, linear, ease-in-out ..),
:
ease, cubic-bezier(0.25, 0.1, 0.25, 1.0). ,
;
linear, cubic-bezier(0.0, 0.0, 1.0, 1.0). -
;
ease-in, cubic-bezier(0.42, 0, 1.0, 1.0). , -
;
ease-out, cubic-bezier(0, 0, 0.58, 1.0). ,
;
ease-in-out, cubic-bezier(0.42, 0, 0.58, 1.0). ,
;
cubic-bezier(p1,p2,p3,p4). p1 p3 0 11.
1
,
, ,
,
. , http://cubicbezier.com, .
CSS-
349
Step- steps(x, end), steps(x, start), step-end step-start

. .
, , .
, , steps(5, start) 0, 20, 40, 60 80% .
steps(5, end) , 20, 40, 60, 80 100% .
step-start steps(1, start), step-end steps(1, end). steps() . -
.
:
...
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
...
transition-delay
transition-delay , ,
.
0s , . .
, ,
.
transition-delay ,
.
.
A B, , ,
, . 50.
,
, .
.
transitionduration, , , ,
, . , ,
transition-duration, 10, 4, , 40% :
350
10. CSS3: ,
...
-webkit-transition-delay: 250ms
transition-delay: 0.25s;
}
transition
- :
nav a{
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.5s;
transition-duration: 500ms;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 250ms;
transition-delay: 0.25s;
}
8, 12 16 1 transition, . ,
(
):
transition-property;
transition-duration;
transition-timing-function;
transition-delay.
nav a{
-webkit-transition: background-color 500ms linear 250ms;
transition: background-color 500ms linear 250ms;
}
nav a:hover, nav a.hover {
background-color: #FF0000;
}
,
, ,
, ( )
.
- .
1
CSS-
351
,
.

? ,
backgroundcolor, border-color color? transition
.
, background-color
border (
, ).
, -, border , , -, border
transition-property
, all. , all
,
.
,
, , transition-property
. background-color ( 250), ,
, ,

0s 0s.
, transition
all, , hover:
nav a{
border: 5px solid #CCCCCC;
-webkit-transition: all 500ms linear 250ms;
transition: all 500ms linear 250ms;
}
all
, .
, , , transition-property
:
nav a{
352
10. CSS3: ,
color: red;
-webkit-transition: border, color 500ms linear 250ms;
transition: border, color 500ms linear 250ms;
}
, ,
, , ,
,
, , , transition-property transition-duration:
nav a{
color: red;
-webkit-transition:
background-color, color 500ms linear 750ms,
border 500ms linear 250ms;
transition:
background-color, color 500ms linear 750ms,
border 500ms linear 250ms;
}
(border), transitiondelay , .
, 750ms, transition-delay 500ms, (border), 250ms,
,
(background-color color):
transition-property:
background-color, color, border;
transition-duration:
500ms;
transition-delay:
750ms, 750ms, 250ms;
,
, , ,
. , ,
.
CubeeDoo , ,
0,25. (
),
0,25:
1
2
3
4
5
#board > div {

position: relative;
width: 23%;
height: 23%;
margin: 1%;
CSS3-
6
7
8
353
float: left;
-webkit-transition: 0.25s;
transition: 0.25s; ...
, 7 8, , ,
, ( transition-delay)
( transitionproperty) transition-timing-function
ease.
transition: 0.25s, transition:
all 0.25s ease 0ms;, , , .
CSS3-
, , , . 2D-
, , IE91,
3D,
.
, IE9 .
CSS3-,
.
CSS-: transform, , transform-origin, , .
transform-origin
,
transform-origin.
transform-origin 50% 50% 0, . x,
, y, , . z-, 3D-.
, left, center, right, top bottom, z- ,
1
Internet Explorer :
progid:DXImageTransform.Microsoft.Matrix().
354
10. CSS3: ,
,
.
transform-origin ,
.
( ), ,
, (.10.2).
transform-origin , , , , ,
, .
.
. 10.2. ,
, ,
90
.10.2 transform-origin
, . , , :
-webkit-transform-origin:
-moz-transform-origin:
-ms-transform-origin:
-o-transform-origin:
transform-origin:
top left 0; /* webkit blink */

top left; /* FF 3.5 - 15 */
00; /* IE9 */
000; /* O11.0-12.0 */
top 00; /* IE10+, FF16+, O12.1 only */
top left, 00, 000 top left 0 1.

(
transform-origin: center center 0;) , transform,
, .
1
IE9, Firefox 3.5 15, Opera 12 WebKit. Firefox16, IE10,

Opera 12.1 Opera Mobile 11. Opera Mini . ,
transform-origin, 2D-.
Opera 12.1, -webkit-,
Presto.
CSS3-
355
transform
CSS- transform , iPhone
Firefox3.5+, Opera 10.5, Internet Explorer 9 WebKit, CSS. , , . CSS- ,
.
, .

. transform
, . .
translate()
translate(x, y) (.10.3) ,
x
y:
-webkit-transform: translate(15px, 15px);
-ms-transform: translate(15px, 15px);
transform: translate(15px, 15px);
translateX()
translateX(x) translate(),
:
-webkit-transform: translatex(15px);
-ms-transform: translatex(15px);
transform: translatex(15px);
translateY()
translateY(y) translate(),
:
-webkit-transform: translatey(-15px);
-ms-transform: translatey(-15px);
transform: translatey(-15px);
scale()
scale(w, h) (.10.4) w
h :
-webkit-transform: scale(1.5, 2);
-ms-transform: scale(1.5, 2);
transform: scale(1.5, 2);
356
10. CSS3: ,
. 10.3. translate: translate(15px, -15px),

translateX(15px) translateY(-15px)
, . , , ,
:
transform: scale(2);
,
, .

, ,
scale(1).
scaleX()
scaleX(w) scale(),
. scale(w, 1):
-webkit-transform: scalex(0.5);
-ms-transform: scalex(0.5);
transform: scalex(0.5);
-o- -moz- , Mozilla Presto

.
scaleY()
scaleY(h) scale(),
. scale(1, h):
-webkit-transform: scaley(2);
-ms-transform: scaley(2);
transform: scaley(2);
CSS3-
357
. 10.4. scale:
scale(0.5, 0.75), scaleX(0.5), scaleY(0.5) scale(0.5
rotate()
rotate() (.10.5)
( .10.2) :
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
rotateX()
rotateX() X:
-webkit-transform: rotatex(15deg);
-ms-transform: rotatex(15deg);
transform: rotatex(15deg);
90 X ,
180 , , . ,
, backfacevisibility.
rotateY()
rotateX(), rotateY()
Y:
-webkit-transform: rotatey(15deg);
-ms-transform: rotatey(15deg);
transform: rotatey(15deg);
CubeeDoo
rotateY(180deg), ,
.
rotate(0deg)
rotate(360deg) ,
.
358
10. CSS3: ,
. 10.5. rotate: rotate(75deg), rotateX(75deg)

rotateY(75deg) (rotateX X, 90
, , 90,
)
skew()
skew(x,y) (.10.6) XY. x X, y Y.
, ,
skew(x, 0deg) skewX(x). , , :
-webkit-transform: skew(15deg, 4deg);
-ms-transform: skew(15deg, 4deg);
transform: skew(15deg, 4deg);
skewX()
skewX(x) skew(), X, XY,
X. ,
:
-webkit-transform: skewx(15deg);
-ms-transform: skewx(15deg);
transform: skewx(15deg);
skewY()
skewY(y) skew(), Y. skew(0deg, y).
, :
-webkit-transform: skewy(-3deg);
-ms-transform: skewy(-3deg);
transform: skewy(-3deg);
CSS3-
359
. 10.6. skew: skew(15deg, 15deg),

skewX(-15deg) skewY(-15deg)
skewX(x) skewY(y) ,
skew(x, 0deg) skew(0deg, y) .
, ,
skew(x, 0deg) skew(0deg, y) , , skewX(x) skewY(y)
skew(x, y);, . .10.6.

,
. , :
.enlargen:hover, .enlargen.hover {
-webkit-transform: translate(50%, 50%) scale(2) rotate(0deg);
-ms-transform: translate(50%, 50%) scale(2) rotate(0deg);
transform: translate(50%, 50%) scale(2) rotate(0deg);
}
. 50% ,
. rotate(0deg) , ,
rotate, ,
. ,
rotate(), , , .
360
10. CSS3: ,
0, . (s ms), rad, grad,

turn, Hz kHzs.
, transition-property
, transform .
enlargen () , , ( ).
,
, .
matrix(). matrix() ,
, , .
.
, matrix,
.
, matrix
, :
transform: translate(50%, 50%) scale(2) rotate(0deg);
transform: matrix(2, 0, 0, 2, 100, 172.5)
CSS matrix, . , - matrix. ,

, - , , .

, transition-property, , .
transition all
transition, (all)
transform.
transform ,
transition, .
, , , :
p{
-webkit-transition:
transition:
-webkit-transform:
-ms-transform:
transform:
-webkit-transform 500ms linear 250ms;

transform 500ms linear 250ms;
translate(0) rotate(0deg);
361
CSS3-
}
p:hover {
-webkit-transform:
-ms-transform:
transform:
padding:
border:
}
translate(100px, 100px) rotate(90deg);

3px;
5px solid #00ff00;
-ms- transform, transition,

IE10, IE9, IE10.
3D-
3D-, -
. iOS 3.2, Android 3, BlackBerry 10, Firefox 10, IE10, Safari4,
Chrome 123D- ,
. 3D- Opera 15 Blink. 3D- iPhone 2 ( )
Mac OS Xv10.6 .
CSS 3D-
. , 3D-
3D- (,
).
2D-, ,
IE10, 3D-.
WebKit Blink
-webkit-.
3D- : -,
3D- ,
-, .
translate3d()
translate3d(x, y, z) x, y z ( ,
). xy z
.
translateZ()
translateZ(z) translate3d(),
z. z , .
, .
362
10. CSS3: ,
translateZ(0)
( zoom:1 IE6),
, , .
, .
, RenderLayer,
, . , 2D-, 3D-

, 60 /.
, , 3D- , , , ( z-),
,
3D-. ,
, transform: translateZ(0).
scale3d()
scale3d(w, h, z) (w), (h) z- (z)
. z-
Z.
scaleZ()
scaleZ(z) scale3d(),
z-, Z , .
rotate3d()
rotate3d(x, y, z, angle) 3D-.
. (angle) (deg), (rad)
(grad).
3D-; , ,
x, yz.
.
perspective()
perspective(p) , :
transform: perspective(100px) rotatey(3deg);
CSS3-
363
perspective,
.
3D-
3D-,
, , ,
2D-.
transform-origin
, transform-origin
. 3D-
z-. transform-origin ,
z-, :
transform-origin: 00500px;
, Safari4+
Mac OS Xv10.6 iPhone 2.0 (
iPhone), , transform-origin,
, .
perspective
perspective 3D- perspective().
perspective, ,

z-, z=0.
z=0 .
z- p/2 ( z=0)
, z- p
. , , , , .
500
1000.

, ,
perspective-origin.
3D- ,

.
: perspective:
600px transform: perspective(600px)?
364
10. CSS3: ,
,
.
.
transform-style
transform-style , 3D-
. 3D- . -
, , . 3D-,
, - . transform-style.
: flat preserves-3d. flat
, .
preserves-3d 3D-
.
backface-visibility
backface-visibility , ,
,
. : visible (
) hidden. , CubeeDoo
, , .
, , ,
backface-visiblity hidden.

CubeeDoo :
#board > div {
position: relative;
width: 23%;
height: 23%;
margin: 1%;
float: left;
-webkit-transition: 0.25s;
transition: 0.25s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
CSS3-
cursor: pointer; /* for desktop */

}
height: 19%;
}
height: 15%;
}
.back,
.face,
.back:after,
.face:after {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 3px;
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
border: 5px solid white;
}
.back:after {
font-size: 2.5rem;
line-height: 100%;
background:
50% 50% no-repeat,
00 no-repeat #fff;
font-style: normal;
box-shadow: inset 1px 1px 0 currentcolor,
1px 1px 1px rgba(0,0,0,0.1);
color: rgb(119, 160, 215);
background-image:
xmlns="http://www.w3.org/2000/svg"><g><text xml:space="preserve"
text-anchor="middle" font-family="serif" font-size="40" id="svg_1"
rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.025));
background-image:
xmlns="http://www.w3.org/2000/svg"><g><text xml:space="preserve"
id="svg_1"
365
366
10. CSS3: ,

rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.025));
-webkit-transform: rotatey(0deg) translatez(0);
transform: rotatey(0deg)
transform: rotatey(0deg) translatez(0);
}
.face {
-ms-transform: rotatey(180deg);
}
#board > div.flipped {
-webkit-transform: rotatey(180deg) translatez(0);
transform: rotatey(180deg) translatez(0);
}
CubeeDoo , 250.
: .
CSS,
.
. ,
backgroundcolor background-image SVG- <div>- , . , SVG
::after, .
, . transform: rotatey(180deg)
translatez(0);, . , HTML
, ( back)
( face):
</div>
.
, , ,
backface-visibility: hidden;. ,
, (
, , ).
367
CSS3-
3D- translateZ(0), , ,
, . :
-webkit-transform:
-webkit-transform:
transform:
transform:
rotatey(180deg);
rotatey(180deg) translatez(0);
rotatey(180deg);
rotatey(180deg) translatez(0);
3D-.
CSS, . translateZ() ,
, translateZ() , . , .
, , 3D,
. , 3D-.
transform-style: preserve-3d, , , ,
3D-.
, ,
.
0,25 , ,
0,25 .
- . , , , .

DOM-.
transform: scaleY(0.8), , .
. .
DOM-.
DOM-
.

. , .
.
CSS3-
, , .
368
10. CSS3: ,
, ,
.
,
CSS3 animation.
:
animation-name , . none,
. animation-name;
animation-duration . 0s,
- . ,
animation-duration, 0 ;
animation-timing-function
. , ,
transition-timing-function. ,
animation-timing-function
. ease;
animation-iteration-count ,
infinite (). -
;
animation-direction (alternate) (normal);
animation-play-state : running ,
paused .
.
, . running;
animation-delay . ,
- .
, , 10,
animation-delay -4s,
40% ;
animation-fill-mode ,
. :
yy backwards. , , 0% ;
yy forwards. , ,
, ,
, ;
CSS3-
369
yy both. , forwards backwards,

;
yy none. ,
, forwards
backwards;
animation , animation-name , animation-duration , animationtiming-function, animation-delay, animation-iteration-count, animation-direction
animation-fill-mode. ,
,
, .

. @keyframes.
@keyframes, ,
, , ({}). 1 () . .
animation-name.

, . , from to. :
@keyframes crazyText {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
WebKit- 2:
@-webkit-keyframes crazyText {
from {
1
CSS (IDENT) , ,
(ID)
[azAZ09] ISO 10646 U+00A0 (-) (_). , ,
. .
IE10, BlackBerry, Android, Chrome for Mobile, iOS
. Opera Mini. , WebKit- Boot2Gecko. Firefox
Firefox 16, Opera Opera 12.1, Opera Mobile . IE IE10 .
370
10. CSS3: ,
font-size: 1em;
}
to {
font-size: 2em;
}
}
from 0%,
to 100%. , , . 0
.
,
, , . :
@-prefix-keyframes rainbow {
0% {
background-color: red;
}
20% {
background-color: orange;
}
40% {
background-color: yellow;
}
60% {
background-color: green;
}
80% {
background-color: blue;
}
100% {
background-color: purple;
}
}
, , .
20, 40, 60% .. (, ,
).
( , ),
.
. ,
0 100%,
.
CSS3-
371
.
, , CSS3-.
, , .
, . ,
. -
@keyframes .
. , - ,
10 , 5 crazyText font-size: 1.5em, rainbow
- .

, , . @keyframes , : animation-name
animation-duration. :
div {
animation-name: crazyText;
animation-duration: 1s;
animation-iteration-count: 20;
animation-direction: alternate;
animation-delay: 5s;
animation-fill-mode: both;
}
crazyText, 1
20, , 5 , .
animation-fill-mode both ,
<div> font-size
1em, 0% from 5- .
font-size , 1em animation-direction:
alternate. animation-direction: normal
animation-direction , font-size
, 1em,
.
372
10. CSS3: ,
20 , 25
(20 ),
font-size , , animation-fill-mode: both .
animation-direction: alternate font-size 1em.
animation-direction
animation-direction: normal, 2 em.
<div> ,
font-size, , .
rainbow :
div {
padding: 20px;
animation:
crazyText 1s 205s alternate both,
rainbow 4s infinite alternate;
}

, :
, .
: visibilility animationtiming-function. ,
.
animation-timing-function,
,
, .
, . ,
, ( ease-in)
( ease-out):
@keyframes bouncing {
0% {
bottom: 200px;
left: 0;
animation-timing-function: ease-in;
}
40%, 70%, 90%{
animation-timing-function: ease-out;
bottom: 0;
}
55% {
bottom: 50px;
}
80% {
bottom: 25px;
373
CSS3-
}
95% {
bottom: 10px;
}
100% {
left: 110px;
bottom: 0;
animation-timing-function: ease-out;
}
}
( - )
. 40, 70 90%,
. ,
CSS.
, ,
. -
, :
0 100%.
, ,
left, bottom
.
animation-timing-function,
.
. animation-timing-function
, 1.

HTML ,
- .
CSS- , , , ,
.
. 10.7.
1
, -
,
.
374
10. CSS3: ,

animation-timing-function: step(x, start). step
.

. ,
.10.7, :
.lemming {
height: 32px;
width: 32px;
background-image:url(lemming.gif);
-webkit-animation: lemming 1s steps(8,end) alternate infinite;
animation: lemming 1s steps(8,end) alternate infinite;
}
@-webkit-keyframes lemming {
from {
background-position: 00;
}
to {
background-position: 256px 0;
}
}
@keyframes lemming {
from {
}
to {
}
}
, 256 ,
background-position: 256px 0; .
animation-timing-function steps(x, start), -
, ,
steps(x, end), , .
, .
steps(5, start),
20, 40, 60, 80 100%, 0% ,
0 20% ,
20%, 0 20%. steps(5, end),
,
0, 20, 40, 60 80%,
100% .
, background-position
, -
CSS3-
375
.
- .
CubeeDoo
CubeeDoo . ,
. ,
, ,
:
#board > div.matched {
-webkit-animation: fade 250ms both;
animation: fade 250ms both;
}
#board > div.matched:nth-of-type(1) {
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
}
@-webkit-keyframes fade {
0% {
-webkit-transform: scale(1.0) rotatey(180deg) rotate(0)
translatez(0);
}
100% {
-webkit-transform: scale(0) rotatey(180deg) rotate(720deg)
translatez(0);
}
}
@keyframes fade {
0% {
transform: scale(1.0) rotatey(180deg) rotate(0) translatez(0);
}
100% {
transform: scale(0) rotatey(180deg) rotate(720deg) translatez(0);
}
}
#highscores li.current {
-webkit-animation:
winner 500ms linear 8 alternate forwards;
a nimation:
winner 500ms linear 8 alternate forwards;
}
@-webkit-keyframes winner {
0% {background-color: hsla(74, 64%, 59%,1);}
100%{background-color: hsla(74, 64%, 59%,0)}
}
@keyframes winner {
0% {background-color: hsla(74, 64%, 59%,1);}
100%{background-color: hsla(74, 64%, 59%,0)}
}
376
10. CSS3: ,
matched (), fade. matched ,

flipped (), .
, , flipped
, , . ,
, , 3D-.
fade ( )
. 250 . JavaScript , flipped matched,
data-value="0"
.
, .
, current .
JavaScript,
,
, CSS.
winner, , :

.
animation-iterations: 8; animation-direction: alternate;
animation.
, . 3D-:
, .
,
CSS- , JavaScript.
CSS-. CSS-
JavaScript-.
CSS, JavaScript. CSS
,
.
CSS- JavaScript-, . JavaScript-, CSS-
. CSS
, JavaScript, .
CSS3-
377
CSS .
, JavaScript, 8 , . ,
, :
, , animation-delay, . 15,

0, 1, 2..,
, ,
.
loaded () ,
loaded.
, .
, ,
. , ,
, , , ! : , . , .
CSS- , ,
.
, . , ,
16,67.
API- , CSS-. ,
animationStart, animationEnd animationIteration.
, - .
CSS, .
11.
11
CSS

,
. , , , 52- ,
35 . , ,
.
,
. 90%

rem.
95%.
CSS, ,
CSS-,
99%.
99, 100%? ,
, , , ..,
, ,
.
,

, :
. (
379
) . , ,
. (tiny), (xx-small), (small),
(medium), (large), (x-large),
(xx-large) (huge) , , . , ,
, ,
.

, , ,
.
320, 480, 640 960 , .
, .
, , . . , ,
,
. ,
: .
,
, , .

, ,
.
DPI
, JavaScript. , , , .
2 7,
.

CSS- columns ,
. columns column-count
column-width. column-width ,
min-column-width. columncount ,
max-column-count.
380
11. CSS -
column-count .
, column-width,
,
column-count, ,
column-width. .

column-gap,
column-rule. CSS- column-gap , normal, 1em.
. , .
, 24-
, HTC One :
columns: 240px 6;
:
, 240 . iPhone
320,
, . 19201080
, .
, .
border, , , column-rule,
column-rule-width , column-rule-style
column-rule-color , border.
column-rule-width
column-gap, . ,
column-rule-style, :
p{
margin: 001em;
}
div {
padding: 1em;
margin: 1em;
border: 2px solid #ccc;
columns: 240px 6;
column-gap: 2em;
column-rule: 2px dashed #ccc;
}
381
1 , , 480+ 4ems, , .11.1

- , .
. 11.1. ,

: , ,
. ,
, .
,
. ,
.
column-span all,
. columnspan: all;, , , .
.
column-fill ( )
fill ( balance, )
. ,
column-span column-fill .
, width,
column-width, column-gap column-rule-width.
1
,
Opera Mini, IE10 WebKit
Firefox.
382
11. CSS -
, .
, , , ,
.
,
, , ,
.

border-image

.
, , .
border-image
, ,
, , ,
.
.
.11.2 , ,

border-image .
. 11.2. ,

iOS , , .11.2.
.
,
. CSS- borderimage ,
, , 1010 200300.
, .11.3, , .11.2, ,
, ( ) .
383
. 11.3. border-image,
, ,
top (T), right (R), bottom (B)
left (L) ,
(T, R, BL) , . , (TB) (RL). , , (

1, 2, 3 4), , .
border-image ,
border-image-source , border-image-slice , border-image-width , border-image-outset
border-image-repeat.
:
-prefix-border-image: <source>
<slice {1,4}> / <width {1,4}> <outset> <repeat{1,2}>;
, ,
border-image, ,
. , .
,
. , , , , .
, .
. 9 , border-style:
.button {
border: solid;
}
.stamp {
border: solid;
}
.arrow {
border: solid;
}
border-style , none
hidden, .
384
11. CSS -
border-image-source
,
, border-image-source , URL-, URI-
. , .11.3, , ,
border-image-source: url(stamp.gif),
border-image
:
.button {
border: solid;
border-image: url(button_bi.png) ...
}
.stamp {
border: solid;
border-image: url(stamp.png) ...
}
.arrow {
border: solid;
border-image: url(arrow.png) ...
}
, : , base-64-,
GIF-, JPEG-, PNG- SVG-.
border-image-slice
border-image-slice ,
, , (. .11.2). border-image-slice
border-image, .11.3 M,
.
border-image-slice
, , ( TRouBLe). ,
, ,
: , (. .11.3). , ,
, .
() border-image.
, border-image-slice
fill
385
, . fill , , , .
, ,

border-image-repeat.
,
5 , 9 ,
0 , 5
20 .
, . border-image-slice: 5px fill;, border-image-slice: 9px; border-image slice:
05px 020px fill;.
, fill
:
.button {
border: solid;
border-image: url(button_bi.png) 5 fill...
}
.stamp {
border: solid;
border-image: url(stamp.png) 9 ...
}
.arrow {
border: solid;
border-image: url(arrow.png) 05020 fill...
}
.
, .
, .
border-image-width
border-image-width . border image-width
border-image,
border-width. ,
border-width, 3, , border-width.
, auto, border-width
border, border-image:
.button {
border: solid 5px;
386
11. CSS -
border-image: url(button_bi.png) 5 fill...

}
.stamp {
border: solid 9px;
border-image: url(stamp.png) 9 / 9px ...
}
.arrow {
border: solid;
border-width: 05px 020px;
border-image: url(arrow.png) 05020 fill / 05px 020px...
}
, .11.3 1, 2, 3 4,
.
border-image-width , border-image-slice,

. .

, border-image-width,
( ).
border-image-slice border-image-width . border-width , .
! border-width
.
border-image-width , box-sizing:
border-box;.
border-image-outset
border-image-outset ,
.
0.

PNG ,
background-color .
: background-clip: padding-box; borderimage-outset. .
, ,
box-shadow , ,
:
387
.stamp {
border: solid 9px;
background-color: #dedeef;
border-image: url(stamp.png) 9 / 9px / 12px ...
}
border-image-repeat
, ,
, . , ,
,
. , , , ,
. , , , , . border-image-repeat.
border-image-repeat
( ) / ,
, , (TRouBLe).
, .
stretch , , , repeat ( ).
, ,
, . round
(), , , , . , space
,
,
, , . ( , ) .
stretch,
round. (stretch),
, . (repeat), ,
, ,
. (round) , , .
round ,
repeat1.
1
WebKits- round space, repeat

(, -, ).
388
11. CSS -
. , .
, , .
-
, ,
, , :
.button {
border: solid 5px;
border-image: url(button_bi.png) stretch 5 fill;
}
.stamp {
border: solid 9px;
background-color: #dedeef;
border-image: url(stamp.png) round 9 / 9px / 12px;
}
.arrow {
border: solid;
border-width: 05px 020px;
border-image: url(arrow.png) stretch 05020 fill / 05px 020px;
}
stretch ,
.
border-image
, .
,
border-image. .
WebKit-, Android 4.2 iOS 5.1,
Opera 12.1. border-image IE
( IE11) :
.stamp {
background-color: #ccc;
border: solid 9px transparent;
-webkit-border-image: url(stamp.png) 9 / 9px / 12px round;
-o-border-image: url(stamp.png) 9 round;
border-image: url(stamp.png) round 9 / 9px / 12px;
}
.button {
border: solid 5px transparent;
-webkit-border-image: url(button.png) 5;
-o-border-image: url(button.png) 5;
border-image: url(button.png) 5 fill;
}
.arrow {
border: solid transparent;
flexbox
389
border-width: 1px 5px 1px 20px;

-webkit-border-image: url(arrow.png) 15120 / 05px 020px stretch;
-o-border-image: url(arrow.png) 15120 / 05px 020px stretch;
border-image: url(arrow.png) stretch 05020 fill / 05px 020px;
}
, ,
.
. , -
.
flexbox
flexbox
(flexbox layout mode)
, flexbox , , , ,
flexbox (.11.4).
flexbox - . , , .

.
CSS (
). flexbox-
( flexdirection, flex-wrap, flex-flow
order), ( flex-grow, flexshrink, flex-basis flex),
(
justify-content, align-items,
align-self align-content,
display).
flexbox display : flex
inline-flex. flex inline-flex (IE10 -ms-flexbox)
display ,
1. flex ,
1
, , display, . WebKit- display: -webkit-flex;,

IE10 display: -ms flexbox;. Opera Firefox 20+ .
390
11. CSS -
. 11.4.
HTML
. ,
, ,
.., HTML-. CSS ,
.
, .11.4,
HTML:
<article>
<div>A</div>
<div>B</div>
<div>C</div>
</article>
, , ?
. -
:
article {
display: -webkit-box;
display: -moz-box;
flexbox
display:
display:
display:
display:
391
-webkit-flex;
-moz-flex;
-ms-flex;
flex;

. - , ,
<div>- , ; , <div>,
.
, , . display
, , :
WebKit- Firefox 17
-webkit-box -moz-box. ,
Chrome BB10, IE10 Firefox 1719.
FF20+, Opera, IE11 beta Opera Mobile .
IE10 2012- tweener,
, IE11 beta.
. . .
.
flexbox.
, flexbox
flexbox-,
.

. - .
,
, ,
. flexbox, , . ,
- (IE11, Chrome 29+)
Opera Mobile Presto (Opera 12.1), , , . - .
, flex-direction,
392
11. CSS -
flexbox-. ,
row, .
row-reverse, column column-reverse.
flex- . , flex-wrap
, , nowrap,
wrap wrap-reverse.
flex-flow flex-direction
flex-wrap, flexbox.
, , order. order
, flexbox-. flex-direction:
row-reverse;:
article {
display: flex;
flex-direction: row-reverse;
}

order: 1; - , , , ,
. , order: 1; - , ,
:
article {
display: flex;
}
div:nth-of-type(2) {
order: 1;
}
<article> <div>- (A, BC),

, B ,
B A C.
order: 1;
}
A C B.
flex
flex flex-grow, flex-shrink flex-basis.
flex.
flexbox
393
,
,
. flex ,
flexbox. flexbox , flex,
,
flex.
flex . flex-grow
,
flexbox .
( , ) flex-shrink ,

flexbox ,
. flex-basis , width, ,

flex-shrink flex-grow. flex: 110;.
, A B, B
C, (. -
):
flex: 4;
}
flex: 2;
}
flex: 1;
}
flexbox ,
.
, ,
, . , , , , .
.
:
<article>
<div>
394
11. CSS -
</div>
<aside>
</aside>
<footer>
</footer>
</article>
article {
display: flex;
flex-direction: row;
}
article > * {
flex: 1;
}
aside {
order: 1;
}
article > div {
flex: 3;
}
}
, , <aside>, , , -
. flex: 1;,
flex: 3;. ,
aside, div footer 20, 60 20%.
, display: flex; , ( flex-direction)
.

, , flex-direction: column. :
@media screen and (max-width: 600px) {
article {
display: flex;
flex-direction: column;
}
}
, , , .
@supports
- ( , @) @supports -
flexbox
395
W3C, Firefox Opera. -

@supports ,
flexbox, , ,
.
, flexbox . CSS-, ,
flexbox, CSS-
display: flex;. @supports @media,
CSS:
@supports (display: flex) and (background-color: red) {
h1 {color: green;}
}
, <h1> ,
display: flex;, background-color: red;, .
. .

@media:
@media screen and (-webkit-transform-3d) {
h1 {
-webkit-transform: translateZ(0) rotate(5deg);
-webkit-animation: makemedizzy 1s infinite;
}
}
WebKit-,
3D-, <h1> . , , . WebKit-, CSS- transform 1.
, ,
:
@media screen and (transform-3d) {
h1 {
transform: translateZ(0) rotate(5deg);
animation: makemedizzy 1s infinite;
}
}
1
Opera,
Blink, Opera Presto, WebKit- .
396
11. CSS -
,
transform-3d.
@media , -
, , .
@supports.
@supports ,
. @media .
, @supports, , , ?
@supports , , ,
flexbox, , , , .

. , flexbox . CSS2.1 ,
flexbox .
flexbox
, , ,
- .
, ,
, , .

: ,
, , .
, 100% , , 440 640 . ,
:
header img {
max-width: 100%;
height: auto;
}
, ,
.
(width: auto;), .
width max-width, -
397
,
.
, min-width: 100% width: 100%;.
- , , , , . height: auto;.

, ,
. ,
, , .
DPI, , . , ,
, ,
,
.
Retina:
iPhone 4, 2009, Retina Display, 326 (DPI).
iPad , 2012,
264 DPI.
DPI Retina Display MacBook.
iPhone 320 480 iPad
768 1024 . Retina-
640960 15362048 . ,
, 1 , 4 , .
Retina Display .
Apple, . - DPI. Apple. , iPhone, ,
.
.
iPhone 4 - Retina
Display, .
, , CSS. ,
, .
398
11. CSS -

, CSS.
( ) CSS.
, .
, DPI, . DPI
. , 4 800, :
800 /4 = 200 /.
DPI 200 / DPI. , , iPad, 7681024 , ( ) DPI 15362048 ,
7,75 1, DPI
132 264 :
1024 /7,75 = 132 /;
2048 /7,75 = 264 /.
DPI, ,
. , ,
. ,
, iPad , , ,
,
iPad.
, ,
JPEG, PNG GIF ,
72/. , , .

DPI.
(
, , ),
.
: DPI DPI , , ,
, , , .
1
, 9,5 9,7 , .
399
API-,
, . JavaScript CSS,
,
,
. ,
( , ?).
.
JavaScript navigator.connection.type, UNKNOWN,
ETHERNET, WIFI, CELL_2G, CELL_3G CELL_4G:
var connection, speed;
var connection = navigator.connection ||
navigator.mozConnection ||
navigator.webkitConnection ||
{'type':'0'};
//
switch(connection.type) {
case connection.CELL_3G: // 3G
speed = 'medium';
break;
case connection.CELL_2G: // 2G
speed = 'slow';
break;
default:
speed = 'fast';
}
document.body.classList.add(speed);
:
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2) {
body.fast {
background-image: url(../hidpi/bgimg.jpg);
}
}
, 1024 .
background-size
, , ,
400
11. CSS -
Retina.
background-size, 9.
72, 96 144 DPI.
Retina,
, , ,
, , .
100100
100100, 200200
Retina background-size:
.icon {
-size: 100px 100px;
background-image(../lodpi/icon.jpg);
}
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2) {
.fast .icon {
background-image(../hidpi/icon.jpg);
}
}
, ,
.
URI-
URI-
, HTTP-
. URI-
, .
URI-
, , .
, , URI-
, ,
HTTP- (, , DNS-). , ,
, DNS- HTTP-.
.
, Twitter,
, , ,
, ,
( ) .
401
Twitter-, .
Twitter ,
. Twitter URI-
. , . HTTP-
,
URI-
HTTP-.
,
. HTTP DNS-
-. .
,
,
. , background-position,
.
, . .11.5.
. 11.5. ,

steps() animation-timing-function, 10.
, ,
.11.6, CSS:
.psy {
width: 22px;
height: 40px;
background-image: url(sprite.png);
animation:
dance 4s steps(23, start) infinite,
movearound 9s steps (23, start) infinite 45ms;
}
@keyframes dance {
0% {
402
11. CSS -
}
100% {
}
}
@keyframes movearound {
0% {
}
100% {
}
}
. 11.6.
.
22 40 . 45 22 , , .
, <div>- .
,
40 .
HTTP-, , , ,
.
- . , ,
1024.
image-set()
Safari 6 Chrome21 image-set(),
:
body > header {
background-image: url(images/header.png);
background-image: -webkit-image-set(url(images/header.png) 1x,
url(images/header_2x.png) 2x);
height:60px;
}
CSS Working group,

. ,
403
. ,
,
srcset, .

,
. ,
CubeeDoo ,
.11.7, CubeeDoo.
. 11.7. , CubeeDoo

10000 . , ,
, - . ,
CSS. ,
,
, , ,
HTTP-.
,
HTML ,
::before / ::after SVG URI- .
, .
.
CSS-:
JPEG
: . PNG - , .
PNG-
, JPEG-. JPEG- , , PNG-
. JPEG- , PNG- JPEG-,
.
404
11. CSS -
CSS- JPEG PNG-,

JPEG-. JPEG-
PNG-, , :
div {
background-image:url(images/smallerFileThanPNG.jpg);
-webkit-mask: url(images/partToShow.png);
}
HTTP-,
. , - , PNG-
551.
PNG- JPEG- ,
88,
4, 92
PNG-.
WebKit-,
W3C. ,
WebKit; WebKit-.

Client-Hints . ,
, , .
Client-Hints ,
. , ,
, dpr, dw dh, , :
Client-Hints: dh=1280, dw=768, dpr=2.0
.

.
. UA- ,
UA-,
. UA-,
, -
. ,
Client-Hints, ,
, .
12
,
.
, ,

.
, , ,
, . ,
,
. .
, ,
, , , , , . ,
1 .
,
.
. ,
. , - . ,
, ,
.
, , , .
1
, <ahref=tel:4155551212>
415.555.1212</a>, 3, , .
406
12.

, .
,
. -
, .
,
. ,
, ,
- - .
,
, , , .
,

, ,
.
, , ,
(, , , ),
, ,
. ,
, ,
. CSS3, HTML5 API- JavaScript Internet Explorer. iPhone,
BlackBerry, Firefox mobile, Android mobile Chrome,
. - WebKit-, IE10, Opera, Firefox Android Boot2Gecko,
. HTML5,
, , . CSS3 ,

.
,

, - . , ,

. ,
407
, ,
, , , , .
, , : , , .
, , , ? ? ,
, , .

, ,
, . , .
. ,

. . ,
, , ,
, .
. Twitter,
Facebook, - , , ,
- .
, 15
,
.

. ,
, ,
, , . . ,
, .
. , - -
, , .
.
. ,
408
12.
. :
, , 1.
. -
, , ,
.
,
.

.

Apple (Steve Jobs)
, - iPhone ,
Apple iPhone. Apple,
, ,
.
- iPhone, iPod iPad.
.
Apple, Android, BlackBerry, Windows Phone, Firefox OS - .
, , :
? , ?
?
, . : ? :
, ()?
, , . , .
:
,
.
1
,
, . ,
iOS, , .
409
.
,
, ,
. .
:
, , , ,
. ,
,
.
. , , .
,
. , . , .
,
. ,
, 6, LocalStorage.
.

, , , , :
LocalStorage,
, , .
cookie-, , LocalStorage,
.
, ,

.
.
, .

, - iPhone. .
410
12.

. / .
, ,
. ,
.

/ , iPhone,
Dropbox Yahoo! .
,
, Yahoo! Google.

.
. , , , . ,
, .
:

, . , ,

.
, . CubeeDoo.
, , .
, .
, ,
, . ,
. ,
, .
,
. , .
411
, , , , .
,
.
/ ,
,
.

, , .
-, ( ) 1. <audio> <video>
5. play()
-. , .

, .
,
, - .
iTunes Store, Netflix, Flickr, YouTube - . .
, , . .

, .
,
, .

(
), , .
- . , ,
1
? -, , , -, ,
.
412
12.
, . LocalStorage (. 6). .
- ,
.
, 100. ,
. , -
.
- (
), ,
. (Done)
, .
.
- , ,
, , ,
, . , .
?
, , , , , .
, .
,
, . .
. ,
. . , - . ,
, .
, -.

. , ,
. ,
. .
,
, .
413
, , ,
.
80 20. ,
( 80%) , , (
20%) . ,
, ,
( ).
,
,
, , ,
, .
, , ,
. . . , .
, . , , . , ,
.
-, . , ( )
-
. -
.

, . ,
414
12.
.
, .
, ,
.

. , 25% .
.

4 16 ,
iPad . iPad
256 . Android-,
, 768.
, - , . , -,
. ,
, - ,
. ,
, . , . ,
, .
HTC 768, 222 ,
, .
. , .
. , .
,
, .
: , ,
.
,
,
,
415
1024, .
. , . ,

, - .

. - , ,
, !

-. Chrome (.12.1).
. 12.1.
Chrome
Chrome ,
.
, Chrome (ViewDeveloperDeveloper Tools (
)). Timeline ( ),
Timeline Memory () (. .12.1)1.
, (
Developer Tools ( )). , , . .
1
Safari Developer Tools, Opera DragonFly, Firebug

the Firefox add-on IE F12, IE11.
416
12.
, DOM-
.
, , -,
80, ,
. , , . ,
. .

.
, , ,
. 14.
Timeline Memory
, , .
, ,
-.
,
, . , ,
Wi-Fi. 14.

.
, - , , .
-
,
.
,
, , More
(), i- .
(
) . , , .
417
: , , ,
. , YouTube, Googl, ,
, - ,
, .
, ,
, , , - .

, IKEA
, , . ,
,
, , ,
, .

. ,
,
,
, ,
. .
.
. , . ,
.
, ,
,
:

. ,
. (
), ,
. (UI) (UX) ,
.

, .
- , ,
418
12.
, .
, . ,
.
. ,
,
,
, . , , ,
, . ,
, Google
Glass.

, .
,
,
, . .
,
. , ,
.
, , -:
, . ,
, , , . ,
. , , .
, , . .
, - ,
. . . : !

WebKit-
-, ,
.
WebKit-
419
<meta> <link>, Apple,
Android, Chrome Android, BlackBerry 10 iOS.

<meta> <link> 2, .
iOS , :
, , ,
.
, , , ,
.
iOS WebKit- , - .
, , , ,
. , .

, , .
, ,
20 (.12.2).
. 12.2. iPhone

,
-.
, . , , .
iOS , , (. .12.2) . default,
420
12.
black black-translucent,
() ,
(rgba(0,0,0,0.5)):
<meta name="apple-mobile-web-app-status-bar-style" content="black">
, web-app-capable.
content apple-mobile-web-app-capable yes, - ,
. ,
. , , , .
black-translucent 50% - ,
, ,
, .
CubeeDoo.
. , CubeeDoo
,
, -, .

,
, (.12.3).
, Safari iOS Firefox OS, <title> - 60. Chrome
URL-, , ,
. Chrome ,
Nexus Galaxy, , .
. 12.3. Safari () Android Chrome ()
WebKit-
421
-,
, . , 7,
iPhone (. 12.4)
CSS.
. 12.4. ,
iPhone CSS
, Safari,
. , JavaScript.
Safari1, -
window.scrollTo(0, 1);.
Safari :
<script>
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0,1);
}
</script>
(UX):
,
,
,
. ,
. ,
,
, .
. ,
1
iOS 7 .
422
12.
. ,
. , .
Apple .
.12.4, . Apple iOS, ,
. iOS 3030, , ,
4444. Apple 2020.
Android 48- (48 DP), 9 (0,35) , ,
, 710 .
, 48 DP , , ,
7 (48 DP

). 8 DP.
.
4448 , ,
.
,

.
, . .
, , , - ,
.
CubeeDoo , ,
,
. ? - . 99%
,
. , -
. , , .
WebKit-
423
( 4444
, 2222 , , ,
- ).

( ).

. .

.
, .

.

, - , , .
, Safari- iOS, , , ,
.
,
, :
<link rel="apple-touch-startup-image" href="/screenshot.jpg"/>
URL-, .
-,
.
. . . (
) ,
-.

<link rel="apple-touch-icon"
, ,
,
. . .
2, <link> ,
:
424
12.
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

href="touch-icon-ipad.png" />
href="touch-icon-hiresolution.png" />
. iOS 6
.
, rel
precomposed:
<link rel="apple-touch-icon-precomposed" href="path/image.png"/>
.
,
. :
(, CNN), .
iPhone ( iOS 7) 5757 10 . iPad 7474
12 . iTunes Store 512512 .
App Store, :
Apple ,
, , , . App Store ,
- , Apple.

,
. ,
, . ,
. , ,
. , . , !
, .
,
!
,
,
, .
, (. 4), ,
.
425
, .
. , , , . ,
,
, ,
.

. .
.
.
. .
.
.
, . .
. -
. ,
, , ,
,
.
. -
, .
, .
, (, , ) . . .

,
, .
, ,
. , ,
, .
426
12.
,
, ,
.
. CSS, :hover, ,
,
.
.12.5 , Dropdown
Pick Me , .
,
. ,
, , , .
. 12.5.
, , . ,
. , ,
, 1, DOM-, .
, ,
, , .
1
, Google .
13
, ,
, .
, . , ,
. , , ,
, .
! 23 .
, Bluetooth. -
,
. , ,

.

, ,
. 980, , , .
@viewport ,
<meta> , .
:
<meta name="viewport" content="width=device-width;"/>
content . - ,
.
428
13.
. ,
.
CubeeDoo,
,
. , ,
.
(, , ):
<meta name="viewport" content="width=device-width;
initial-scale=1.0; maximum-scale=1.0; minimum-scale: 1;
user-scalable=0;"/>
. :
.
,
. , ,
, . :
<meta name="viewport" content="width=device-width;
initial-scale=1.0; user-scalable=0;"/>
- width=device-width.
(
), . ,

550, :
<meta name="viewport" content="width=550">
, - . .
, ,

.
@viewport. viewport HTML , , CSS. .
. (Opera, IE10 WebKit) - @viewport. @viewport
, viewport.
429

, ,
, . DOM- addEventListener.
( ),
,
.

, , , . ,
, : , .
, .

. , iPad 11 . , , :
.
,
300 500,
, , , .
.
, !
. ? .

. . ,
, .

.
44,
22,
20 ( 10).
430
13.
, ,
, .
, . ,
, , , , .
, , . ,
,
. ,
, .
, . ,

. iOS . ,
, , ,
.

.
,
.
( ) ,
, . ,
. , , .
20 . ,
,
. . -
.
, .
, , .
.
, . , , , ..,
, .
431
,
. , ,
: -, ,
Apple ,
- Apple, -,
, Microsoft
, Chrome
Firefox. .

, Apple, , ,
.
: Apple
. . . ! Microsoft (pointer
events) W3C 1.
CSS- pointer-events, , ,
( ) .
JavaScript, , mouseover mouseout, pointerdown,
pointerup, pointercancel, pointermove, pointerover, pointerout, pointerenter pointerleave.
, , ,
, , . IE10
Microsoft
MS, , pointermove IE10 MSpointermove, IE11
.

, .
,
. ,
! , .

preventDefault().
, .
1
http://blog.jquery.com/2012/04/10/
getting-touchy-about-patents/
432
13.
, Android Browser, Chrome,

BlackBerry Browser, Opera Firefox, iOS
touchstart, touchend, touchmove touchcancel.
TouchEvent, changedTouches Touch.
Touch
, pageX, pageY, screenX, screenY, clientX, clientY, target
identifier. TouchList
. TouchEvent touches, targetTouches changedTouches,
altKey, metaKey, ctrlKey shiftKey.
, . ,
. , touchstart.
touchmove. , touchend. touchcancel
, , ,
.
, ,
,
?
. CubeeDoo touchcancel :
document.addEventListener('touchcancel', function() {
if (!qbdoo.game.classList.contains('paused')) {
qbdoo.pauseGame();
}
});
,
. (Luke Wroblewski)
Touch Gesture Reference Guide,
,
.
( ).

, , ,
.
, : , , , . ,
,
.
433
, , .
, , , .
JavaScript:
var isTouchEnabled = 'ontouchstart' in window ||
'createTouch' in document ||
(window.DocumentTouch && document instanceof DocumentTouch);
isTouchEnabled,
, , , ,
, -.
Phantom
Limb.
- --

. . - , .

.
, , tap-highlight-color.
.
transparent , ,
:
#content a{
-webkit-tap-highlight-color: #bada55;
}
#board a{
-webkit-tap-highlight-color: transparent;
}
, ,
#bada55,
, ,
.
434
13.

.
WebKit- -webkit-userselect: none;. user-select DOM-,
<body>, none, , , .
pointer-events: none; . , , , ,

DOM-, .

, ,
,
. , , touch-callout: none;:
img {
-webkit-touch-callout: none;
}
, CSS
. ,
.

, . CSS . , touch-action: none;,
:
.active #board {
-ms-touch-action: none; /* */
}
: JavaScript
preventDefault()? , .
CSS
preventDefault(). CSS JavaScript.
400,
435
, , , ,
..
onTouchEnd

, 300500,
. , ,
300 500 .
. ( ).
,
, .
.
100200 ,
.
CubeeDoo ,
. 300
, , . , , ,
, ,
.
- ,
.
:
- , . touchend. JavaScript,
click, touchend.
touchend , ,
, (click),
3005001.
, ,
onclick, touchend, 300
. , ,
,
touchstart preventDefault. :
1
Firefox Chrome, ,
, 500.
436
13.
eventHandlers: function() {
if ('ontouchstart' in window ||
'createTouch' in document ||
(window.DocumentTouch && document instanceof DocumentTouch)) {
qbdoo.btn_pause.addEventListener('touchend',
qbdoo.pauseGameOrNewGame);
qbdoo.btn_mute.addEventListener('touchend',
qbdoo.toggleMute);
qbdoo.clearScores.addEventListener('touchend',
qbdoo.eraseScores);
document.addEventListener('touchcancel',
qbdoo.pauseGameOrNewGame);
}
qbdoo.btn_pause.addEventListener('click', qbdoo.pauseGameOrNewGame);
qbdoo.btn_mute.addEventListener('click', qbdoo.toggleMute);
qbdoo.clearScores.addEventListener('click', qbdoo.eraseScores);
qbdoo.themeChanger.addEventListener('change', qbdoo.changeTheme);
},
<body>
click touchend, . ,
, . preventDefault stopPropagation. ,
,
, ,
.

. , , , touchend. touchend , Chrome Android.
,
, .
Chrome Android , .
, .
, , ( )
.

, .
437
, ,
.
, . , , , CSS,
JavaScript HTML5 ,
,
.

,
, JavaScript. ,
. deviceOrientation,
, .
.
, , (/c2),
(X, YZ), .
devicemotion:
window.addEventListener('devicemotion', function( ) {
//
});
, , , ,
.
,
(X, Y, Z) (T). compassneedscalibration
, ,
. , 8:
window.addEventListener('compassneedscalibration', function( ) {
// ,
//
});
(/) (X, YZ). ,

, .
deviceorientation , :
window.addEventListener('deviceorientation', function( ) {
//
});
438
13.
, deviceorientation,
(0 360), (90 90) (180 180) Z, XY. ,
, , ,
, deviceorientation .

, ,
, . ? , ? ?

API- (Network API)
navigator.connection.type unknown, ethernet, wifi, 2g, 3g,
4g none.
: WIFI, CELL, CELL_3G, CELL_2G, CELL_4G UNKNOWN.
API . , .
API , . ,
, ,
, - .
, , .
navigator.connection
bandwidth metered, change.
navigator.connection.bandwidth 0 (
), ()
. navigator.connection.metered
true false. true, , -
. ,
, , ,

cookie-.
:
navigator.connection.addEventListener('change', function() {
// . bandwidth
});
, connection
:
439
var connection = navigator.connection ||

navigator.webkitConnection ||
navigator.mozConnection;
if (connection.bandwidth != undefined) {
if (connection.bandwidth <= 0) {
//
} else if (connection.bandwidth <= 1) {
// 1 //
} else if (connection.bandwidth > 1) {
// 1 //
} else {
//
}
} else {
// API-
}
API (Battery Status API)

navigator.battery. navigator.battery.charging ,
.
navigator.battery.chargingTime , ,
, . navi
gator.battery.dischargingTime ,
. 0 1
navigator.battery.level :
var percentBatteryLeft = navigator.battery.level * 100
chargingchange, chargingtimechange, dischar

gingtimechange levelchange.
API
API- :
Pointer Lock;
MediaStream Recording;
Ambient Light Events;
Proximity Events;
Vibration;
Web Intents.
API- Calendar, Messaging, Sensor System Information . API- ,

Device API Working Group.
440
13.
-,

iOS ,
HTML -, . Apple
Web.app. Wep.app -
, , . -

. , API- HTML5, ,
, , .
. ,
, HTML5, CSS JavaScript
- .
, HTML5, CSS
JavaScript, ,
-. -
, (HTML, CSS, JavaScript),
.
.
PhoneGap Apache Cordova

Apache Cordova, PhoneGap,
- . PhoneGap - .
PhoneGap -
,
, .
, , getUserMedia() Google Chrome , . PhoneGap
JavaScript ,
. - PhoneGap JavaScript ,
,
441
,
.
Adobe PhoneGap Build Cordova , SDK.
Sencha Touch
Sencha Touch ,
2.0 , iOS Android.
Windows, Mac. Sencha.
Appcelerator Titanium
Appcelerator Titanium -
iOS, BlackBerry Android. Titanium , JavaScript.
Titanium JavaScript . Appcelerator Titanium Studio IDE .

(IDE) .
Chrome:
Chrome ( ,
), .
,
.
.
. , ,
.
,

,
.
.
,
, .
, ,
, - .
, .
, .
442
13.
, :
, , .
, , .
, , ,
.
,
. .
, ,
.
,
. , 1%,
. ,
,
. .
.
,
.
.

. ,
.

, , . , .
,
,
iOS , iPod touch
versions, BlackBerry ( 10), Windows8
, Android 2.3 4+ .
, .
. Android , . eBay. ,
. ,
.
.
. ,
, .
Samsung, BlackBerry, Nokia Motorola
443
, , ,

. Apple, ,
, , ,
.
.
. -
.
.

- ,
,
.
, 1.
, ,
, . .
. .
.
14
, , ,
, .
, ,
, Pentium III 1999.
, ,
, .
1.
, : , ,
?
, ,
. ,
API- , , , .

, , .

, ,
, ,
.
24.
, GPS
. ,
, ,
445
, .
, .
, , , , ,
- .
. ,
, , ( ). : ,
.
. .
JavaScript. AJAX-. JavaScript
CSS. , ,
, WebGL, , , WebGL .
, WebGL .

, . AMOLED- , ,
. AMOLED (active-matrix organic lightemitting diode ) , .
, . , . , ,
, .
, ,
. , ,
,
, .
, . , , , ,
JavaScript. .
JPEG-
PNG- JPEG.
,
.
446
14.
. ,
. , , . JPEG
, GIF- PNG-:
Who Killed MyBattery: Analyzing Mobile Browser Energy Consumption1 ( : ) JPEG .
JPEG-
, .
.
. , .
,
, ,
.
JavaScript

,
.
JavaScript.
, JavaScript.
<script>, , , , , JavaScript.
, ,
, .
, , , ,
JavaScript. AJAX- , .
JavaScript. JavaScript,
JavaScript
. JavaScript, XMLHttpRequest, . JavaScript . JavaScript
setTimeout. .
1
Who Killed MyBattery: Analyzing Mobile Browser Energy Consumption. Narendran

Thiagarajan, Gaurav Aggarwal, Angela Nicoara, Dan Boneh? and Jatinder Pal Singh //
http://mobisocial.stanford.edu/papers/bonehwww2012.pdf, . 4150. ACM (2012).
447
, JavaScript -. JavaScript !
JavaScript .
, jQuery ,
,
/ JavaScript. ,
first, jQuery, :
$('ul li:first').addClass('first');
, :
var firstLIs = document.querySelectorAll('ul li:first-of-type');
for (var i= 0; i< firstLIs.length; i++) {
firstLIs[i].classList.add('first');1
}
34 HTTP-. 34 , ,
, jQuery, , jQuery
, ( )
. ,
, 42
.
, GPS ,
.
JavaScript. ,
, , .

CSS-. querySelector() query
SelectorAll(). : addEventListener() . .
-webkit-overflow-scrolling: touch.
, . . , , , HTTP-,
.
1
2
classList , IE10, Android 3, iOS 5.

http://mobisocial.stanford.edu/papers/boneh-www2012.pdf
448
14.

, -, , ,
. , .
Facebook, Twitter Pinterest 15, , , ,
.
.
,
, . ,
, , ,
.
(, Facebook
),
.

. ,
. .
, .

,
. 5

. 12 .
, . 15
, .
23, , , .
,
. , ,
.
,
.

, ,
. , .
, -
449
-. ,
,
.
.

, .
, , . (Viewscanvas)
GPU. ,
, .
, , , .

, .
.
,
. .
, transform: translatez(0); ,
:
* {
transform: translatez(0);
}
, ,
, . .

,
, :
.spinner {
transform: translatez(0);
animation: spin 1s linear infinite;
}
@keyframes spin {
100% {
transform: translatez(0) rotate(360deg);
}
}
, 3D-
. - , . ,
.
450
14.
.
JavaScript .
.
, . , ,
DOM-
. -.
- , , ,
.
, - , CSS-, ,
.
. , . , ,
. ,
16,67.
, .
,
( ). ,
, . DOM,
.
, ,
, - , .
, , ,
CSS- (, ), ,
, - , WebGL, , , <video>.
451
.
.
CSS. DOM-,
.
, , , DOM-,
, ,
, ,
JavaScript.
,
, CSS-,
.
.
, cssText, style:
myNode.style.cssText += "; left: 50p%; top: 0;";
DOM
DOM-. .
, , . ,
.
documentFragment
. ,
display: none, ,
.
: .
, , ,
, .
, DOM-, CSS-
.
DOM-,
. DOM-
, . ,
.
, , ,
, .
, position: absolute;, position: fixed;
transform: translatez(0); .
452
14.

, (Internet service providers ISP)
. , ,
. , , , , ,
, ,
EDGE 3G1.
, , Wi-Fi.
. .

. , , 3/4G,
. -
.
- . , HTTP- DNS-.
Starbucks Wi-Fi, . , ,
, .
HTTP-
, , .

, , , .
, ,
Expires . , JSON-, CacheControl,
.
1
. http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
453
JavaScript
JavaScript . , ,
JavaScript ,
HTTP-, , :
( ) , , () .
: , ,
.
JavaScript gzip.
,
DNS-.

CSS . ,
Sass, SCSS-
, . -
. , . ,
gzip.

. ,
.
HTTP-, .
,
. ,
,
. ,
. , 1024
.

.
gzip, ,
,
: .
454
14.
URI

SVG HTTP- ,
URI
URI ,
.
URI , .
HTML-. ,
HTTP- .
CSS URI- ,
, ,
url(). :
a[href^="mailto"] {
background: url(data:image/gif;base64,R0lGOYLCVDFCrKU-data-uri-codeUhwFUUE1l)
no-repeat right center;
padding-right: 25px;
}
HTML,
:
<img width="16" height="16" alt="email" src="data:image/gif;base64,
R0lGOYLCVDFCrKU-data-uri-code-UhwFUUE1lBavAViFIDlTI0SlBCBMQiB" />
URI .
URI . URI
33% , .
()
gzip. - . ,
URI , HTTP. URI
PNG- ,
HTTP-.
,
1.
URI ?
. , , URI
2, , , , . URI
1
2
. http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to.
CSS- Compass URI
. .
455
1 ,
, . , , ,
, Twitter
,
URI .

, , .
. , .
.
HTTP- .
, , , , .
.
.
, HTTP. HTTP- , ,
, .
.
IcoMoon, -, . ,
, .
SVG-.

, , , weinre Adobe Edge Inspect , BlackBerry .
-, WebPageTest.org (.14.1). ( 34).
, DNS- (
), , ( )
1
, .
456
14.
( ). , ( )
onload.
. 14.1. WebPageTest.org
, .14.2,
. JavaScript
406 DNS- 593 .
, , .
show_ads.js 2243
2. , , ,
.
. 14.2.
457
,
.

.
, .
, . ,
, .
1 , 24- , Android- 3 .
, .
, , .
CSS JavaScript.
, .
,
, , CSS-, JavaScript-, JSON- SVG-.
.
,
.

. GIF- PNG8. GIF-,
CSS-. , PNG8, PNG- , ImageAlpha, PNGCrush.
JPEG- , 40
60% 8099% .
gzip
gzip!
, . . , , gzip.
458
14.
, ,
, .
, , .
. ,
. .
Network ()
,
.
gzip. ,
. , , .
, ,
(.14.3).
. 14.3.
Network () , .

. ,
. Clown Car Technique, Picturefill , Sencha.io Src, .
- . , .

JavaScript, ,
. 13,
, JavaScript. IE8. jQuery
34, HTTP-
. , , ,
459
, . , .
- . ,
, , ,
, HTTP-, ,
.
cookie-
, , , cookie . cookie-
. cookie, ,
, cookie- . ,
, LocalStorage cookie-,
LocalStorage ,
.

, , single point
of failure (SPOF). , . .14.2
, show_ads.js 2243, 2!
, ,
, . , ,
, .
,
- DNS- HTTP .
. , ,
.
,
JavaScript CSS, content delivery
network (CDN).
HTTP-, CDN- DNS-,
460
14.
HTTP-. HTML CSS

JavaScript ,
, ,
. Bing.
( 6, ,
LocalStorage )
m.bing.com
. CSS JavaScript . URI . Bing
, HTTP-.
200. . Bing. Local
Storage cookie- m.bing.com

15.
Bing HTML-.
JavaScript, , Bing CSS, JavaScript
URI CSS, JavaScript
. Bing cookie-. cookie-
, ,
, , , . , HTML , ,
, .

- HTTP-
HTML, CSS, JavaScript .
1. CSS JavaScript .
2. LocalStorage.
3. cookie- .
4. cookie- .
5. cookie-
.
6. LocalStorage .
, , DNS- HTTP-,

iOS.
461
LocalStorage.
,
, ,
.

- . ,
, .

, ,
. , .
.

. 1997
PentiumII 256. 2013
( )
4 . iPhone 3G 128 ,
iPad 256, HTC
Inspire 768 .
512 1 1. ,
2013, ,
, 1999.
512 -, ,
(-) , . ,
( ,
) . ,
, ,
, . . , Twitter, GPS, Facebook, , ,
,
, , ,
Angry Birds.

. 512, ,
200 . ,
-
.
462
14.
.
, Twitter, Facebook Mail.
,
-.
, , ,
,
.
, . , .

CSS- (YSlow)
(PageSpeed), , , , .
gzip ,
.
, . . ,
1024,
. , , , .
. ImageAlpha ImageOptim
PNG- PNG- .
- Sencha.io , , ( )
.
, , ,
-.
, . .
, . ,
,
, ,
.
,
. : ?

463
.
, .
, , ,
. , .
.

. -
, . , ,
. ,
. ,
, . , , ,
, .
. , , , HTTP-
.
CSS
CSS HTTP- . HTTP- , , .
, CSS, HTTP, ,
, .
CSS1
. PNG JPEG CSS.
CSS .
, CSS, , , CSS .
CSS-
. ,

1
CSS. !
464
14.
. , - , ,

.
CSS-, , , ,
, .
PNG, JPEG GIF, ,
CSS, ,
( HTTP-). , ,
, ,
, .

,
.
CSS- ,
. CSS ,
140 ,
JPEG, HTTP-.
, , , .
, 140
CSS, HTTP-, .
, ,
.
, , , CSS.
,
, . , . ,

, , .
.
CSS-
, ,
DOM-.
, . .
. . . 27 ,
. ,
, CSS, , 16,67,
. ,
.
465

, , .
translate3d ! ,
,
.
. ,
, , , transform: translateZ(0);
.
:

. ,
, ,
, ,
, . (viewport) , . ?
, , , ,
.
DOM
DOM-. . .
,
.
. DOM- (
) , . , CubeeDoo 24.
24
.
CubeeDoo .

.
.
. , ,
, . , .
466
14.
,
, ,
. ,
, ,
.
,
, . () .
Facebook 76 .
, , - .
, .

.
.

.
Timeline ( )
-.
, JavaScript,
. , , , JavaScript ..
, Timeline Chrome Developer
Tools (.14.4), . , Memory
, ,
, .
. , ,
, ,
.
Chrome Developer Tools , ,
, ,
, .
,
. 1
15 , All () , .
.
467
Memory ()
,
DOMContentLoaded loaded .
DOMContentLoaded , CSS
JavaScript, .
, , DOMContentLoaded, ,
, DOMContentLoaded onLoad.
. 14.4. Google Chrome Timeline
, onLoad
. .
, , - onLoad, . , . ,
. ,
.
- ,
.
, , JavaScript API-,
. .
468
14.
HAR JSON,
.

.
, DOM- .
,
, , .
, , , .
, ,
. , ,
.
,
DOM-, ,
.
DOM
. DOM . DOM- DOM, DOM ,
.
, , CSS DOM- . ,
.
.
.
.

- , .
200 , , - , .

, .
, ,
469
, - . ,
, ,
, . AJAX-
200, -
, .
,
, ,
.
,
, , ,
, . touchend
- 300 500.
, , ,
touchend.
:
, ,
- .

1. Chrome Firefox, , .
:
,
.
- , JavaScript
CSS-, JavaScript
CSS.
- CSS-
, , . ,
animation-delay .
, , ,
,
1

, , , .
.
470
14.
, , .
, 60/. 16,67. , 16,67.
, , , , . ,
, , , . .
, , ,
, , , .
,
. .
.
,
, , . , - : - , ( ), - ,
( ).
, , ,
, YSlow
Yahoo! PageSpeed Google.
. ,
- -
, ,
- , iPad, Android Wii. , .
, . .
, 100
. .
: Wi-Fi ,
. . . .

CSS-
CSS- 3

*

E
E

myClass
, myClass

#myId
, ID myId
, >, + ~,
EF
F,
( ) E
E>F
F,
E
E+F
F, E,
EF
E~F
F,
E

,

0-0-0
* {}
0-0-1
em, strong
0-1-0
.myClass
1-0-0
#myId
0-0-0
ol li
tr td
ol > li
thead > tr
h1 + ptr.current + tr
li:first-child ~ li
0-1-0
472
. CSS-
( )
E[attr]
E,
attr,
E[attr="val"]
E,
attr
val
input[type="checkbox"]
E[attr~="val"]
E,
attr
,
val
img[alt~="figure"]
E[attr^="val"]
E,
attr
val
a[href^="mailto:"]
E[attr$="val"]
E,
attr
val
a[href$=".pdf"]
E[attr*="val"]
E,
attr
val
a[href*="://"]
E[attr|="val"]
input[type]
a[href*="twitter.com"]
E, html[lang|="en"]
attr val val,
0-1-0
,
E:first-child
E,

h1:first-child
E:last-child
E,

p:last-child
E:only-child
E
li:only-child
, E
E:first-of-type
E,
E

li:first-of-type
E:last-of-type
E, E

li:last-of-type
E:only-of-type
E, E

h1:only-of-type
473
CSS- 3
E:nth-child(n)
() E,
n-
,
n , ,
an+b, a
, b , even odd
tr:nth-child(odd)
E:nth-last-child(n)
() E,
n-
,

li:nth-last-child(5)
E:nth-of-type(n)
()E,
n-
(
)
th:nth-of-type(2)
E:nth-last-of-type(n)
() E,
n- ,
E
E:root
E, html:root
,
HTML-
HTML
E:empty
E, E ,
,
. ,
p:empty
0-1-0
,
E:link
E:visited
E:active
E:hover
E:focus
E:enabled
E:disabled
link
E,
(:link)
(:visited)
a:link
a:visited
a:active
(img:hover
) E , , input:focus

E,
(enabled) (disabled)
input:enabled
select:disabled

474
. CSS-
( )
E:checked
E, ,
E:default
E:valid
E:invalid
E:in-range
E:out-of-range
E:required
E:optional
E:read-only
E:read-write

E:target
E:lang(fr)
E:not(exclude)
E::first-line
E::first-letter
E,

, ,

E,
(valid) (invalid), ,
pattern type input
E,
,

,

(:in-range), (:outof-range)

E, (:required),
(:optional)
E,
(:read-only), (:read-write), ,

input[type="radio"]
:checked
option:default
input:valid
input:invalid
input:in-range
input:out-of-range
input:required
input:optional
input:read-only
input:read-write
E, - div:target
URI-
E fr (
p:lang(fr)
)
?-?-? ( )
E,
div:not([class])

.foo:not(div)
exclude. :not
,

0-0-1
p::first-line
E
p::first-letter
E
475
CSS
div::before
E::before
E::after
div::after
E::selection

E,

*::selection
*::-moz-selection
CSS
*
::after
:empty
::first-letter
:not()
.class
::first-line
:target
#id
E[attribute^=value]
:enabled
EF
E[attribute$=value]
:disabled
E>F
E[attribute*=value]
:checked
E+F
E~F
:indeterminate4
E[attribute]
:root
:default
E[attribute=value]
:last-child
:valid
E[attribute~=value]
:only-child
:invalid
E[attribute|=value]
:nth-child()
:in-range
:first-child
:nth-last-child()
:out-of-range
:link1
:first-of-type
:required
:visited
:last-of-type
:optional
:lang()
:only-of-type
:read-only
::before2
:nth-of-type()
:read-write
::selection
:nth-last-of-type()
:link :visited .
IE
.
CSS Selectors level 3, .
Firefox -moz-.
3 CSS Basic User Interface Module Level 3 (CSS3 UI)
specification CSS Selectors Level 4.
476
. CSS-
CSS-
477
CSS- 4
CSS- 4

*
,
E
( ), E
.someClass
, , , someClass
#myID
, , myID
EF
, F, E
E>F
, F,
E
E+F
,
F, E
E~F
, F, E
E /foo/ F
, F,
foo E( F,
foo E, label)
E! > F

, E,
F

E[foo]
E, foo
E[foo="bar"]
E, foo , bar,

E[foo="bar" i]
E, foo , bar,
E[foo~="bar"]
E, foo ,
, , bar
E[foo^="bar"]
E, foo , bar
E[foo$="bar"]
E, foo , bar
E[foo*="bar"]
E, foo , bar
E[foo|="en"]
E, foo , , , en

E:root
E,
2
1
1
1
1
2
2
3
4
2
2
3
3
3
2
478
. CSS-
( )
E:empty
E,
( )
E:blank
E, ,
E:first-child
E,

E:last-child
E,
E:only-child
E,
E:first-of-type
E,

E:last-of-type
E,
E:only-of-type
E,

E:nth-child(n)
E, n-

E:nth-last-child(n) E, n-
,

E:nth-of-type(n)
E, n-

E:nth-last-of E, n-
type(n)
,

E:nth-match(n- E, n-
)
,
E:nth-last E, n-
match(n ,
)

Grid-
F || E
E, grid , , F
E:nth-column(n)
E, , n- grid-
E:nth-last E, ,
column(n)
n- grid- ,

E:any-link
E,
E:link
E, ,
E:visited
E ,
3
4
2
3
3
3
3
3
3
3
3
3
4
4
4
4
4
1
479
CSS- 4
E:local-link
E, ,

E:local-link(0)
E, , ,
E:target
target E,
, URL-

E:active
E,
E:hover
E,
,
E:focus
E,
E:enabled
E,
E:disabled
E,
E:read-only
E,
E:read-write
E,
, E,
contenteditable, true
E:placeholder E, shown

E:default
E, ,
E:checked
E,
,
E:indeterminate
E, ( ,
)
E:valid
E,
- ( ) - ,

E:invalid
E,
, ,
E:in-range
E, ,
E:out-of-range
E, ,

E:required
E ( )
1
2
2
3
3
3/4
3/4
3/4
3/4
3
3/4
3/4
3/4
3/4
3/4
480
. CSS-
( )
E:optional
E ( )
(drag-and-drop)
E:active-drop
E,
E:valid-drop
E,

E:invalid-drop
E,
, -

,
E:not(s1, s2)
E,
s1, s2. CSS
Level3
E:matches(s1, s2) E,
s1 / s2
E:scope
scope E,

E:dir(ltr)
E
E:dir(rtl)
E:lang(zh, *-hant) E, , (
) . CSS- 2 (CSS Selectors
Level 2) :lang()
(Time-dimensional pseudoclasses)
E:current
E,
E:current(s)
E,
:current, s
E:past
E,
E:future
E,
3/4
3/4
4
4
4
2/4
4
4
4
4

Html5. Разработка Приложений Для Мобильных Устройств

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Html5. Разработка Приложений Для Мобильных Устройств

Загружено:

Авторское право:

Доступные форматы

.

12+ ( 29 2010 . 436-.)

Authorized Russian translation of the English edition Mobile HTML5

6. API HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

10. CSS3: , . . . . . . . . . . . . . . . . . . 342

11. CSS - . . . . . . . . . . . 378

IE10, Blink, Opera Mobile ( mini), Firefox. ,

( SDK App Store),

$99, , Apple 30%- .

1. API HTML5, CSS3 JavaScript

1. API HTML5, CSS3 JavaScript

1. API HTML5, CSS3 JavaScript

Blink WebCore WebKit, 147503. Chrome, 28, Ope

1. API HTML5, CSS3 JavaScript

Firefox , - Firebug Firefox.

1. API HTML5, CSS3 JavaScript

. 1.2. Overrides ( ) (Settings)

Firefox Firebug Debug ( Crossfire).

. 1.3. Android 4.2.2, OS X

1. API HTML5, CSS3 JavaScript

PhoneGap, debug.phonegap.com. , weinre

1. API HTML5, CSS3 JavaScript

Adobe Edge Inspect Ghostlab

1. API HTML5, CSS3 JavaScript

. 1.7. Adobe Edge Inspect Nexus 7 Google Chrome

1. API HTML5, CSS3 JavaScript

Windows, Mac OS XLinux. SDK.

Windows -, Eclipse Visual Studio

Windows. Windows Phone , Windows Phone.

1. API HTML5, CSS3 JavaScript

1. API HTML5, CSS3 JavaScript

HTML51. HTML XHTML , . (doctype),

HTML5 , . id , class , title , style , lang dir -

data-position data-value, data-value

for (i= 0; i< qbdoo.cards; i++) {

itemid, itemprop, itemref, itemscope itemtype

. 2.2. <html>, <head> <body>,

, XHTML DTD 10.

HTML 4 XHTML Strict, HTML5. , HTML5, HTML XHTML,

HTML 4.01 Transitional

XHTML 1.0 Transitional

HTML5 <html> manifest.

. 2.3. <title>, Safari (iOS)

, <body>. <body> <html>.

<link href="/css/prettification.css" media="all" rel="stylesheet"/>

default, black black-translucent.

@media CSS3, media. , :

apple-touch-icon apple-touch-startup-image iOS Android. Windows Phone . :

, , left right, , , main , header ,

<h1> <h6>). <header>

<header> <div id="header"> <div class="heading">, .

. 3.2. Opera Mobile ,

<rp>, <rt> <ruby>

. 3.3. <ruby> <rt>,

<rt> / <rp>: <rp> ,

<ahref="index.html" rel="next" target="_blank">

, - Google Maps, YouTube, iTunes

iOS YouTube iTunes

: , required, :required :invalid. , , . , , CSS:

step for. . for .

placeholder , placeholder , . placeholder ,

, readonly disabled? , readonly

Google API requestAutocomplete(), -. , .

text <input>. type