Вы находитесь на странице: 1из 480

.

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

1. API HTML5, CSS3 JavaScript

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

1. API HTML5, CSS3 JavaScript

,
.
. ,
. .
, , ,
(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

1. API HTML5, CSS3 JavaScript

, , , -, . .
. , ,
.


, , , 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. API HTML5, CSS3 JavaScript

. 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

1. API HTML5, CSS3 JavaScript

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

1. API HTML5, CSS3 JavaScript

.
, 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. API HTML5, CSS3 JavaScript

. 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

1. API HTML5, CSS3 JavaScript

.
.
,
. ,
, . , 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

1. API HTML5, CSS3 JavaScript

,
, . 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

1. API HTML5, CSS3 JavaScript

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 data-value="0" data-position="2">
<div class="face"></div>
<div class="back"></div>
</div>
<div data-value="0" data-position="3">
<div class="face"></div>
<div class="back"></div>
</div>
<div data-value="0" data-position="4">
<div class="face"></div>
<div class="back"></div>
</div>
...
<div data-value="0" data-position="24">
<div class="face"></div>
<div class="back"></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> <!-- '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>
<!-- HTML5 ,
. , ,
! -->

() ,
, ,
. .
(. ),
,
:
<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>
<meta charset="UTF-8"/>
<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"/>
<link rel="apple-touch-icon" sizes="114x114"
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 charset="utf-8"/>

, :
<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. ,
.
, . , .
- , .
, . ,
:
<meta name="apple-mobile-web-app-capable" content="yes"/>

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><!-- article -->
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=&quot;http://developers.whatwg.org/the-iframe-element.html
#attr-iframe-srcdoc&quot;>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 &amp; 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 &hellip;"
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 {
border: 1px solid #999999;
}
input:read-only {
background-color: #DDDDDD;
border: 1px solid #666666;
}
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;"/>
<polygon points="250,110210,150250,190290,150" style="fill:
#FFFF33;"/>
<polygon points="250,210210,250250,290290,250" style="fill:
#00FF00;"/>
<polygon points="250,310210,350250,390290,350" style="fill:
#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&amp;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"/>
<!-- flash- , -->
</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">
<meta charset="utf-8"/>
<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',
JSON.stringify(currentState));
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',
JSON.stringify(currentState));
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;
qbdoo.db.transaction(function(tx) {
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 {
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){
//
}
}
}

. , LocalStorage Web SQL. SQL select


:
loadHighScoresLocal: function() {
var scores = LocalStorage.getItem("highScores");
if (scores) {
qbdoo.highScores = JSON.parse(scores);
}
if (qbdoo.storageType === 'local') {

214

6. API HTML5

qbdoo.sortHighScores();
}
},
loadHighScoresSQL: function(){
var i, item;
qbdoo.db.transaction(function(tx) {
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() {
if (qbdoo.storageType === 'local') {
qbdoo.reset("highScores");
} else {
qbdoo.db.transaction(function(tx) {
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 , :
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(handle_success,
handle_errors);
}


coords, latitude longitude,
altitude, accuracy, altitudeAccuracy, heading speed.
.
if (navigator.geolocation) {
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
if (navigator.geolocation) {
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 , :
if (window.Worker) {
var webWorker = new Worker('subcontractor.js'); //
}

- postMessage().
-, onmessage , -.
terminate() close().
terminate() , :
if (window.Worker) {
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">
<li><img src="http://standardista.com/images/estelle.jpg"
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><img src="http://standardista.com/images/estelle.jpg"
alt="photo of Estelle Weyl" class="photo"/></li>
<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><img src="http://standardista.com/images/estelle.jpg"
alt="photo of Estelle Weyl" class="photo"/></li>
<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:
@media screen and (min-width: 440px) {
#content { background-image: url(/images/small/bg.jpg);
}
@media screen and (min-width: 1000px) {
#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%;
}
#board.level3 > div {
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;
background-repeat: no-repeat;
}
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

. ,
, , , , :
@media screen and (min-width: 480px) {
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="6"] .back {background-color:#909;}
div[data-value="7"] .back {background-color:#F0F;}
div[data-value="8"] .back {background-color:#633;}
div[data-value="9"] .back {background-color:#000;}
div[data-value="10"] .back {background-color:#fff;}
div[data-value="11"] .back {background-color:#666;}
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="2"] .back:after{ content:'2';}
div[data-value="3"] .back:after{ content:'3';}
div[data-value="4"] .back:after{ content:'4';}
div[data-value="5"] .back:after{ content:'5';}
div[data-value="6"] .back:after{ content:'6';}
div[data-value="7"] .back:after{ content:'7';}
div[data-value="8"] .back:after{ content:'8';}
div[data-value="9"] .back:after{ content:'9';}
div[data-value="10"] .back:after{ content:'10';}
div[data-value="11"] .back:after{ content:'11';}
div[data-value="12"] .back:after{ content:'12';}
div[data-value="1"] .back:after{ content:'';}
div[data-value="2"] .back:after{ content:'';}
div[data-value="3"] .back:after{ content:'';}
div[data-value="4"] .back:after{ content:'';}
div[data-value="5"] .back:after{ content:'';}
div[data-value="6"] .back:after{ content:'';}
div[data-value="7"] .back:after{ content:'';}
div[data-value="8"] .back:after{ content:'';}
div[data-value="9"] .back:after{ content:'';
div[data-value="10"] .back:after{ content:'';}
div[data-value="11"] .back:after{ content:''}
div[data-value="12"] .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;
box-sizing: border-box;
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(900deg);
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-bottom: 3px;
padding-left: 6px;
}
.threeValues {
padding-top: 3px;
padding-right: 6px;
padding-bottom: 12px;
padding-left: 6px;
}
.fourValues {
padding-top: 3px;
padding-right: 6px;
padding-bottom: 9px;
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 */
box-sizing: border-box;
}
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>
<meta charset="UTF-8"/>
<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;
background-color: #FFFFFF;
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

background-image: linear-gradient(
red 0%,
orange 20%,
yellow 40%,
green 60%,
blue 80%,
purple 100%);

,
, , ,
,
, - .
, ,
( ),
,
, :
1
2
3

background-image: linear-gradient(
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;
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));
background-image: linear-gradient(
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));
background-repeat: no-repeat;
background-size: 100% 50%;
}
.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:
-webkit-gradient(linear, 00, 100% 0,

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:
-webkit-gradient(linear, 00, 100% 0,
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%),
linear-gradient(135deg,
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));
background-size: 100% 50%;
background-repeat: no-repeat;
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 {


box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
}
.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-repeat: no-repeat;
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>'),
-webkit-linear-gradient(-15deg,
rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
background-image:
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>'),
linear-gradient(75deg,
rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
box-shadow:
inset 1px 1px 0 currentcolor,
inset 1px 1px 0 currentcolor,
1px 1px 1px rgba(0,0,0,0.1);
color: rgb(119, 160, 215);
}
#board > div.flipped {
box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
}
.control {
border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
background-image:
-webkit-linear-gradient(-15deg,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.025));
background-image:
linear-gradient(75deg,
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);
border: 5px solid #000000;
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;
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{
background-color: #FFFFFF;
-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{
background-color: #FFFFFF;
border: 5px solid #CCCCCC;
-webkit-transition: all 500ms linear 250ms;
transition: all 500ms linear 250ms;
}

all
, .
, , , transition-property
:
nav a{
background-color: #FFFFFF;
border: 5px solid #CCCCCC;

352

10. CSS3: ,

color: red;
-webkit-transition: border, color 500ms linear 250ms;
transition: border, color 500ms linear 250ms;
}

, ,
, , ,
,
, , , transition-property transition-duration:
nav a{
background-color: #FFFFFF;
border: 5px solid #CCCCCC;
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-timing-function: linear;
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);
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);
translate(0) rotate(0deg);
translate(0) rotate(0deg);

361

CSS3-

}
p:hover {
-webkit-transform:
-ms-transform:
transform:
padding:
border:
}

translate(100px, 100px) rotate(90deg);


translate(100px, 100px) rotate(90deg);
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: rotatey(0deg);
transform: rotatey(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
box-shadow: 1px 1px 1px rgba(0,0,0,0.25);

CSS3-

cursor: pointer; /* for desktop */


}
#board.level2 > div {
height: 19%;
}
#board.level3 > div {
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,
inset 1px 1px 0 currentcolor,
1px 1px 1px rgba(0,0,0,0.1);
color: rgb(119, 160, 215);
background-image:
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>'),
-webkit-linear-gradient(-15deg,
rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.025));
background-image:
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"

365

366

10. CSS3: ,

y="30" x="20" stroke-width="0" stroke="rgb(119, 160, 215)"


fill="rgb(119, 160, 215)"></text></g></svg>'),
linear-gradient(75deg,
rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.025));
-webkit-transform: rotatey(0deg);
-webkit-transform: rotatey(0deg) translatez(0);
transform: rotatey(0deg)
transform: rotatey(0deg) translatez(0);
}
.face {
-webkit-transform: rotatey(180deg);
-ms-transform: rotatey(180deg);
transform: rotatey(180deg);
}
#board > div.flipped {
-webkit-transform: rotatey(180deg);
-webkit-transform: rotatey(180deg) translatez(0);
transform: rotatey(180deg);
transform: rotatey(180deg) translatez(0);
box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
}

CubeeDoo , 250.
: .
CSS,
.
. ,
backgroundcolor background-image SVG- <div>- , . , SVG
::after, .
, . transform: rotatey(180deg)
translatez(0);, . , HTML
, ( back)
( face):
<div data-value="0" data-position="2">
<div class="face"></div>
<div class="back"></div>
</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;
animation-timing-function: ease-in;
}
80% {
bottom: 25px;

373

CSS3-

animation-timing-function: ease-in;
}
95% {
bottom: 10px;
animation-timing-function: ease-in;
}
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);
background-repeat: no-repeat;
-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 {
background-position: 00;
}
to {
background-position: 256px 0;
}
}

, 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.
div:nth-of-type(2) {
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, (. -
):
div:nth-of-type(1) {
flex: 4;
}
div:nth-of-type(2) {
flex: 2;
}
div:nth-of-type(3) {
flex: 1;
}

flexbox ,
.
, ,
, . , , , , .
.
:
<article>
<div>

394

11. CSS -

</div>
<aside>
</aside>
<footer>
</footer>
</article>
@media screen and (min-width: 600px) {
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--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) {
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--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) {
.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 -

background-position: 00;
}
100% {
background-position: 506px 0;
}
}
@keyframes movearound {
0% {
transform: translatex(300px);
}
100% {
transform: translatex(300px);
}
}

. 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 , :
<meta name="apple-mobile-web-app-capable" content="yes"/>

, , ,
.
, , , ,
.
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-capable" content="yes"/>
<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" />


<link rel="apple-touch-icon" sizes="72x72"
href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114"
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