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

32.988.

02-018
004.738.5
86

86

HTML5 CSS3. . .:
, 2014. 304 .: .

ISBN 978-5-496-00185-4
-.
, .
- ,
. -
,
. -
, , .
-,
. , - HTML5 CSS3.
,
- .
12+ ( 29 2010 . 436-.)

32.988.02-018
004.738.5

.
.
, , , . , ,

, .

ISBN 978-1849693189 .

Copyright 2012 Packt Publishing

ISBN 978-5-496-00185-4

, 2014

,
, 2014

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
1. HTML5, CSS3 - . . . . . 27
2. : . . . . . 53
3. . . . . . . . . . . . . . . . . . . . 79
4. HTML5 -. . . . . . . . . . . . . . . . . . 115
5. CSS3: , . . . . . . . 151
6. CSS3 . . . . . . . . . . 187
7. CSS3-, . . . . . . . . . . . . 219
8. HTML5 CSS3. . . . . . . . . . . . . . 245
9. - . . . . . . 273

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
. . . . . . . . . . . . . . . . . . . 21
, . . . . . . . . 22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

1. HTML5, CSS3
- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
1.1. (
InternetExplorer ). . . . . . . . . . . . . . . . . . . . . . . . . . 28
1.2. , -
? . . . . . . . . . . . . . . . . . . . . . . . . 29
1.3. - . . . . . . . . . . . . . . . . . . 30
1.4.
-?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
1.5. - . . . . . . . . . . . . . . . . . . . . . 31
-
. . . . . . . . . . . . . . . . . . . . . . 32
- . . . . . . . . . . . . . . . . . . . . . . 39
1.6. HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
HTML5. . . . . . . . . . . . . 40
HTML5. . . . . 41
1.7. CSS3 -
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
: CSS3
- !. . . . . . . . . . . . . . . . . . . . . . . . 43
CSS3 ,
? . . . . . . . . . . . . . . . . . . . . . . . . . . 43
1.8. , , !. . . . . . . . . . . . . . . . . . . . . . . 46
1.9. HTML5 CSS3
?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
1.10. -
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
1.11. ,
. . . . . . . . . . . . . . . . . . . . . . . . . . . 50
1.12. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

2. :
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
2.1. . . . . . . . . . . . 53
2.2. -
?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
. . . . . . . . . . . . . . . . . . . . . . . . . . . 54
?. . . . . . . . . . . . . . . 57
. . . . . 58

- . . . . . . . . . . . . . . . . . . . . . 58
2.3. - . . . . . . . . . . . . . . . . . . . . 59
,
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
-:
. . . . . . . . . . . . . . . . . . . . 63

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
2.4. ,
. . . . . . . . . 67
2.5.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
2.6. -
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
2.7. . . . . . . . . . . . . . . . . 77
2.8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

4. . . . . . . . . . . . . . . . 79
3.1. . . . . . . 80
3.2. -
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

3.3.
. . . . . . . . . . . . . 81
. . . . . . . . . . . . . . . . . . . . . . . . . . 81
. . . . . . 83
. . . . . . . . . . . . . . . . . . . . 90
3.4. em
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
3.5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
,
. . . . . . . . . . . . . . . . . . . 95
. . . . . . 97
. . . . . . . . . . 99
max-width . . . . . . . . . 100
3.6.
. . . . . . . . . . . . . . . . . . . . . . . . 101
Adaptive Images. . . . . . . . . . . . . . . . . . . . . . . . . 102
. . . . . . 104
3.7.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
3.8. CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
3.9. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

4. HTML5 - . . . . . . . . . . . . . . 115
4.1. HTML5 ?. . . . . . 116
HTML5 . . . . . 116
, Modernizr. . . . . . . . . . . . . . . 116
4.2. HTML5-. . . . . . . . . . . . . . . . . . . . . . . . . . 117
HTML5 . . . . . . . . . . . . 118

10

HTML5-. . . . . . . . . 119
<a> . . . . . . . . . . . . . . . . . . . . . 120
HTML-. . . . . . . . . . . . . . . . . . . . . . . . . 120
4.3. HTML5- . . . . . . . . . . . . . . . . . 121
<section>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
<nav> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
<article>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
<aside> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
<hgroup>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
<header>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
<footer>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
<address> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
4.4.
HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
4.5. HTML5- . . . . . . . . . . . . . . . . . . . . . . . 132
<b>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
<em>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
<i>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
4.6.
WAI-ARIA. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
4.7. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
4.8. HTML5 . . . . . . . 139
- . . . . . . . 141
. . . . . . . . . 141
<audio> <video> . . . . . . 142

11

4.9. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
4.10. -. . . . . . . . . . . . . . . . . . . . . . . . 145
-. . . . . . . . . . . . . . 146
- . . 146
. . . . . . . . . . . . . . . . . . . . . . . . . 147
. . . . . . . . . . . . 148
. . . . . . . . . . . . 148
. . . . . . . . . . . . . . . . 149

-. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
4.11. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

5. CSS3: , . . . 151
5.1. CSS3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
CSS3 Internet Explorer 68. . . . . . 152
CSS3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
5.2. CSS- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
5.3. . . . . . . . . . . . . . . 153
5.4. CSS3-. . . . . . . . . . . . . . 156
CSS3
-. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
5.5. CSS3- . . . . . . . . . . . . . . 160
CSS3. . . . . . . . . . . . . . . . . . . . . . . . . 160
CSS3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
. . . . . . . . . . 161

12

CSS3 . . . . . . . . . . . . . . . . . . . . 162
:last-child. . . . . . . . . . . . . . . . . . . . . . . . . . . 163
:nth-child. . . . . . . . . . . . . . . . . . . . . . . . . . . 166
:nth- . . . . . . . . . . . . . . . . . . . 167
(:not) . . . . . . . . . . 170
. . . . . . . . . . . . . . . . . . . . . . 171
5.6. -. . . . . . . . . . . . . . . . . . . . 173
CSS- @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
- @font-face. . . . . . . . . 174
5.7. CSS3-
@font-face . . . . . . . . . . . . . . . . . . . . . . . 178
5.8. CSS3 -. . . . . . 180
RGB-. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
HSL- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Internet Explorer
6, 7 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
5.9. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

6. CSS3 . . . . . . 187
6.1. , , CSS3. . . 188
, HSL- RGB-
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
, em rem. . . . . . . . . . . . . . . . . . . . . . 189
. . . . . . . . . . . 190
. . . . . . . . . . . . . . . . 192
, . . . . . . . . . . 193

13

6.2. , . . . . . 193
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
6.3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
. . . . . . . . . . . . . . . . . . . . . . 197
. . . . . . . . . . . . . . . . . . . . 201
. . . . . . . . . . . . . . . . . . . . . . . . . 204
6.4. . . . . . . . . . . . . . . . . . . . . . . . . . 206
6.5. - CSS3 . . . . . . . . . . . . . . . . . . . 208
6.6. CSS3- . . . . . . . . . . . . . . . . . . . . . . . 210
6.7. . . . . . . . . . . . . . . . . . 214
. . . . . . . . . . . . . . . . . . . . . 215
. . . . . . . . . . . . . 216
. . . . . . . . . . . . . . 216
6.8. CSS3-. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
6.9. ,
- . . . . . . . . . . . . . . . . . . . . . . . . . 216
6.10. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

7. CSS3-, . . . . . . . . . 219
7.1. CSS3- . . 220
, . . . . . . 221
transition . . . . . . . . . . . . . . . 222

. . . . . . . . . . . . . . 223
. . . . . . . . . . . . . . . . . . . 223

. . . . . . . . . . . . 224

14

7.2. 2D- CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225


?. . . . . . . . . . . . . . . . . . . . . . 226
scale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
translate. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
rotate. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
skew . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
matrix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
transform-origin . . . . . . . . . . . . . . . . . . . . . . . . . . 230
7.3. 3D- CSS3 . . . . . . . . . 231
3D- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
3D-
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
7.4. CSS3. . . . . . . . . . . . . . . . . . . . . . . . . . . 237
7.5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

8. HTML5 CSS3. . . . . . . . . . 245


8.1. HTML5-. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
HTML5-. . . . . . . . . . . . . . . 248
placeholder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
required. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
autofocus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
autocomplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
list ( <datalist>). . . . . . . . 251
HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . 252
email. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
url . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254

15
tel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
pattern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

date time. . . . . . . . . . . . . . . . . . . . . . . 259


date. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
month . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
week . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
time. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
datetime datetime-local. . . . . . . . . . . . . . . . . . . . . . . 261
range. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
8.2. ,
. . . . . . . . . . . . . . . . . 264
8.3. HTML5- CSS3. . . . . . . . . . . . . . . 266
8.4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

9. -
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
9.1.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
9.2. ,
Internet Explorer?. . . . . . . . . . . . . . . . . . 279
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
9.3. Modernizr
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

Modernizr. . . . . . . . . . . . . . . . . . . . . . . . . . . 283

16

Modernizr HTML5-
Internet Explorer . . . . . . . 285
min-width
max-width Internet Explorer 6, 7 8 . . . . . . . . 286
Modernizr. . . . . . . . . . . . . . . 288
9.4.
(). . . . . . . . . . . . . . . . . . . . . . 290
9.5. (). . . . . 294
9.6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297


(Ben Frain) -
,
.
, Mac, ,
.
, .

. ( ) ( ),
.
, ( ) .
www.benfrain.com,
Twitter twitter.com/benfrain.


-.
-, .
- (Ethan Marcotte). , , . , ,
, .
, . ,
( ), , .
.


(Ed Henderson) -, .

, .
, (Web
Man Walking). , ,
, -, - .
. ,
, , , , .
,
.
, , Jack Draws Anything (http://
jackdrawsanything.com/), Social Campaign of the
Year 2011 ( 2011) .Net.
,
-, , ,
Hendo.
http://edhenderson.com (
, )
Twitter: @edhenderson.
(Mauvis Ledford) -, .
,
- HTML5.
-, - -, . http://
www.brainswap.me. , Disney Mobile, Skype,
Netfix -.
(Kamrujaman Shohel) .
,

20

. 2004,
PHP- SSR IT,
Multimode Group ( Microsoft). , . 2005
Right Brain
Solution Limited. HTML, HTML5, CSS3, jQuery,
jQuery UI, PHP, Photoshop CS5 Illustrator CS5.
( ) Trenza Softwares,
Mesovison Consultancy Limited. , ,
-. ,
HTML5, CSS3, jQuery, jQuery Mobile jQuery UI.
,
.
( ,
). , ,
.
PHP, C, C#, VB.NET, ASP.NET, CakePHP, Zend Framework, Drupal,
Joomla! WordPress. , , , , .


, ,
, ! -
, ,
.
,
,
, .
,
. , , HTML5 CSS3
,
- . , .
HTML CSS, .


1 HTML5, CSS3 - , -, ,

HTML5 CSS3.
2 :
, ,
CSS- .
3 , CSS- -.
4 HTML5 -
HTML5 ( , , WAI-ARIA ).
5 CSS3: , CSS3-,
. CSS3- @font-face,

22

-, CSS3, RGB(A)
HSL(A).
6 CSS3 ,
, ,
CSS3. , .
7 CSS3-, ,
, ,
CSS3.
8 HTML5 CSS3 ,
- , ,
.
9 - ,
Internet Explorer,
,
Modernizr.

,

HTML CSS. ,
JavaScript. .



? , , , , HTML5 CSS3? ,
, ,
- , !
- -,
, HTML4.1
CSS2.1. ,
HTML5 CSS3, .

,
.
, .
: HTML5
,

23

. , <sCRipt SrC=js/jquery-1.6.2.js></script>
, .
:
<div class="header">
<div class="navigation">
<ul class="nav-list">
<li><a href="#" title="Home"></a></li>
<li><a href="#" title="About"> </a></li>
</ul>
</div> <!-- navigation -->
</div> <!-- header -->

,
:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* <div> */
}
#header {
margin-right: 10px;
margin-left: 10px;
width: 97.9166667%; /* 940 960 */
}

. ,
, , :
, These should have won (
) Full info ( )
, , .


. ,
: , , , .
, ,
.

24

feedback@packtpub.com,
.
,
, ,
, www.packtpub.com/
authors.

, , .
, ,
. , , ,
.
- , , ,
http://www.packtpub.com/support,
, Errata submission form (
) . ,

Errata (),
.


,
.
Packt
. , ,
,
.
copyright@packtpub.com,
, .

.

copyright@packtpub.com,
, ,
.


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

HTML5,
CSS3
-

, ,
960 ,
. ,
-
.
. iPhone
Apple , -
-, .
, , .
,
(, ) . , ,
, . - 27 30.
-
.
,
. - HTML5 CSS3

. ,
.
:
;
;

28

1. HTML5, CSS3 -

- ;
-;
;
-

;
HTML5 ;
CSS ,

1.1.

(
InternetExplorer )
, , , gs.statcounter.com, 12
2010 2011 2,86 7,02%. , Internet Explorer6 8,79 3,42%.
Internet Explorer7 5,45%
2011. : ,

Internet

Explorer
6 7, : , -
? , ,
Internet Explorer6 7.
, , ,
.
, ( , )
.
, . , ,
, -
?
.1.1 iPhone Android, ,
.
,
, ,

1.2. , - ?

29

, ,
. , ,
- !

.1.1. -

1.2. ,
-
?
, -
, , .
,

30

1. HTML5, CSS3 -

, , ,
. .
,
, ,
, GPS.
, , -.
, ,


. , ,
, ,
. , ,
,
. , , ,
, , ,
!
, -.
, ,
- ,
.
, ,
, , 1900 ? , , , , , .

1.3.
-
- . A List Apart (http://www.alistapart.com/articles/responsiveweb-design/) ( ,
)
-. , ,
, , , , ,
.
!
,
, -

1.5. -

31

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

, .

1.4.

-?
-
, . HTML5
, HTML4,
.
CSS
3 -,
CSS
3- .
JavaScript
,
CSS
3-, , , .
- HTML5
CCS3, , .

?

1.5.
-
- , .
,
.

32

1. HTML5, CSS3 -

,

(, 1024768).
, .
? !
, , (
em ). , -
, .

-


Internet

Explorer
, Microsoft Internet Explorer Developer Toolbar. URL-: http://www.microsoft.com/download/en/details.aspx?id=18359.
Safari, Resize (http://resizeSafari.com/),
ResizeMe (http://web.me.com/aaronholla/Safari_Extensions/ResizeMe.html)
.
Firefox,
Firesizer (https://addons.mozilla.org/en-US/firefox/addon/firesizer/),
Chrome Windows
Resizer (https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh).
? :
HTML
-
. JavaScript- jQuery (http://jquery.com),
. , ,
, , . ,
,
URL-: http://benfrain.com/easily-display-the-viewport-size-of-yourpage-for-responsive-designs/.
?
, .
,
, .. , ,
.
. , , , , ,
, . .1.2 (1156921),
Firesizer (11711023).

1.5. -

33

.1.2.

,
-. , http://
thinkvitamin.com/.
1060, , .1.3.
930, '
1060, , .1.4.
, ?
.
, , ,
. , 880 (.1.5).
, ,
; :
,
.

34

1. HTML5, CSS3 -

.1.3. 1060

.1.4. 930 1060

1.5. -

35

.1.5.
880

600,
(.1.6).
?
,
. , ,
, ,
. .

36

1. HTML5, CSS3 -

.1.6. 600

http://2011.dconstruct.org/. (, 1350) , .1.7.


. ,
( 960)? ,
,
,
(.1.8).

1.5. -

.1.7. dConstruct 2011

.1.8.

37

38

1. HTML5, CSS3 -

720
, : , (.1.9).

.1.9.

, 480,
, , .
-
300. .1.10, ,
iPhone.

1.5. -

39

.1.10. dConstruct 2011

-
-, ,
http://mediaqueri.es. , , ,
. ,
-, , .
, -,
HTML5. ,
, HTML5.

40

1. HTML5, CSS3 -

1.6. HTML5

HTML
5 , W3C-
CSS
-
JavaScript
-, . , , , , ,
-, ,
,
, .
, !
HTML5
(HTML4.01). - ,
,
HTML
5-, .
HTML
5 ..,

JavaScript
- , . - ,
.


HTML5
HTML- DOCTYPE (Document Type
Declaration ). , -
(

HTML
4.01 ).
HTML
5 DOCTYPE
HTML
4.01 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

, HTML5,
:
<!DOCTYPE html>

,
, , , .
HTML5? . JavaScript CSS
? HTML4.01
:
<script src="js/jquery-1.6.2.js" type="text/javascript"></script>

1.6. HTML5

41

HTML5 :
<script src="js/jquery-1.6.2.js"></script>

, type.
CSS-. HTML5
,
. , <sCRipt SrC=js/jquery-1.6.2.js></script>
, .
,
. HTML5 :
W3C- HTML5 (http://validator.
w3.org/). ,
, , .
, . HTML5-.


HTML5
HTML-
:
<div class="header">
<div class="navigation">
<ul class="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</div> <!-- navigation -->
</div> <!-- header -->

, HTML5:
<header>
<nav>
<ul id="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</nav>
</header>

? <div>
( )
HTML
5 . ,
( ,
), .
<nav>, :
, . ,

42

1. HTML5, CSS3 -

,, , . , - ,
.
HTML- , ,
(
, PHP, Ruby, .NET, ColdFusion ..),
. ,
</div>, ( )
, <div>. HTML5
. , </header>,
, , .
, HTML5. ,
, - . CSS3.

1.7. CSS3
-
- 1990- , , ,
,
. (Cascading Style Sheets CSS)
. , , CSS-,
http://www.csszengarden.com , ,
. CSS
-,
CSS CSS2.1.

CSS
3 , , , , .
W3C http://www.w3.org/TR/CSS/#css3 :
CSS , ,
CSS2.1. /
CSS2.1. CSS-
CSS2.1: .


W
3
C
. ,
, CSS3
, - . CSS2.1, , CSS2.1.
, CSS3- (
) , , .

1.7. CSS3 -

43

: CSS3
- !
, , ,
, - .
( Internet Explorer6, 7 8)
CSS
3-, . ,
, .

CSS3 ,
?
, . , ,
, , ,
. CSS2.1
sliding doors ( ) (http://www.alistapart.com/articles/
slidingdoors/),
. HTML- , :
<a href="#"><span>Box Title</span></a>

<a>, . headerLeft.png 15 40
, headerRight.png ( 280).
.
( <span>)
, ,
. CSS-
:
a {
display: block;
height: 40px;
float: left;
font-size: 1.2em;
padding-right: 0.8em;
background: url(images/headerRight.png) no-repeat scroll top right;
}
a span {
background: url(images/headerLeft.png) no-repeat;
display: block;
line-height: 40px;
padding-left: 0.8em;
}

44

1. HTML5, CSS3 -

.1.11 , Google Chrome


(v16):

.1.11.

, ,
( <span>
) HTTP- ( )
.
, , CSS-
background-position: . ,
, . , , ?
?
(-). ,
CSS
3 .
, , CSS3! HTML, :
<a href="#">Box Title</a>

CSS- :
a {
float: left;
height: 40px;
line-height: 40px;
padding-left: 0.8em;
padding-right: 0.8em;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-image: url(images/headerTiny.png);
background-repeat: repeat-x;
}

.1.12 ,
CSS
3- , (Chrome 16).

1.7. CSS3 -

45

.1.12. CSS3-

1, X.
1, 40
, , , .

,
, , , ,
. , .
, ,
, CSS3 border-radius
. , , 12? : border-radius 12px,
. CSS-, ,
Safari
(3 ), Firefox (1 ), Opera (10.5 ), Chrome
(3 ) Internet Explorer9. Microsoft
Internet Explorer9 (,
), , , .
URL-: http://ie.microsoft.com/testdrive/html5/
borderradius/default.html.
CSS
3 , , . , ,
, linear-gradient(yellow, blue)
, CSS3.
, , (, #BFBFBF) CSS3
( 5). ,

46

1. HTML5, CSS3 -

(
),
CSS
- , , , :
background-color:
background-image:
background-image:
background-image:
background-image:
background-image:
background-image:

#42c264;
-webkit-linear-gradient(#4fec50, #42c264);
-moz-linear-gradient(#4fec50, #42c264);
-o-linear-gradient(#4fec50, #42c264);
-ms-linear-gradient(#4fec50, #42c264);
-chrome-linear-gradient(#4fec50, #42c264);
linear-gradient(#4fec50, #42c264);

linear-gradient
( #4fec50), (#42c264).
, CSS- background-image: linear-gradient
, -webkit-.
(, , -moz- Mozilla Firefox, -ms
Microsoft

Internet

Explorer
..) CSS3-, ,
. , .
, .

1.8. , , !
.1.12 , CSS3- Chrome
16, .
, , ,
CSS
, . CSS3
- , . , ,
,
Internet Explorer 9 .
CSS3? , CSS3 ,
. , -
CSS
3. Safari Chrome http://www.panic.com/blog/. , -
, (.1.13).
, , . , ?
-

1.8. , , !

47

Flash JavaScript.
CSS3-.
CSS3 JavaScript Flash
, , ,
-. ,
CSS3, ,
.

.1.13.


CSS
3- http://demo.marcofolio.net/3d_animation_css3/. - -
, CSS-,
. Internet Explorer9 Firefox
( Firefox 9.0 CSS3-).
Safari 5 Chrome 16 .
.1.14 ,
, ,
.

48

1. HTML5, CSS3 -

.1.14. 3D- CSS3

Safari
Chrome WebKit. - ,
http://designlovr.com/examples/dynamic_stack_of_index_cards/, Firefox.
, CSS3 (.1.15).

.1.15. CSS3

1.9. HTML5 CSS3 ?

49

,
. (progressive enhancement). ,
, .
, . , 3D-
CSS3 . , CSS3, , , ,
RGBA
- . , ,
.

1.9.
HTML5 CSS3 ?
,
. , ,
.
Internet Explorer 7 8
HTML5- CSS3- , ,
Internet Explorer7 8,
HTML5 CSS3. , .
9, , ( Internet Explorer), ,
, . (polyfill),
.
-.
, .
-, ? ,
.
,
? ,
.
,
? ,
.
,
, Internet Explorer 8 ? ,
- .

50

1. HTML5, CSS3 -

70

Internet Explorer 8 ? , - .
, , , , , -. ,
,
. , - - , .

1.10. -

,
, - HTML5 CSS3
,
, .
-, ( , ) . ,
/ , -
,
.

1.11. ,


, , -, . - ,
, . ,

- HTML/CSS jQuery. ,
( , ,
) , , ,
. , ,
.
,

1.11. ,

51

.
. : , /
( ), ,
, . , .
- , - Internet Explorer6 7 ,
, ,
Safari, Firefox Chrome, ,
. 30% / , ,
. , ,
,
, .. Internet Explorer.
, . , - ,
.
, . ,
, Internet Explorer !
, , - , .
-
,
.
, (, Internet Explorer 8 ),
. ,
, .
, , . , , , .
,
, !
, , ,

-,
.

52

1. HTML5, CSS3 -

1.12.
, , - , , . , ,
, , , ,
.

HTML
5, , , ,
, ,
, .
- CSS3.

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

, CSS3
. CSS3-.

CSS
- , .
, , CSS-,
, , , , ( )..
:
, -;
, CSS-;
, ;
CSS3-;
CSS ;
, -

iOS Android.

2.1.

, (Firefox 3.6 , Safari 4 , Chrome


4 , Opera 9.5 , Safari 3.2 iOS, Opera Mobile 10 , Android 2.1 ,
Internet Explorer 9 ). , (
JavaScript
) , Internet Explorer 6, 7 8.
Internet Explorer 6, 7 8, 9.

54

2. :

, ,
!

W3C ( ,
http://www.w3.org/2005/10/
Process-20051014/tr) Working Draft (WD) ( ) Candidate Recommendation
(CR) ( ) Proposed Recommendation (PR) ( ), W3C Recommendation
(REC) ( W3C). ,
, , , .
, CSS Transforms Module Level3 (http://www.w3.org/TR/css3-3d-transforms/)
Working Draft 2009, ,
Candidate Recommendation, .

2.2. -
?

CSS
3-, , CSS- ,
. W3C- CSS3-
(http://www.w3.org/TR/css3-mediaqueries/), :
HTML4 CSS2 , . ,
sans-serif, , serif,
. Screen print , . ,
.
, 0 ,
. ,
, width, height color. ,
, .


CSS- , , ?
CSS-,
- :
body {
background-color: grey;
}

2.2. - ?

@media screen and (max-width:


body {
background-color: red;
}
}
@media screen and (max-width:
body {
background-color: orange;
}
}
@media screen and (max-width:
body {
background-color: yellow;
}
}
@media screen and (max-width:
body {
background-color: green;
}
}

55

960px) {

768px) {

550px) {

320px) {

- ( Internet
Explorer 9) .
.
, ,
#ffffff.
, ,
.
CSS2, ,
(, screen print),
, media <link>.
, , <head> HTML:
<link rel="stylesheet" type="text/css" media="screen" href="screenstyles.css">

,
, .
, .
true, . false,
. :
? .
: ?


:
<link rel="stylesheet" media="screen and (orientation: portrait)"
href="portrait-screen.css" />

56

2. :

( ?), ( ?).
portrait-screen.css ,
, , .
, not .
, ,
, ,
:
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portraitscreen.css"

. ,
, ,
800.
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:
800px)" href="800wide-portrait-screen.css" />

, .
- true,
. . :
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:
800px), projection" href="800wide-portrait-screen.css" />

. -,
. -, projection and / . ,
.
, .
CSS-,
. CSS-,
<head></head> HTML-.
. ,
, h1 ,
400 :
@media screen and (max-device-width: 400px) {
h1 { color: green }
}

CSS- @import
. ,
phone.css ,
, 360:
@import url("phone.css") screen and (max-width:360px);

2.2. - ?

57

, CSS- @import HTTP- (, ,


), .

?
- (width)
(device-width). , . ,
, ,
. , .
width .
height .
device-width , (
).
device-height , (
).
orientation ( ).
aspect-ratio .
16:9 aspect-ratio: 16/9.
device-aspect-ratio aspect-ratio, , ,
.
color . ,
min-color: 16 , 16-
.
color-index .
.
monochrome ,
.
(), monochrome: 2, .
resolution ,
, min-resolution: 300dpi. , min-resolution: 118dpcm.
scan : ,
. , ,
HD- 720p (
progressive, ), , scan: progressive,
, HD- 1080i
( i interlaced, ),
scan: interlace.

58

2. :

grid ,

. . , ,
.
scan grid min max . , ,
:
@import url("phone.css") screen and (min-width:200px) and (max-width:360px);

(min) (max) width


. phone.css ,

200 360.

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


-
, ,
. ,
, ,
( / ).

HTTP
-, , , , .
JavaScript- Respond.js (https://github.com/scottjehl/Respond),
Internet
Explorer 8 , CSS, @import.

2.3. -

59

, , . ,
, :
@media screen and (max-width: 768px) { }

2.3. -
, , -!
, , . ,
.
. (,
, !),
, , , .
, . ,
. And
the winner isnt ( ...),
http://www.andthewinnerisnt.com/. , , ,
( ). ,
, , , ,
( , ,
).

,

, , ,
960. ,
, , , , , .
, ,
, .
, , , . .2.1 , .
, ,
: , , , . ,
.

60

2. :

.2.1.

4 , HTML5.
,
. , ,
HTML
4-. HTML4 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>And the winner isn't</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- -->
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">1</a></li>

2.3. -

61

<li><a href="#">2</a></li>
</ul>
</div>
</div>
<!-- -->
<div id="sidebar">
<p> </p>
</div>
<!-- -->
<div id="content">
<p> </p>
</div>
<!-- -->
<div id="footer">
<p> </p>
</div>
</div>
</body>
</html>


Photoshop
, , 940 ( 10- ), 220 700 10- (.2.2).
(header, navigation, sidebar,
content footer), CSS.
(!) CSS-
:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
margin-right: 10px;
margin-left: 10px;
width: 940px;
background-color: #779307;
}
#navigation ul li {
display: inline-block;
}
#sidebar {
margin-right: 10px;
margin-left: 10px;
float: left;
background-color: #fe9c00;

62

2. :

width: 220px;
}
#content {
margin-right: 10px;
float: right;
margin-left: 10px;
width: 700px;
background-color: #dedede;
}
#footer {
margin-right: 10px;
margin-left: 10px;
clear: both;
background-color: #663300;
width: 940px;
}

.2.2. , Photoshop

2.3. -

63

, ,
( ), .

CSS-, ,
HTML-.

CSS
- , , , ,
.
, .
, HTML4-,
(Eric Meyer) (http://meyerweb.com/eric/tools/css/reset/)
, , , , (Dan Cederholm)
(http://simplebits.com). , ,
. , HTML5-, normalize.css (http://necolas.github.com/normalize.css/),
4.

.2.3 , 960.

.2.3. 960

/
CSS
. , , .
: 960 .

-:

,
CSS.
-,

64

2. :

. ,
.
, ,
.
, (
, ). 16 ( 960 PNG-
20,
4) . , , , ! .2.4 , ( 600%)
.

.2.4.


, And the winner isnt ,
.2.5.
, .
, ,
These should have won ( )
Full info ( ) ,
, .
HTML5 CSS3.
HTML5 CSS3 ( ,
, ) . , , ,
, ,
.

2.3. -

65

.2.5. And the winner isnt



,
, 960,
, , (.2.6).
673. , - iPhone
3GS? 320480. .2.7.

66

2. :

.2.6. , 960

-, , . , ,

Safari

iOS
980 , . -

2.4. ,

67

, , . , Safari
?

.2.7. iPhone 3GS

2.4. ,


Android iOS WebKit (http://
www.webkit.org/). , ( , , Opera Mobile) <meta>

68

2. :

name="viewport"
. <meta> <head> HTML-.
width (, ,
) initial-scale, 2.0 ( ). <meta> name="viewport",
,
(200%) :
<meta name="viewport" content="initial-scale=2.0,width=device-width" />


HTML
-, :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
<title>And the winner isn't</title>

Android ,
(.2.8).

.2.8. , Android

2.4. ,

69

, , , !
IOS ANDROID
,
Android iOS. Android- Windows, Linux Mac OSX . ,
Android Software Development Kit (SDK), http://developer.android.com/sdk/.
, .
iOS- Mac OSX Xcode
( Mac App Store). Xcode,
, ~/Developer/Platforms/iPhoneSimulator.platform/Developer/
Applications/iOSSimulator.app.

<meta> , . name="viewport"
. content="initial-scale=2.0 : (0.5 , 3.0 ..), width=device-width
, device-width.
<meta> ,
. ,
,
:
<meta name="viewport" content="width=device-width, maximum-scale=3,
minimum-scale=0.5" />

,
, , , :
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

user-scalable=no .
initial-scale 1.0,
, , 100%
. width device-width , , 100%
. <meta>,
:
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

iPad ,
, , , (.2.9)! . , !

70

2. :

.2.9. iPad

, <meta> name="viewport" , W3C CSS. http://dev.w3.org/


csswg/css-device-adapt/ @viewport. , <meta> <head>
CSS- @viewport { width: 320px; }.
320. (, Opera Mobile), , ,
@-o-viewport { width: 320px; }.

2.5.

71

2.5.

<meta> name="viewport",
, , . CSS- , ,
(, iPad), 768 ( 1024,
).
@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header,#footer,#navigation {
width: 748px;
}
}

wrapper, header, footer


navigation, 768.
.2.10 , iPad.
.
iPad ( 768)
. ,
,
, (
, ).
CSS, :
@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header,#footer,#navigation {
width: 748px;
}
#content,#sidebar {
padding-right: 10px;
padding-left: 10px;
width: 728px;
}
}


. . ,
, ( ). ,

72

2. :

-.

.2.10.

2.6. -

, ,
(
display: none

2.6. -

73

). ,
. , , ,
. ,

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

, ,

HTML
-: , . , :
<div id="sidebar">
<p> </p>
</div>
<div id="content">
<p> </p>
</div>

:
<div id="content">
<p> </p>
</div>
<div id="sidebar">
<p> </p>
</div>

,
- , ,
float:left float:right, . iPad
, () .
, . , ,
768. :
@media screen and (max-width: 768px) {
#wrapper,#header,#footer,#navigation {
width: 768px;
margin: 0px;
}
#logo {
text-align:center;
}
#navigation {
text-align: center;

74

2. :

background-image: none;
border-top-color: #bfbfbf;
border-top-style: double;
border-top-width: 4px;
padding-top: 20px;
}
#navigation ul li a {
background-color: #dedede;
line-height: 60px;
font-size: 40px;
}
#content, #sidebar {
margin-top: 20px;
padding-right: 10px;
padding-left: 10px;
width: 728px;
}
.oscarMain {
margin-right: 30px;
margin-top: 0px;
width: 150px;
height: 394px;
}
#sidebar {
border-right: none;
border-top: 2px solid #e8e8e8;
padding-top: 20px;
margin-bottom: 20px;
}
.sideBlock {
width: 46%;
float: left;
}
.overHyped {
margin-top: 0px;
margin-left: 50px;
}
}

, ,
768
. .
, ,
. ,
, .
768 , .2.11.
, - ,

CSS
- .
?

2.6. -

75

.2.11. 768

, , :
#wrapper,#header,#footer,#navigation {
width: 768px;
margin: 0px;
}


. , , ,

76

2. :

( 768
) :
#navigation {
text-align: center;
background-image: none;
border-top-color: #bfbfbf;
border-top-style: double;
border-top-width: 4px;
padding-top: 20px;
}
#navigation ul li a {
background-color: #dedede;
line-height: 60px;
font-size: 40px;
}

, , . , ? .
, ,
iPhone .2.12.

.2.12. iPhone

2.8.

77

2.7.

.
.
iPhone 320.
, , . ,
. 768 ,
768 960,
CSS-,
. , ,
960 (
).
. , ,
. ,
, iPad.
, ,
, .
,
.
,
, .
, .
CSS-,
, , - , ,
. . ,
, . ,
. , .

2.8.
,
CSS
3-, CSS-
-. ,
- ,
,
. ,

78

2. :

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

1990- ,
.
, . , ,
, 20% , 80%.
, , ,
. , , . ,

CSS
, - , .
( )
,
.
, .
, ( !)
. .
:
, -

;
, , -

;
, , -

em;
, ;
, ;
;
,

;
CSS.

80

3.

3.1.

,
.
HTML- CSS-,
, 9501000.
-
(, 90%), :
. - .
,
,
,
iPad

iPhone
( 2), - , ,
. ,
,
,
-
. - .

3.2.
-

,
- . ,

,
CSS
-, , .
2 ,
(
), .
, , , . , .
,
. , .

3.3.

81


-, A List Apart (http://www.alistapart.com/articles/responsive-web-design/).
, ( , ), , . ,
-, .
, - :
, .
-, , .

3.3.


,
, , . , .. ,

Photoshop
,
Fireworks
.
CSS
. . , ,
(- ) CSS. ?


, ,
(, , , ).
Handcrafted CSS
(CSS ), .
,
:
= .
? ,
- .
,
,
And the winner isnt,
.

82

3.

, 2 ,
:
<div id="wrapper">
<!-- -->
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">navigation1</a></li>
<li><a href="#">navigation2</a></li>
</ul>
</div>
</div>
<!-- -->
<div id="sidebar">
<p> </p>
</div>
<!-- -->
<div id="content">
<p> </p>
</div>
<!-- -->
<div id="footer">
<p> </p>
</div>
</div>

, CSS-,

(header, navigation, sidebar, content footer). ,
,
:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
margin-right: 10px;
margin-left: 10px;
width: 940px;
}
#navigation
padding-bottom: 25px;
margin-top: 26px;
margin-left: -10px;
padding-right: 10px;
padding-left: 10px;

3.3.

83

width: 940px;

#navigation ul li {
display: inline-block;
}
#content {
margin-top: 58px;
margin-right: 10px;
float: right;
width: 698px;
}
#sidebar {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
padding-right: 10px;
margin-right: 10px;
margin-left: 10px;
float: left;
width: 220px;
}
#footer {
float: left;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
clear: both;
width: 940px;
}

.
, = .
<div> #wrapper.
CSS- , margin-right
margin-left auto, width 960px.
<div>,
?

, -
(content, sidebar, footer ..),
. ,

84

3.

, <div> #wrapper .
96% , . <div> #wrapper:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* <div> */
}

(.3.1).

.3.1. ,

! 96% ,
100% 90% , ,

3.3.

85


.
.
. = .
<div> #header () <div> #wrapper (). ,
<div> #header (), 940,
<div> #wrapper,
960, 0.979166667. , ,
, , , 97.9166667%. CSS-:
#header {
margin-right: 10px;
margin-left: 10px;
width: 97.9166667%; /* 940 960 */
}

<div> #navigation #footer


,
.
, , <div> #content #sidebar. (960),
.
<div> #content 698, , 960, 0.727083333.
, ,
72.7083333% <div>
#content .
220,
2. , , 2. . ,
2 ,
. (
218) (960) 0.227083333.
, ,
, , 22.7083333%.
, , CSS- :
#wrapper {
margin-right: auto;
margin-left: auto;

86

3.

width: 96%; /* <div> */


}
#header {
margin-right: 10px;
margin-left: 10px;
width: 97.9166667%; /* 940 960 */
}
#navigation {
padding-bottom: 25px;
margin-top: 26px;
margin-left: -10px;
padding-right: 10px;
padding-left: 10px;
width: 72.7083333%; /* 698 960 */
}
#navigation ul li {
display: inline-block;
}
#content {
margin-top: 58px;
margin-right: 10px;
float: right;
width: 72.7083333%; /* 698 960 */
}
#sidebar {
border-right-color:
border-right-style:
border-right-width:
margin-top: 58px;
margin-right: 10px;
margin-left: 10px;
float: left;
width: 22.7083333%;
}
#footer {
float: left;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
clear: both;
width: 97.9166667%;
}

#e8e8e8;
solid;
2px;

/* 218 960 */

/* 940 960 */

.3.2 ,
Firefox 1000.

3.3.

87

.3.2. Firefox

. , 10, , , = . 10-
, 960,
1.0416667% (10960).
?
- (,
http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one/) , .550724638em .
: ?

88

3.

, . , .
, , , (http://en.wikipedia.org/wiki/
Golden_ratio). ,
1:1,61803398874989 (
, 10000 , http://www.maths.surrey.ac.uk/hosted-sites/R.Knott/Fibonacci/
phi10000dps.txt). ,
. ,
, .

- ,
. , .
,
(.3.3).

.3.3.

3.3.

89

, , . CSS-, ,
:
#navigation {
padding-bottom: 25px;
margin-top: 26px;
margin-left: -1.0416667%; /* 10 960 */
padding-right: 1.0416667%; /* 10 960 */
padding-left: 1.0416667%; /* 10 960 */
width: 97.9166667%; /* 940 960 */
background-repeat: repeat-x;
background-image: url(../img/atwiNavBg.png);
border-bottom-color: #bfbfbf;
border-bottom-style: double; border-bottom-width: 4px;
}
#navigation ul li {
display: inline-block;
}
#navigation ul li a {
height: 42px;
line-height: 42px;
margin-right: 25px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif;
font-size: 27px;
color: black;
}

, #navigation ul li -
, 25. , . <div> #navigation 940,
2.6595745%. , , :
#navigation ul li a {
height: 42px;
line-height: 42px;
margin-right: 2.6595745%; /* 25 940 */
text-decoration: none;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif;
font-size: 27px;
color: black;
}

! , (.3.4)

90

3.

.3.4.

, , . ,
, ,
. ,


( = ), .
. :
<div id="navigation">
<ul>
<li><a href="#">Why?</a></li>

3.3.

<li><a
<li><a
<li><a
<li><a
<li><a
</ul>
</div>

91

href="#">Synopsis</a></li>
href="#">Stills/Photos</a></li>
href="#">Videos/clips</a></li>
href="#">Quotes</a></li>
href="#">Quiz</a></li>

, <a href="#"> <li>. . CSS-


<li>, , :
#navigation ul li { display: inline-block; }

, , . <li>,
,
, - (<div> #navigation), ,
.
CSS- <li>,
display inline-block inline:
#navigation ul li {
display: inline;
}

display: inline; ( <li>


) ,
Internet Explorer
(6 7), inline-block.
inline-block, . <li> display:
inline-block; (, , Internet
Explorer 6 7),
<a> ( ) - <li>.
:
#navigation ul li {
display: inline-block;
margin-right: 2.6595745%; /* 25 940 */
}
#navigation ul li a {
height: 42px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif;
font-size: 27px;
color: black;
}

92

3.

.3.5 ,
1200.

.3.5.
1200

, ,
,
768, , 2. , .
,
, em.
, , .

3.4. em

93

3.4. em

- em , Internet Explorer
,
. ,
.
em - ?
: -, ,
Internet

Explorer
6, , -, . em . <body> 100%
em,
. , , , ,
,
<body>, .
= , , em. ,
16px ( ). ,
<body> :
font-size: 100%;
font-size: 16px;
font-size: 1em;

, And the winner isnt,


:
#logo {
display: block;
padding-top: 75px;
color: #0d0c0c;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif;
font-size: 48px;
}
#logo span { color: #dfdada; }

94

3.

, 4816=3. , :
#logo {
display: block;
padding-top: 75px;
color: #0d0c0c;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif;
font-size: 3em; /* 48 16 = 3*/
}

. -
- , , - ,
. , <h1>
:
<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>

CSS- em :
#content h1 {
font-family: Arial, Helvetica, Verdana, sans-serif;
text-transform: uppercase;
font-size: 4.3125em; } /* 69 16 */
#content h1 span {
display: block;
line-height: 1.052631579em; /* 40 38 */
color: #757474;
font-size: .550724638em; /* 38 69 */
}

, ( 38)
<span> (
69). , line-height ( 40px)
(
38).
EM?
em
. ,
- , . em
/ .

, , em.
,
, .

3.5.

95

3.5.
(
Internet

Explorer
7 ) . CSS :
img {
max-width: 100%;
}

100% -. ,
. :
img,object,video,embed {
max-width: 100%;
}

,
<iframe>
YouTube
. , , 4. , , , .

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

25% .
,
. ,
.

, , (
). :
<!-- -->
<div id="sidebar">
<div class="sideBlock unSung">

96

3.

<h4>Unsung heroes...</h4>
<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" width="99"
height="135" /></a>
<a href="#"><img src="img/wyattEarp.jpg" alt="Wyatt Earp" width="99"
height="135" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" width="99"
height="135" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" width="99"
height="135" /></a>
</div>
</div>

max-width: 100% img


CSS-,
(.3.6).

.3.6. -

, :
<img src="img/wyattEarp.jpg" alt="Wyatt Earp" width="99" height="135" />

3.5.

97

! , , height width:
<img src="img/wyattEarp.jpg" alt="Wyatt Earp" />

, , (.3.7).

.3.7.

, !
. 100%
-, .
,

, :
<img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" />

.
CSS-

98

3.

max-width ,
:
img {
max-width: 100%;
}
.sideBlock img {
max-width: 45%;
}

.3.8 , .

.3.8.

CSS-
.
, 5 ,
CSS
3-
JavaScript- jQuery
.
, ,
45%, , -

3.5.

99

, ,
90%,
(10%).
, , width
height , .
,
.
CSS
- ,
= .
.oscarMain {
float: left;
margin-top: -28px;
width: 28.9398281%; /* 698 202 */
}


, . , , .
1900 (.3.9).

.3.9. 1900

oscar.png 202.
1900
,

100

3.

300. ,
, :
.oscarMain {
float: left;
margin-top: -28px;
width: 28.9398281%; /* 698 202 */
max-width: 202px;
}

oscar.png
, , ,
max-width .
(.3.10).

.3.10.

max-width
,
max-width <div> #wrapper,
:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* <div> */
max-width: 1414px;
}

3.6.

101

, , 96%
, 1414 (
1414px,
, ,
, ). .3.11 ,
1900.

.3.11. 1900

, .
, , ,
.

3.6.


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

102

3.

, .
Responsive Images (http://filamentgroup.
com/lab/responsive_images_experimenting_with_context_aware_image_sizing/).
Adaptive Images (Matt Wilcox) (http://
adaptive-images.com). Filament Group
, ,
() ,
, . ,
, . , Adaptive Images.

Adaptive Images
Adaptive Images Apache2, PHP5.x GD Lib.
, ,
. ZIP- (.3.12).

.3.12. , Adaptive Images

3.6.

103

ZIP- adaptive-images.php .htaccess


.
.htaccess, . instructions.htm, .
ai-cache
(.3.13).

.3.13. ai-cache

FTP-, 777
(.3.14).
JavaScript- <head> , Adaptive Images:
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+';
path=/';</script>

HTML5 ( ),
, ,
type. :
<script type="text/javascript">document.cookie='resolution='+Math. max(screen.
width,screen.height)+'; path=/';</script>

, JavaScript- <head> ( ), ,

104

3.

, , - .
JavaScript-, <head> , :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>And the winner isnt</title>
<script type="text/javascript">document.cookie='resolution='+Math. max(screen.
width,screen.height)+'; path=/';</script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

.3.14.



(
CSS, , )
, , images img.
Adaptive Images, , CSS
( , -

3.6.

105

), .
Adaptive

Images
assets , . , , -
, .
( ),
.htaccess:
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images ------------------------------------------------------------RewriteCond %{REQUEST_URI} !assets
RewriteCond %{REQUEST_URI} !bkg
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above
directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images --------------------------------------------------------</IfModule>

, , ,
assets bkg, . , ,
, ,
. , ,
,
andthewinnerisnt, .htaccess
:
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images ------------------------------------------------------------RewriteCond %{REQUEST_URI} andthewinnerisnt
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above
directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images --------------------------------------------------------</IfModule>

. , ,
, .

106

3.

ai-cache FTP-,
, , 480 (.3.15).

.3.15. ai-cache

Adaptive Images .
, ,
,
JavaScript
. Adaptive Images
,
,
,
.

3.7.

, ,
, . , .
1060-

3.8. CSS

107

, , 768 (
),
, :
@media screen and (min-width: 1001px) and (max-width: 1080px) {
#navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
#navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
#navigation ul li a { font-size: 1.1em; }
}

, ,

769 .
: ,
.

3.8. CSS
/
CSS
. , .
, ,
. , - , , .

CSS
, :
Semantic (http://semantic.gs);
Skeleton (http://getskeleton.com);
Less Framework (http://lessframework.com);
1140 CSS Grid (http://cssgrid.net);
Columnal (http://www.columnal.com).

Columnal,
,
CSS-, 960.gs ,
.

108

3.

ALPHA, OMEGA
CSS CSS- ,
. row container ,
,
, . , ,
CSS
, alpha omega (
), .col_x, x , (, .col_6 ).

. ,
. PSD- And the
winner isnt HTML CSS. ,
Columnal .
PSD-, ,
16. Columnal
12,
PSD
- 12 16 (.3.16).
ZIP- Columnal ,
, <head> columnal.css
main.css. Columnal
.
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>And the winner isn't</title>
<script type="text/javascript">document.cookie='resolution='+Math. max(screen.
width,screen.height)+'; path=/';</script>
<link href="css/columnal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- -->
<div id="header">
<div id="logo">And the winner is<span>nt...</span></div>
<div id="navigation">
<ul>
<li><a href="#">Why?</a></li>

109

3.8. CSS

.3.16.

<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</div>
</div>
<!-- -->
<div id="content">
<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
<h1>Every year <span>when I watch the Oscars Im annoyed...</ span></h1>
<p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the
real cinematic heroes lose out. Not very Hollywood is it?</p>
<p>Were here to put things right. </p>

110

3.

<a href="#">these should have won &raquo;</a>


</div>
<!-- -->
<div id="sidebar">
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>
<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
< a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
</div>
</div>
<!-- -->
<div id="footer">
<p>Note: our opinion is absolutely correct. You are wrong, even if you think you
are right. Thats a fact. Deal with it.</p>
</div>
</div>
</body>
</html>

, <div> #wrapper ,
.container:
<div id="wrapper" class="container">

, , AND THE WINNER


ISNT . ,
.row:
<div id="header" class="row">

, , 12. , .col_12:
<div id="logo" class="col_12">And the winner is<span>nt...</span></div>

<div> navigation,
.row:
<div id="navigation" class="row">

.row .col_x , . ,
. .

3.8. CSS

111

,
. , <div> class="row" #content #sidebar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>And the winner isnt</title>
<script type="text/javascript">document.cookie='resolution='+Math.
max(screen.width,screen.height)+'; path=/';</script>
<link href="css/columnal.css" rel="stylesheet" type="text/css" />
<link href="css/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper" class="container">
<!-- -->
<div id="header" class="row">
<div id="logo" class="col_12">And the winner is<span>nt...</span></div>
<div id="navigation" class="row">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</div>
</div>
<div class="row">
<!-- -->
<div id="content" class="col_9 alpha omega">
<img class="oscarMain col_3" src="img/oscar.png" alt="atwi_oscar" />
<div class="col_6 omega">
<h1>Every year <span>when I watch the Oscars Im annoyed...</span></h1>
<p>that films like King Kong, Moulin Rouge and Munich get the statue whilst
the real cinematic heroes lose out. Not very Hollywood is it?</p>
<p>We're here to put things right. </p>
<a href="#">these should have won &raquo;</a>
</div>
</div>
<!-- -->
<div id="sidebar" class="col_3">
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>

112

3.

<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>


<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
</div>
</div>
</div>
<!-- -->
<div id="footer" class="row">
<p>Note: our opinion is absolutely correct. You are wrong, even if you think you
are right. Thats a fact. Deal with it.</p>
</div>
</div>
</body>
</html>

, custom.css . :
#navigation ul li {
display: inline-block;
}
#content {
float: right;
}
#sidebar {
float: left;
}
.sideBlock {
width: 100%;
}
.sideBlock img {
max-width: 45%;
float:left;
}
.footer {
float: left;
}


, ,
(.3.17).

113

3.9.

.3.17.

, , ( ,
),
, CSS Columnal
.

3.9.
,
,
. em
. , , , .

. ,
CSS,
.

114

3.

-,
HTML4.01. 1

HTML
5. -,
, , .
HTML5 ,
HTML.

HTML5

HTML
5
Web

Applications
1.0, Web Hypertext Application Technology Working Group (WHATWG),
W3C.

HTML
5 -. -, ,
HTML
5 , (
), -.
,
HTML
5- - ( , , ), -.
HTML5
.
, JavaScript,
. 8,
:
HTML5 ;
HTML5-;
HTML5;
HTML- ;
HTML5- ;
Web Accessibility Initiative-Accessible Rich Internet Applications

(
WAI
-
ARIA
) ;
;
HTML5-, <iframe>;
.

116

4. HTML5 -

4.1. HTML5
?
HTML5 ,
HTML5-
, Apple Safari, Google Chrome, Opera, Mozilla Firefox
Internet Explorer9! , ,
HTML5- W3C Recommendation
(REC), ,
.


HTML5
, ,
HTML
5,
HTML
4.01. ,
, HTML5.
HTML5- ( ,
<video> <audio>), Internet Explorer
, .
?
(polyfill) (Remy Sharp)
Polyfilla (
). , JavaScript-,
. , . , -, Internet Explorer6 ,
, , !

, Modernizr
, Internet Explorer ( 9)
HTML5-.
(Sjoerd Visscher) , ,
JavaScript
,
Internet

Explorer
. , JavaScript
(http://remysharp.com/2009/01/07/
html5-enabling-script/),
HTML
5- HTML5- Internet
Explorer.

HTML
5- ,

4.2. HTML5-

117

Internet Explorer 6, 7 8 , ,
. . , ,
. Modernizr (http://www.modernizr.com)
,
HTML
5. HTML5- Internet Explorer,
, CSS- JavaScript,
.
, ,
HTML5, , HTML5.

HTML5-?
HTML5 BOILERPLATE
,
HTML5 Boilerplate (http://html5boilerplate.com/).
HTML5-, (, ,
normalize.css), Modernizr. ,
, CSS- JavaScript-,
. !

4.2. HTML5-
-. ,
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>

,
HTML5-, W3C (http://
validator.w3.org/).
, !

HTML
5. , , . , ,
.

118

4. HTML5 -

, ?
HTML5:
<!DOCTYPE html>

, <!doctype html>
. .
HTML5
?

HTML5 <!DOCTYPE html> , . HTML5.

<html>, ,
<head>:
<html lang="en">
<head>
-?
W3C (http://dev.w3.org/html5/spec/Overview.html#attr-lang)
lang
, . ,
. , <html>
<html lang="ja">. http://
www.iana.org/assignments/languagesubtag-registry.

, .
, :
<meta charset=utf-8>

,
UTF-81.

HTML5
( ) . , , , , , ,
. , , , . .
1

windows-1251. . .

4.2. HTML5-

119

HTML5 ,
.
, , ,
, type . ,
:
<link href="CSS/main.css" rel="stylesheet" type="text/css" />

HTML5
:
<link href=CSS/main.css rel=stylesheet >

, . . /,
type.
HTML5 . , .
,
CSS- JavaScript-. ,
, <div> :
<div id=wrapper>

HTML5-.
:
<img SRC=frontCarousel.png aLt=frontCarousel>

HTML5-. /,
.
<head>, .
XHTML1.0!

HTML5-
-
, (
XHTML
1.0, XML-). ,
,
HTML
5, , , , , !
, ( ).
HTML5-
(
HTML5, /

120

4. HTML5 -

) ,
HTML5. , CSS,
, :
<link href="CSS/main.css" rel="stylesheet"/>

, type.
, ,
. HTML5 ,
, .

<a>

HTML
5, , , - <a> . , , ,
<a>. ,
:
<h2><a href="index.html">The home page</a></h2>
<p><a href="index.html">This paragraph also links to the home page</a></p>
<a href="index.html"><img src="home-image.png" alt="home-slice" /></a>

<a>
, :
<a href="index.html">
<h2>The home page</h2>
<p>This paragraph also links to the home page</p>
<img src="home-image.png" alt="home-slice" />
</a>

, , ,
<a> <a>, <form> <a>.

HTML-
HTML, , , ,
HTML5. ,
HTML5:
. -
, .
, , , .
, , ,
!
,
border, <img>.

4.3. HTML5-

121

, , . , :
<img src="frontCarousel.png" alt="frontCarousel" border="0" />

CSS.
.
, (
!). ,
. ,
http://dev.w3.org/html5/spec/Overview.html#non-conforming-features. strike, center, font,
acronym, frame frameset.

4.3. HTML5-
:
, , , . . ? , .
And the winner isnt:
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="navigation">
<ul>
<li><a href="#">Why?</a></li>
</ul>
</div>
</div>
<!-- -->
<div id="content">
</div>
<!-- -->
<div id="sidebar">
</div>
<!-- -->
<div id="footer">
</div>
</div>
</body>

, ,
<div> header, content, sidebar .. , ,

122

4. HTML5 -

(, , .) , <div>. HTML5
.

<section>
<section> . , ; ,
.. , <section>
.
- , <div>,
.

http://dev.w3.org/html5/spec/Overview.html#thesection-element ,
HTML5 W3C <section>.

<nav>
<nav>
.
( )
.., .

http://dev.w3.org/html5/spec/Overview.html#the-navelement ,
HTML5 W3C <nav>.

<article>
<article> <section> . , , , , , . <article> .
: ,
<article>, ,
? -:
, <article>,
RSS-? ,
<article>, -. , <article> ,
<article>.

4.3. HTML5-

123

http://dev.w3.org/html5/spec/Overview.html#thearticle-element ,
HTML5 W3C <article>.

<aside>
<aside> . (
). ,
( ..).

HTML5 W3C <aside>, http://dev.w3.org/html5/spec/Overview.html#theaside-element.

<hgroup>
, <h1>, <h2>,
<h3> , <hgroup>.
, HTML5,
<hgroup> .
HTML5. HTML5
. , , <header>
. , , <h1>, . :
<hgroup>
<h1>Bens blog</h1>
<h2>All about what I do</h2>
</hgroup>
<article>
<header>
<hgroup>
<h1>A post about something</h1>
<h2>Trust me this is a great read</h2>
<h3>No, not really</h3>
<p>See. Told you.</p>
</hgroup>
</header>
</article>

124

4. HTML5 -

<h1> <h2>, - :
Bens blog

yy A post about something


<header>, . <header> ,

HTML
5 .

, :
http://gsnedders.html5.org/outliner/;
http://hoyois.github.com/html5outliner/.

.4.1 HTML5 Outliner.

.4.1. HTML5 Outliner

4.3. HTML5-

125

HTML5 W3C <hgroup>,


http://dev.w3.org/html5/spec/Overview.html#thehgroup-element.

<header>
<header> ,
. .
<header> , , , <article>.

http://dev.w3.org/html5/spec/Overview.html#theheader-element ,
HTML5 W3C <header>.

<footer>
<header>, <footer>
, .
, . <footer> , , . <header>, ,
. , , <article> -.

HTML
5 , - <address>.

http://dev.w3.org/html5/spec/Overview.html#thefooter-element ,
HTML5 W3C <footer>.

<address>
<address>
<article> <body>.
, , <address> ..,

126

4. HTML5 -

, .

<p>.

http://dev.w3.org/html5/spec/Overview.html#theaddress-element ,
HTML5 W3C <address>.

4.4.
HTML5
. ,
<header>, <nav> <footer> , And the winner isnt
<header>, <nav> <footer> (.
):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0"
/>
<title>And the winner isnt</title>
<script>document.cookie='resolution='+Math.max(screen.width,screen. height)+';
path=/';</script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<!-- -->
<header>
<div id="logo">And the winner is<span>n't...</span></div>
<nav>
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</nav>
</header>
<!-- -->

4.4. HTML5

127

<div id="content">
<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
<h1>Every year <span>when I watch the Oscars Im annoyed...</span></h1>
<p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the
real cinematic heroes lose out. Not very Hollywood is it?</p>
<p>Were here to put things right. </p>
<a href="#">these should have won &raquo;</a>
</div>
<!-- -->
<div id="sidebar">
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>
<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt
Earp" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
</div>
</div>
<!-- -->
<footer>
<p>Note: our opinion is absolutely correct. You are wrong, even if you think you
are right. That's a fact. Deal with it.</p>
</footer>
</div>
</body>
</html>

, ,
<article> <section>, .
<article> <section> <header>, <footer>
<nav>. , <article>,

:
<body>
<div id="wrapper">
<!-- -->
<header>
<div id="logo">And the winner is<span>n't...</span></div>
<nav>
<ul>
<li><a href="#">Why?</a></li>
</ul>
</nav>
</header>
<!-- -->

128

4. HTML5 -

<div id="content">
<article>
<header>An article about HTML5</header>
<nav>
<a href="1.html">related link 1</a>
<a href="2.html">related link 2</a>
</nav>
<p> </p>
<footer>This was an article by Ben Frain</footer>
</article>

, <header>, <nav> <footer> ,


, .
<sidebar>.
HTML4.01:
<!-- -->
<div id="sidebar">
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>
<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt
Earp" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
</div>
</div>

, , , <div id="sidebar">
<aside>:
<!-- -->
<aside>
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>
<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt
Earp" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
</div>
</aside>

! (.4.2). ,

4.4. HTML5

129

.4.2.

, ! ,
CSS
- . , .
#header, header, #navigation,
nav, #footer, footer. , CSS-,
, :
#header {
background-position: 0 top;
background-repeat: repeat-x;
background-image: url(../img/buntingSlice3Invert.png);
margin-right: 1.0416667%; /* 10 960 */
margin-left: 1.0416667%; /* 10 960 */
width: 97.9166667%; /* 940 960 */
}

130

4. HTML5 -

:
header {
background-position: 0 top;
background-repeat: repeat-x;
background-image: url(../img/buntingSlice3Invert.png);
margin-right: 1.0416667%; /* 10 960 */
margin-left: 1.0416667%; /* 10 960 */
width: 97.9166667%; /* 940 960 */
}

,
, , ,
, #.
-: #sidebar aside.
.
, :
#sidebar {
}

:
aside {
}


CSS
, HTML4.01 HTML5-
.


HTML5
, HTML5 <header>, <footer> <aside>, .

And the
winner isnt (.4.3).
, ,
( <aside>), : UNSUNG
HEROES OVERHYPED NONSENSE. ,
:
<!-- -->
<aside>
<section>
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>
<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt
Earp" /></a>

4.4. HTML5

131

</div>
</section>
<section>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
</div>
</section>
</aside>

.4.3. ,

, <section> ,
.
, . -
HTML5 <h4> <h1>,
(.4.4).

132

4. HTML5 -

.4.4. HTML5 Outliner

? ,
.
, , , .

4.5. HTML5-
, HTML5
, .
HTML
5- (http://dev.w3.org/
html5/spec/Overview.html#text-level-semantics). .

<b>
<b> ,
. -

4.5. HTML5-

133

CSS, HTML5-
:
,
, , .

<em>
, , <em> .
,
HTML
5 , , :
.
, , <b> , , <i>.

<i>
HTML5- <i> :
,
, .
, <i> ,
- .



,
, , .
:
<!-- -->
<div id="content">
<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
<h1>Every year <span>when I watch the Oscars I'm annoyed...</ span></h1>
<p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the
real cinematic heroes lose out. Not very Hollywood is it?</p>
<p>We're here to put things right. </p>
<a href="#">these should have won &raquo;</a>
</div>

- . <span> <h1> .
, , :
<h1>Every year <em>when I watch the Oscars I'm annoyed</em></h1>

134

4. HTML5 -

(.4.5).

.4.5.

- ,
. , <b>:
<p>that films like <b>King Kong</b>, <b>Moulin Rouge</b> and
<b>Munich</b> get the statue whilst the real cinematic heroes lose out. Not very
Hollywood is it?</p>

,

<b> - , ,
,
CSS-.

4.6. WAI-ARIA

135

, , : Were here to put things right (


, ), , ,
!
<i>. , <em>.
,
<i>. - ! :
<p><i>Were here to put things right.</i></p>

, <b>,
<i>, , .
, ,
.
HTML
5 .
, HTML5- :
http://dev.w3.org/html5/spec/Overview.html#text-level-semantics.
, , ,
.

4.6.
WAI-ARIA
WAI-ARIA . WAIARIA
, ( -),
.
,
, , ,
? WAI-ARIA .

ARIA
( http://www.w3.org/WAI/intro/aria).
ARIA,

HTML
5 .
, , /
(,
). ARIA,
HTML ,
WAI-ARIA, .
ARIA. ARIA
-. ,

136

4. HTML5 -

(
HTML
5 ), -, HTML5 . ! ,
.
HTML5:
<nav>
<ul>
<li><a
<li><a
<li><a
<li><a
<li><a
<li><a
</ul>
</nav>

href="#">Why?</a></li>
href="#">Synopsis</a></li>
href="#">Stills/Photos</a></li>
href="#">Videos/clips</a></li>
href="#">Quotes</a></li>
href="#">Quiz</a></li>

,
WAI
-
ARIA
. role,
:
<nav role="navigation">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</nav>

?
.
application -.
banner ,

(). , , .
complementary , -

. And the
winner isnt UNSUNG HEROES
OVERHYPED NONSENSE.
contentinfo , -

. ,
.

4.6. WAI-ARIA

137

form , ! , , , form
search.
main .
navigation

.
search , .

ARIA
ARIA . ,
http://
www.w3.org/TR/wai-aria/roles#role_definitions.

HTML5- And
the winner isnt ARIA:
<body>
<div id="wrapper">
<!-- -->
<header role="banner">
<div id="logo">And the winner is<span>n't...</span></div>
<nav role="navigation">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</nav>
</header>
<!-- -->
<div id="content" role="main">
<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
<h1>Every year <em>when I watch the Oscars I'm annoyed</em></h1>
<p>that films like <b>King Kong</b>, <b>Moulin Rouge</b> and
<b>Munich</b> get the statue whilst the real cinematic heroes lose out. Not very
Hollywood is it?</p>
<p><i>We're here to put things right.</i></p>
<a href="#">these should have won &raquo;</a>
</div>
<!-- -->
<aside>

138

4. HTML5 -

<section role="complementary">
<div class="sideBlock unSung">
<h1>Unsung heroes...</h1>
<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp.jpg"
alt="Wyatt Earp" /></a>
</div>
</section>
<section role="complementary">
<div class="sideBlock overHyped">
<h1>Overhyped nonsense...</h1>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
</div>
</section>
</aside>
<!-- -->
<footer role="contentinfo">
<p>Note: our opinion is absolutely correct. You are wrong, even if you think you
are right. That's a fact. Deal with it.</p>
</footer>
</div>
</body>


NONVISUAL DESKTOP ACCESS (NVDA)
Windows ARIA ,
NVDA. http://www.nvda-project.org/.

, WAI-ARIA ,

, ,
WAI
-
ARIA
HTML5-.
ARIA
, ARIA , . , CSS- navigation,
: nav[role="navigation"] {}.

4.7.
HTML5 , Apple
Flash iOS-. Flash

4.8. HTML5

139

. Adobe Apple HTML5


, .

HTML
5 , Apple ,
.
, , ,
Internet

Explorer

8
HTML
5- .
Microsoft ,
. ,
(Firefox 3.5 , Chrome 4 , Safari 4,
Opera 10.5 , Internet Explorer 9 , iOS 3.2 ,
Opera Mobile 11 , Android 2.3 ),
HTML5- .

4.8.
HTML5
. -

HTML
4.01 . , . HTML5 .
, :
<video src="myVideo.ogg"></video>

-!
, , <video></video> ( <audio></audio> )
.
,

HTML
5 . , , height width. :
<video src="video/myVideo.mp4" width="640" height="480">What, do you mean you dont
understand HTML5?</video>

,
,
Safari
, , . , controls.
autoplay ( , ,
).
:
<video src="video/myVideo.mp4" width="640" height="480" controls autoplay>What, do
you mean you dont understand HTML5?</video>

140

4. HTML5 -


.4.6.

.4.6.

preload (,
HTML
5, , preload autobuffer), loop
poster ,
. ,
.
, .
:
<video src="video/myVideo.mp4" width="640" height="480" controls autoplay
preload="auto" loop poster="myVideoPoster.jpg">What, do you mean you dont understand
HTML5?</video>

4.8. HTML5

141


-

HTML
5- ( )
Ogg. - HTML5

Ogg
(
Theora
-
Vorbis
-) HTML5-.
- , . ,
Safari
<video> <audio> MP4/H.264/
AAC, Firefox Opera Ogg WebM.
, .

. ,
, ,
, <video> :
<video width="640" height="480" controls autoplay preload="auto" loop
poster="myVideoPoster.jpg">
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
What, do you mean you dont understand HTML5?
</video>

Ogg,
;
<source>.



<source> . , MP4
Ogg , Internet
Explorer 8 , Flash-.
, ,
:
<video width="640" height="480" controls autoplay preload="auto" loop
poster="myVideoPoster.jpg">
<source src="video/myVideo.mp4" type="video/mp4">
<source src="video/myVideo.ogv" type="video/ogg">
<object width="640" height="480" type="application/x-shockwaveflash"
data="myFlashVideo.SWF">
<param name="movie" value="myFlashVideo.swf" />

142

4. HTML5 -

<param name="flashvars" value="controlbar=over&amp;image=myVideoPoster.


jpg&amp;file=video/myVideo.mp4" />
<img src="myVideoPoster.jpg" width="640" height="480" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
<p> <b>Download Video:</b>
MP4 Format: <a href="myVideo.mp4">"MP4"</a>
Ogg Format: <a href="myVideo.ogv">"Ogg"</a>
</p>
</video>

<audio> <video>

<audio> , <video>,
width, height poster. ,
<video> <audio> .
, <audio> .

4.9.
, . , <video> , ( Flash-)
,
Internet

Explorer
! , Flash-
, ,
.
HTML5-
, . .
, - .
.4.7 .
, HTML5- .
height width (, width="640"
height="480") CSS-:
video { max-width: 100%; height: auto; }

,
, , <iframe>
(
YouTube
,
Vimeo
.). (Midnight Run) YouTube:
<iframe width="960" height="720" src="http://www.youtube.com/embed/B1_N28DA3gY"
frameborder="0" allowfullscreen></iframe>

4.9.

143

.4.7.


CSS
-, , (.4.8).
, !
, ,
, jQuery FitVids. ,
, And the winner isnt
JavaScript- jQuery.
<head>. Content Delivery
Network (CDN).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/
jquery.min.js"></script>

FitVids http://fitvidsjs.com/ ( http://daverupert.com/2011/09/responsive-videoembeds-with-fitvids/).

144

4. HTML5 -

.4.8. -


JavaScript
-
FitVids
( js), <head>:
<script src="js/fitvids.js"></script>

, jQuery
, YouTube.
(Midnight Run) YouTube <div> #content:
<script>
$(document).ready(function(){
// .container, .wrapper, .post ..
$(#content").fitVids();
});
</script>

. jQuery- FitVids
YouTube (.4.9).
! .
!

4.10. -

145

.4.9.

4.10. -

HTML
5 , (, API- Geolocation), . ,
, , ,
, ,
.
HTML5 .
,
-.
- . ,

146

4. HTML5 -

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

-
- : ,
,
.manifest. (
HTML
, , JavaScript ..), ,
. - HTML5 (Firefox 3 , Chrome 4 , Safari 4 ,
Opera 10.6 , iOS 3.2 , Opera Mobile 11 ,
Android 2.1 , Internet Explorer 10 )
.manifest,
, . , ?

-

<html> .manifest:
<html lang="en" manifest="/offline.manifest">

, , .manifest.

manifest=/offline.manifest <html> ,
.

- Apache, , ,
.htaccess :
AddType text/cache-manifest .manifest

MIME,
text/cache-manifest.

4.10. -

147

.htaccess, :
<Files offline.manifest>
ExpiresActive On
ExpiresDefault "access"
</Files>

, . ,
. offline.manifest , . ,
, !
offline.manifest.
, .
offline.manifest And the winner isnt:
CACHE MANIFEST
# 1
CACHE:
basic_page_layout_ch4.html
css/main.css
img/atwiNavBg.png
img/kingHong.jpg
img/midnightRun.jpg
img/moulinRouge.jpg
img/oscar.png
img/wyattEarp.jpg
img/buntingSlice3Invert.png
img/buntingSlice3.png
NETWORK:
*
FALLBACK:
/ /offline.html


CACHE MANIFEST. ,
. .
CACHE: ,
. , offline.manifest, , .
URL-.
NETWORK: , . -. , ,

148

4. HTML5 -

.
,
( ),
*.
-.
FALLBACK: URL- /.
, : ? , , .
offline.html.




offline.manifest. ,
( , manifest="/offline.manifest"
<html>), , . ,
, ,
.
:
CACHE MANIFEST
# , 1
FALLBACK:
/ /offline.html
NETWORK:
*

,
HTML
- . /JavaScript- ,
. ,
CACHE:, .



offline.manifest .
,
.
(Nick Pilgrim) ( Dive into HTML5 (
HTML5)) offline.manifest
,
:
# , 1

4.10. -

149


. , - (.4.10).
(, Firefox
), , Chrome, .

.4.10. And the winner isnt

(, WiFi
, ) . , ,
.


-
, ,

Chrome
(.4.11). Console () ( ,
,
ToolsDeveloper Tools ( )
Console ()).
, . , , ,
.

150

4. HTML5 -

.4.11. Chrome

-
: http://dev.w3.org/html5/spec/Overview.html#offline.

4.11.
, ,
HTML5,
, . , ( , ) , ,
.

, .
- . , . ,
, , .

. !
CSS3
.

CSS3: ,

1 , , , .
,
, , .
,
, , 56/.
,
.
,
, .
, ,
, , ( ), ,
. ! , CSS3

, ,
, .
. 6 CSS3-,
, ,
, , 7 CSS3-,
.
CSS3:
, CSS3 ;
CSS3- (
);
CSS-;
;
CSS3- ;
@font-face;
RGB HSL -.

152

5. CSS3: ,

5.1. CSS3

,
(,
!), , ,
, ,
. CSS3
. ( - !)
CSS
3 , , , , , ,
(, , ). , ,
, JavaScript,
, , CSS3.
CSS3 ,
, , .
CSS3, , -
, . , , .

CSS3 Internet Explorer 68


(, @font-face),
CSS3- Internet Explorer (6, 7 8).

CSS
3 ? -, : .
, CSS3
, . , - .
, . ,
, 1. , , ,
, . , , CSS3
Internet

Explorer
. 9.

CSS2.1 CSS3, Internet


Explorer, : http://msdn.microsoft.com/en-us/library/
cc351024%28v=vs.85%29.aspx.

5.3.

153

CSS3

, . , : ?
?
, : ,
. ? -, , , , , , , . CSS3
, .

5.2. CSS-

CSS
3, , CSS-. :
.round {
border-radius: 10px;
}

(.round),
(border-radius: 10px;). (borderradius:) (10px;). , ? ,
.

5.3.


CSS
3-, (
W
3
C
), , -
CSS- .
CSS3-, , CSS3-,
. :
.round{
-khtml-border-radius: 10px; /* Konqueror */
-rim-border-radius: 10px; /* RIM */
-ms-border-radius: 10px; /* Microsoft */
-o-border-radius: 10px; /* Opera */

154

5. CSS3: ,

-moz-border-radius: 10px; /* Mozilla (, Firefox) */


-webkit-border-radius: 10px; /* Webkit (, Safari Chrome) */
border-radius: 10px; /* W3C */
}

(
),
, -webkit-, WebKit
, -ms- , Microsoft,
Internet Explorer, .. - CSS
,
, .
, , ,
, . ,
(, , )
, , , ,
,
.

JAVASCRIPT-
CSS3
,
CSS3-, .
, .
(
(IDE Integrated Development Environment), ) , CSS3 . , JavaScript-, CSS-, http://leaverou.github.com/prefixfree/
-prefix-free.

,
. .
, , , , . ,
:
.round{
-moz-border-radius: 10px; /* Mozilla (, Firefox) */
-webkit-border-radius: 10px; /* Webkit (, Safari Chrome) */
border-radius: 10px; /* W3C */
}

Firefox, Chrome, Safari ,


.
, : ,
? , -

5.3.

155

, . ,
, , ,
.
, . ,
. ,
, , , ,
3% . ,
, .
, , . , CSS3-.


CSS3- HTML5-?
CSS3,
http://caniuse.com. , -
CSS3- HTML5- (.5.1).
, (
, ), -
http://gs.statcounter.com.

.5.1. When can I use

156

5. CSS3: ,

5.4.
CSS3-

CSS
3- ,

.
, , CSS3, , -. , .

CSS3
-
- ,

?
CSS
3 , .
.
CSS3 , -
. :
<div id="main" role="main">
<p>lloremipsimLoremipsum dolor sit amet,
//
</p>
<p>lloremipsimLoremipsum dolor sit amet,
//
</p>
</div>

consectetur
//
consectetur
//

,
, (, 12em),
(, 3). ,
.
,
( ):
#main {
column-width: 12em;
}

, , ,
12em.
.
, Safari
1024 (.5.2).
.5.3 ,
iPad
768.

5.4. CSS3-

.5.2.

.5.3.

157

158

5. CSS3: ,

, ,
! , :
#main {
column-count: 4;
}

.
, :
#main {
column-gap: 2em;
column-rule: thin dotted #999;
column-width: 12em;
}

(.5.4).

.5.4.

CSS3 Multi-column Layout Module http://www.w3.org/TR/css3-multicol/.


, , .

5.4. CSS3-

159


URL-
, ?
.5.5. ,
.

.5.5.

CSS3 ,
Internet Explorer,
5.5!
word-wrap: break-word;

-, ,
.5.6. -!
URL
- !

.5.6. -

160

5. CSS3: ,

5.5. CSS3-

CSS
3 . , , ,
, CSS3! ,

CSS3
, ,
CSS
. , :
img[alt] {
border: 3px dashed #e15f5f;
}

<img> alt:
<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />

, , .
, :
img[alt="atwi_oscar"] {
border: 3px dashed #e15f5f;
}

<img> alt,
atwi_oscar. CSS2.

CSS
3?

CSS3

CSS3 .
, ! ,
. :
;
;
.

, .
. :
[^=""]

5.5. CSS3-

161

, <img>
alt, film, :
img[alt^="film"] {
border: 3px dashed #e15f5f;
}

^, .
.
:
[*=""]

, <img>
alt, film, :
img[alt*="film"] {
border: 3px dashed #e15f5f;
}

*, .
.
:
[$=""]

, <img>
alt, film,
:
img[alt$="film"] {
border: 3px dashed #e15f5f;
}

$, .



? , CSS3.
(, Wordpress, Concrete Magento).
. ,
. ,
,
HTML- <body>
,
. , ,

162

5. CSS3: ,

. <body> :
<body id="2003">
HTML5
HTML5, , , , , , HTML4.01. HTML5 . , , .
http://dev.w3.org/html5/spec/
Overview.html#the-id-attribute.

, Racing History
,
Racing History. , , , CSS3
( , ):
body[id^="2"] .navHistory { color: #00b4ff; }

, .navHistory, body , 2 (, 2002, 2003, 2004


..), , #00b4ff.
. ,
3000
, , ,

CSS3
, , ,
.
.
. ,
.
, , :
<ul>
<li class="first"><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li class="last"><a href="#">Quiz</a></li>
</ul>

5.5. CSS3-

163

, CSS,
:
li {
margin-left: 5%;
margin-right: 5%;
}
.first {
margin-left: 0px;
}
.last {
margin-right: 0px;
}

, . ,
, last first
.

:last-child
CSS2.1 , :
li:first-child


CSS
3 , :
li:last-child

, .
And the winner isnt, display: table. .5.7 ,
.
(.5.8).
,
. :
<nav role="navigation">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</nav>

164

5. CSS3: ,

.5.7. And the winner isnt

, nav :
nav {
display: table;
/* ... */
}

<ul> :
nav ul {
display: table-row;
/* ... */
}

, , :
nav ul li {
display: table-cell;
/* ... */
}

5.5. CSS3-

165

.5.8. ,

,
. ,

CSS
- :
nav ul li:last-child {
text-align: right;
}
nav ul li:first-child {
text-align: left;
}

, , ,
, (.5.9).

,
!
, , : , , ?, ,
. ,

166

5. CSS3: ,

. , CSS . ,
, ,
, .
, display: inline-block
768.

.5.9.

:nth-child
,
? - CSS3
,
:
:nth-child(even)

5.5. CSS3-

167

,
, :nth-child , .
, , , :
nav ul li:nth-child(even) a {
color: #fe0208;
}

(.5.10).

.5.10.

? jQuery-
! ? CSS3- !

:nth-
- , :nth ( , ,

168

5. CSS3: ,

PHP ). ,

.

DOM
(Document Object Model) (, , ),
CSS
3 :nth :nth-child(n), :nth-lastchild(n), :nth-of-type(n)
:nth-last-of-type(n). , (odd) (even)
( ),
(n) :
, :nth-child(2),

;
, :nth-child(3n+1),
1 .

:
, . . . , . , ,
, (2n+3), (
) , ,
3. ,
, :
nav ul li:nth-child(2n+3) a {
color: #fe0208;
}

.5.11,
, (
100, ).

.5.11. ,

, , ?
, :nth-child(1n+2), 1, , , n 1. , :nth-child(n+2).

5.5. CSS3-

169

, , ,
:nthchild(3n+3), :nth-child(3n),
,
.
, ,
:nth-child(3n-2) , 2,
.
:
nav ul li:nth-child(3n-2) a {
color: #fe0208;
}

. 5.12 ,
.

.5.12.

, .
child last-child , last-child
. , :nth-last-child(-n+3)
, ,
. (.5.13).

.5.13.

, :nth-last-of-type.
, :nth-last-of-type

170

5. CSS3: ,

, .
:
<ul>
<li class="internal"><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li class="internal"><a href="#">Stills/Photos</a></li>
<li class="internal"><a href="#">Videos/clips</a></li>
<li class="internal"><a href="#">Quotes</a></li>
<li class="internal"><a href="#">Quiz</a></li>
</ul>

, internal.
:
nav ul li.internal:nth-of-type(n+2) a {
color: #fe0208;
}

, CSS :
, <li> internal.
(.5.14).

.5.14. , internal

CSS3 , JQUERY!
jQuery, , 0. ,
jQuery 1,
. CSS3 1,
1 , .

(:not)
. , - . ,
, , :
nav ul li:not(.internal) a {
color: #fe0208;
}

5.5. CSS3-

171

,
internal.
.5.15.

.5.15. ,
internal

, (
http://www.w3.org/TR/selectors/#structural-pseudos). CSS3
. -,

(http://www.w3.org/TR/selectors/#UIstates).



CSS
2,
CSS
3 .
, , p:first-line
<p>, p:first-letter . CSS3
, . , p::firstletter. ,
Internet Explorer 8
, .
:first-line -? :first-line , -
. ,
:
p::first-line {
color: #ff0cff;
}

,
( (Moulin Rouge)) (.5.16).
(.5.17).

172

5. CSS3: ,

.5.16.

.5.17.

5.6. -

173

, ,
- ( , ,
, )
-, . .
, CSS3-
, -, .
JavaScript- jQuery,
, CSS3 . ,
, CSS3 Selectors W3C Recommendation
(REC). , ,
.

5.6. -
-.
, , text-indent .
. sIFR (http://www.mikeindustries.com/blog/sifr/) Cufn (http://
cufon.shoqolate.com/generate/) Flash JavaScript
, . -
,
. , CSS
,
.

CSS- @font-face
CSS- @font-face
CSS
2 ( CSS2.1 ).
Internet Explorer4 (, )! ,
CSS3?
, @font-face
CSS3 Fonts (http://www.w3.org/TR/css3-fonts). -
-
. , , . , Embedded OpenType (EOT)

Internet

Explorer
( ). TrueType (TTF), Scalable Vector Graphics (SVG) Web Open Font Format (WOFF).

174

5. CSS3: ,

@font-face
-, , .

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

-
@font-face
And the winner isnt CSS-
@font-face.
. -, , . Font Squirrel (www.fontsquirrel.com) (.5.18), Google
-, @font-face (www.google.com/
webfonts). Typekit (www.typekit.com) Font
Deck (www.fontdeck.com).

.5.18. Font Squirrel

5.6. -

175

, , , Font Squirrel (, !). Bebas Neue,


Bitstream Vera Sans Collaborate Thin. @font-face
Font Squirrel, ZIP- ,
(WOFF, TTF, EOT
SVG). , stylesheet.css,
. , Bebas Neue
:
@font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('BebasNeue-webfont.woff') format('woff'),
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

, , ( , , ) , . ,
, , ,
.
, , , . ,
ZIP- ,
fonts, ,
css. ,
, .
:
@font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/BebasNeue-webfont.eot');
src: url('../fonts/BebasNeue-webfont.eot?#iefix')
format('embedded-opentype'),
url('../fonts/BebasNeue-webfont.woff') format('woff'),
url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular')
format('svg');
font-weight: normal;
font-style: normal;
}

( ) . ,

176

5. CSS3: ,

Bebas Neue:
nav ul li a {
height: 42px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
font-family: 'BebasNeueRegular';
font-size: 1.875em; /*30 16 */
color: black;
}

. 5.19.
.

.5.19. Bebas Neue

.
, , .
, , , ,
. , EVERY YEAR 102, , = , , em:
#content h1 {
font-family: Arial, Helvetica, Verdana, sans-serif;
text-transform: uppercase;
font-family: 'BebasNeueRegular';
font-size: 6.375em; /* 102 16 */
}

font-family font-size Google


Chrome , .5.20 ( WOFF).
- , , . .5.21
, iPad2,
TTF iOS4.2 .

5.6. -

.5.20. Google Chrome

.5.21. iPad2

177

178

5. CSS3: ,

5.7.
CSS3- @font-face

, , @font-face.
-, ,
, @font-face. , (.5.22).

.5.22.

, :
<div class="intro">
<h1>Were Bridestone: <span>providing <b>beautiful</b> quality <i>natural</i>
stone products.</span></h1>

</div> <!-- intro: -->

CSS-:
.intro h1 {
font-family: CaudexBold, "Times New Roman", Times, serif;
font-size: 2.63636364em;
line-height: 1em;
}
.intro h1 span {
font-size: 0.545454545em;
font-family: CaudexRegular, "Times New Roman", Times, serif;
font-weight: normal;
}

@font-face,
, ,
(.5.23).

5.7. CSS3- @font-face

179

.5.23.

, , Were Bridestone .
, , !
, .
font-weight,
( 700) .
, font-weight
, @font-face . , CSS-:
.productIntro h1 {
font-family: CaudexBold, "Times New Roman", Times, serif;
font-weight: 400;
font-size: 2.63636364em;
line-height: 1em;
}

font-weight,
, , .5.24,
.
- -, @font-face. @font-face
.
, -, . ,
And the winner isnt Bebas Neue, Bitstream Vera Sans Collaborate Thin.
, , ,

180

5. CSS3: ,

SVG, 70
, -
Arial
. ! ,
.

.5.24. ,


?
CSS3 Fonts , (http://www.w3.org/TR/css3-values/#viewport-relative-lengths). vw (viewport width ), vh (viewport height
) vm (viewport minimum ;
vm , ) ,
. , ( Internet Explorer9).

5.8. CSS3
-

CSS
3- , . ,
CSS
3 .

5.8. CSS3 -

181


CSS
3 , RGB HSL. , CSS3
- ( RGBA HSLA).

RGB-
RGB
(
Red
,
Green
,
Blue
, , ) , .
, . , , And the
winner isnt,
CSS
#fe0208:
nav ul li:nth-child(odd) a {
color: #fe0208;
}

CSS3
RGB-:
nav ul li:nth-child(odd) a {
color: rgb(254, 2, 8);
}


, RGB-.
.5.25 Photoshop, R, G B .

.5.25. Photoshop

182

5. CSS3: ,

, R 254, G 2, B 8.
CSS- color.
CSS
(, RGB) , .

HSL-
CSS3 HSL (Hue, Saturation,
Lightness , , ).
HSL , HSB!
, HSB (Hue, Saturation, Brightness , , ), Photoshop, , HSL. !

HSL , ,
. ,
, , : rgb(255, 51, 204)?
? , .
HSL- hsl(315, 100%, 60%), ,
- (- , ). ?

HSL
360- . HSL-, , ,
60, 120, 240,
300 , , 360. ,
HSL- 315, , ( 300) ( 360).
,
. . ,
, 0%, , 100%, .
, HSL-,
, . ,

HSL-, :
nav ul li:nth-child(odd) a {
color: hsl(359, 99%, 50%);
}

5.8. CSS3 -

183

, ,
HSL
- ( ), ,
:
nav ul li:nth-child(odd) a:hover {
color: hsl(359, 99%, 40%);
}

, , Young Guys Can Be Messy Rascals ( Yellow (), Green


(), Cyan (), Blue (), Magenta (), Red ()) ( , , ,
) HSL,

HSL
, , . PHP .NET ,
!


Internet Explorer 6, 7 8
, , ,
RGB

HSL

Internet

Explorer
9. ,
Internet

Explorer
, RGB HSL.
, , ,
, , :
nav ul li:nth-child(odd) a {
color: #fe0208;
color: hsl(359, 99%, 50%);
}

-
, HSL RGB
, . HSL RGB
, - . , -
, .

184

5. CSS3: ,

And the winner isnt


.
body:
body {
background: url(../img/grunge.jpg) repeat;
}

<div> #wrapper (
). ,
, HSLA-,
:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* <div> */
max-width: 1414px;
background-color: hsla(0, 0%, 100%, 0.8);
}

HSLA HSL.
, , HSLA
( HSL) 0 ( ) 1 ( ).
, <div>
#wrapper . .5.26 ,
.
RGBA , HSLA-.
:
background-color: rgba(255, 255, 255, 0.8);

, , -
RGB

HSL
. ,
(, PNG GIF)
. , .
?
CSS3 .
0 1 (, ,
0.1, 10%). RGBA HSLA , , . RGBA HSLA
-. ,
HSLA, .

185

5.9.

.5.26.

CSS3 Color CSS3,


W3C Recommendation (REC). , CSS3 Selectors,
, , .

5.9.
, ,
, CSS3-.
,

URL- .

CSS
3
Colors
,
RGB

HSL
- . ,

186

5. CSS3: ,

@font-face, -,
.
, CSS3.
, CSS3 -
, ,
. , ,
,
.


CSS3


CSS
3-, -. , CSS3- @font-face
, CSS3-

DOM
. , ,
CSS
3, CSS3 , -,
CSS3-,
, - ,
.
CSS3, , :
;
;
;
;
CSS3 ;
CSS3- @font-face ,

.
,
CSS
3 , -: CSS3
HTTP (, ,
), .
- .
, CSS3- -,
, , .
, , .

188

6. CSS3


CSS3
- . ,
JavaScript,
-prefix-free. CSS-, , W3C-.
http://leaverou.github.com/prefixfree/.

6.1. ,
, CSS3
CSS3- text-shadow.
@font-face, CSS2,
CSS2.1. , (
Internet Explorer 9 ).
:
. {
text-shadow: 1px 1px 1px #cccccc;
}

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

,
HSL- RGB-
.
HSL(A) RGB(A):
text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);

,
HSL/RGB text-shadow,
. HSLA RGBA ( ),
:
text-shadow: 4px 4px 0px #404442;
text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);

6.1. , , CSS3

189

( ), ,
HSLA RGBA.

, em rem
text-shadow em rem. ,
, And the winner isnt (.6.1).

.6.1. And the winner isnt

Photoshop EVERY YEAR 102,


4. ,
= (4 102 = 0,039215686),
:
text-shadow: .039215686em .039215686em 0em #dad7d7; /* 4 102 */

190

6. CSS3

.6.2 , .

.6.2.

text-shadow em rem. , 1px 2px, , , .



, , , , ,
WHEN I WATCH THE OSCARS
IM ANNOYED ( , ). :
<h1>Every year <em>when I watch the Oscars I'm annoyed...</em></h1>

6.1. , , CSS3

191

text-shadow <h1> ( <em>), text-shadow <em>):


#content h1 em {
font-family: 'BitstreamVeraSansRoman';
display: block;
line-height: 1.052631579em; /* 40 38 */
color: #757474;
font-size: .352941176em; /* 36 102 */
text-shadow: none;
}

(.6.3).

.6.3. EVERY YEAR

. ,
. :
text-shadow: -4px -4px 0px #dad7d7;

192

6. CSS3

(.6.4).

.6.4.

, , :
text-shadow: -4px -4px #dad7d7;

,
.


, text-shadow .
(, ), .
:
nav ul li a {
height: 42px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
font-family: 'BebasNeueRegular';
font-size: 1.875em; /*30 16 */
color: #000000;
text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);
}

.6.5 . ,
.

.6.5.

, ,
1px 2px .

6.2. ,

193

,
, .
:
text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7;

, , .

. .6.6 , .

.6.6.

W3C text-shadow : http://


www.w3.org/TR/css3-text/#text-shadow.

6.2. ,

, , , , . ,
: , , :
box-shadow: 0px 3px 5px #444444;

, , . :
-ms-box-shadow: 0px 3px 5px #444444;
-moz-box-shadow: 0px 3px 5px #444444;
-webkit-box-shadow: 0px 3px 5px #444444;
box-shadow: 0px 3px 5px #444444;

box-shadow
And the winner isnt:
.sideBlock img {
max-width: 45%;
box-shadow: 0px 3px 5px #444444;
}

194

6. CSS3

.6.7 , .

.6.7.


box-shadow ,
, , ,
. , ,
. :
box-shadow:inset 0 0 40px #000000;

, inset
. <body>
. ,
:
body {
-moz-box-shadow:inset 0 0 30px #000000;

6.2. ,

195

-webkit-box-shadow:inset 0 0 30px #000000;


box-shadow:inset 0 0 30px #000000;
}

.6.8 , .

.6.8.


, . -
,
, . ,

196

6. CSS3

( ),
.
box-shadow: inset 0 0 30px hsl(0, 0%, 0%),
inset 0 0 70px hsla(0, 97%, 53%, 1);

body
(.6.9). , ,
!

.6.9.

, !
,
CSS
3 -

6.3.

197

.
, .

W3C box-shadow : http://


www.w3.org/TR/css3-background/#the-box-shadow.

6.3.

CSS
3, , - , , /.
, . .



And the winner isnt:
aside {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
padding-left: 1.5%;
padding-right: 1.0416667%;
margin-left: 1.0416667%;
float: left;
width: 20.7083333%;
background: url(../img/sidebarBg2.png) 50% repeat-x;
}

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

198

6. CSS3

, .
(.6.11).

.6.10.

.6.11.

, ,
. . CSS3-

6.3.

199

. CSS3 :
background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%,
#ffffff 100%);

.6.12 , .

.6.12.

200

6. CSS3

, (
,
), CSS3-
.
, , CSS3. , Internet Explorer9 (

Internet

Explorer
10). , . .

,
, .

,
.
WebKit, , , Safari5.1,
, Mozilla, ,
W3C.

. , .
() ( 90deg) -

, .
, ,
. , to top right,
, .
(#ffffff 0% ) -

, .
- blue 20%, 20%
.
, ,
. :
background: linear-gradient(90deg, #ffffff -50%, #e4e4e4 50%,
#ffffff 100%);

, 50%
, .
. , -

: 90

6.3.

201

(90deg), (#ffffff 0%) #e4e4e4


(-) 50% .
. , ( ),
.
(#ffffff 100% )

. ,
,
.

W3C :
http://dev.w3.org/csswg/css3-images/#linear-gradients.


CSS3 .
.
.
:
background: radial-gradient(center, ellipse cover, #ffffff 72%,
#dddddd 100%);

#content, (.6.13).

.6.13.

202

6. CSS3

? . , .
.
(background:), , ( ). .
center, -
25px 25px, 25
. :
background: radial-gradient(25px 25px, ellipse cover, #ffffff 72%,
#dddddd 100%);

(.6.14).

.6.14. 25 ,

,
:
background: radial-gradient(center, ellipse cover, #ffffff 72%,
#dddddd 100%);

, :
circle (
), ellipse ( ).
.
:
closest-side
( circle)
, (
ellipse);

6.3.

203

closest-corner

;
farthest-side closest-side , ,
,
(

ellipse);
farthest-corner
;
cover farthest-corner;
contain closest-side.
, ( , ).
, :
background: radial-gradient(20px 20px, circle cover,
hsla(9,69%,85%,0.5) 0%,
hsla(9,76%,63%,1) 50%,
hsla(10,98%,46%,1) 51%,
hsla(24,100%,50%,1) 75%,
hsla(10,100%,39%,1) 100%);

20 ,
circle HSL(A). .6.15.

.6.15.

, ,
CSS3
.

204

6. CSS3

W3C : http://dev.w3.org/csswg/css3-images/#radial-gradients.


CSS3
CSS3- , ,
- .
, http://www.colorzilla.com/gradient-editor/. ,
. , ,
( ) (HEX, RGB(A), HSL(A)) .
, .
, , , Internet Explorer9 ,

. ? ? , ,
.


CSS3 . ,
:
background: repeating-linear-gradient(90deg, #ffffff 0px,
hsla(0, 1%, 50%,0.1) 5px);

.6.16.
repeating linear-gradient
radial-gradient, ,
. ( 0px 5px), .
(, ) .
:
background: repeating-radial-gradient(2px 2px, ellipse,
hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px,
hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);

, . , cover, ,
. 20px, 20. body.
(.6.17)!

6.3.

205

.6.16.

W3C :
http://dev.w3.org/csswg/css3-images/#repeating-gradients.

, .

206

6. CSS3

.6.17. ,

6.4.

,
.
.
. , body, :
body {
background-color:white;
background-image:
radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,

6.4.

207

hsla(0, 0%, 87%, 0.31) 4px, transparent 5px,


transparent 20px, hsla(0, 0%, 87%, 0.31) 21px,
hsla(0, 0%, 87%, 0.31) 25px, transparent 26px,
transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
}

.6.18 , .

.6.18.

?
CSS
3-, , ,
, .
CSS (Lea Verou)
CSS, http://lea.verou.me/css3patterns/
(.6.19).

208

6. CSS3

.6.19. CSS Patterns Gallery

6.5. - CSS3
,
. , , (.6.20).

(, 768 ). ,
:
@media screen and (max-width: 768px) {
body {
background-color:white;
background-image:
radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,
hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px,
hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px,
transparent 26px, transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
}
}

6.5. - CSS3

209

.6.20. ,

, - . .
CSS3- CSS
CSS3- .

JavaScript- , CSS SASS LESS. , SASS Compass, box-shadow :
{ @include box-shadow; }. CSS-
Internet
Explorer ( ).
, , ,
if/while. SASS http://
sass-lang.com, LESS http://lesscss.org.

210

6. CSS3

6.6. CSS3-

CSS3-. THESE SHOULD HAVE WON
( ).
Photoshop
- And the winner isnt , 5. ,
. :
#content a {
text-decoration: none;
font: 2.25em /* 36px 16 */ 'BebasNeueRegular';
}

. , ,
. , ,
RGB HSL:
#content a {
text-decoration: none;
font: 2.25em /* 36px 16 */ 'BebasNeueRegular';
background-color: #b01c20;
}

. , , ,
CSS
3-, , .
:
#content a {
text-decoration: none;
font: 2.25em /* 36px 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
}

(.6.21).

.6.21.

(-, ,
, )
( ),
:

211

6.6. CSS3-

#content a {
text-decoration: none;
font: 2.25em /* 36px 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
color: white;
padding: 30px;
}

(.6.22).
,
float: left:
#content a {
text-decoration: none;
font: 2.25em /* 36px 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
color: white;
padding: 30px;
float: left;
background: linear-gradient(90deg, #b01c20 0%, #f15c60 100%);
}

(.6.23).

.6.22.

.6.23.

,
box-shadow:
#content a {
text-decoration: none;
font: 2.25em /* 36px 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
color: white;
padding: 30px;
float: left;
background: -moz-linear-gradient(90deg, #b01c20 0%,
#f15c60 100%);
margin-top: 30px;
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
}

212

6. CSS3

, (.6.24).
, Photoshop-,
, -
.
CSS
!
#content a {
text-decoration: none;
font: 2.25em /* 36px 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
color: white;
padding: 30px;
float: left;
background: -moz-linear-gradient(90deg, #b01c20 0%,
#f15c60 100%);
margin-top: 30px;
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
text-shadow: 0px 1px black;
border: 1px solid #bfbfbf;
}

Firefox8 (.6.25).

.6.24.

.6.25. -

,
(&raquo; HTML) Photoshop-
. ,
, , . :
<a href="#">these should have won <span>&raquo;</span></a>

, CSS- :
#content a span {
font-size: 1.3em;
}

,
(.6.26).

6.6. CSS3-

213

.6.26.

,
CSS3, , , ,
, (.6.27).

.6.27.

214

6. CSS3

6.7.

-,
, , . , ,
.
, ,
CSS
.
CSS
2.1 . ,
CSS3:
<body class="headerBackgroundHere">
<div class="footerBackground">
<div id="container">
<header>
//
</header>
<div id="main" role="main">
//
</div>
<footer>
//
</footer>
</div>
</div> <!--! .footerBackground -->
</body>

, ( <div>
container), , <div> footerBackground.

CSS
- <body>:
body {
background-image: url("../img/topSlice.png");
background-repeat: repeat-x;
}

, footerBackground.
.
.footerBackground {
background-image: url("../img/bottomSlice.png");
background-repeat: repeat-x;
background-position: bottom;
}

. , .

6.7.

215

, CSS3,
( CSS Backgrounds and Borders Module Level3). ,
Internet Explorer 8 . :
background:
url('../img/1.png'),
url('../img/2.png'),
url('../img/3.png');

, ,
, . , , :
background:
url('../img/1.png'),
url('../img/2.png'),
url('../img/3.png') left bottom, black;

, ,
.
,
(,
Internet

Explorer
8 ), . ,
background CSS3-
.

PHG
- , , , , . ,
.


backgroundsize.
:
background-size: 100% 50%, 300px 400px, auto;

( , )
, ,
background. ,
:
auto ;
cover ,
;
contain ,
, ,
.

216

6. CSS3


CSS3 .
:
background:
url('../img/1.png') center,
url('../img/2.png'),
url('../img/3.png') left bottom, black;

, , , , .


, . , . ,
, , .

W3C, , http://www.w3.org/TR/css3-background/#layering.
: http://www.w3.org/TR/
css3-background/#the-background-size.
http://www.w3.org/TR/
css3-background/#the-background-position.

6.8. CSS3-
, CSS3. , , ,
. , ,
-
. , , CSS3, ,
, .

6.9. ,
-
, CSS3. ,
. ,
- @font-face.

217

6.10.

? , .
, . ,
CSS3- @font-face
-? , @font-face,
, .
, @font-face
(
HTTP !). , , , -.
Fico, http://fico.lensco.be/.

.6.28. Fico

6.10.

CSS
3-.
CSS
3 , CSS3.

218

6. CSS3

. text-shadow box-shadow
.
-

CSS
3 . , .
CSS3 . ,
CSS3-,
, . , .
-
, ,

.
Internet

Explorer
, -.

CSS
3- ;
. CSS3 .

, CSS- ,
, .

CSS3-,


CSS
3. , , , CSS3 .
, -, , ,
JavaScript
-, ,
JavaScript- jQuery, .
, CSS3, JavaScript
, .

CSS
3
jQuery
- , (, ) .
, ,
, (, ), CSS
, JavaScript. : ,
,
jQuery , , ,
CSS. , CSS3- -
. , .
:
CSS3- ;
CSS3- ;

CSS3- (ease, cubic-bezier .);
;
CSS3- ;
2D- (scale, rotate, skew, translate .);
3D- ;
CSS3 ( @keyframes).

220

7. CSS3-,

7.1. CSS3-

CSS
,
. , ,
, .

, .
,
CSS
, /.
. CSS3, ,
.
CSS3 -
. CSS3-, (
):
#content a {
text-decoration: none;
font: 2.25em /* 36px 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
color: #ffffff;
padding: 3%;
float: left;
background: linear-gradient(90deg, #b01c20 0%, #f15c60 100%);
margin-top: 30px;
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
text-shadow: 0px 1px black;
border: 1px solid #bfbfbf;
}

:
#content a:hover {
border: 1px solid #000000;
color: #000000;
text-shadow: 0px 1px white;
}

. 7.1 , .
(.7.2).
,
. , , , , CSS-
( ) (

7.1. CSS3-

221

). /. CSS3 :
#content a {
/* */
transition: all 1s ease 0s;
}

.7.1.

.7.2.

, -, ,
. , ,
. , ,
, , . ,
,
. ?

,

, , :
transition-property CSS-,
(, background-color, text-shadow all

);
transition-duration , ( , 0.3s, 2s 1.5s);

222

7. CSS3-,

transition-timing-function , -

(,
ease, linear, ease-in, ease-out, ease-in-out cubic-bezier);
transition-delay

. , , ,
.
,
:
#content a {
...( )...
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}

transition
, :
transition: all 1s ease 0s;

,
transition-duration, transition-delay.
, . ,

:
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;

,
, .

. , background-gradient, , (
http://dev.w3.org/csswg/css3-transitions/) , .
, http://
www.w3.org/TR/css3-transitions/#properties-from-css-.

7.1. CSS3-

223



,
.
:
#content a {
...( )...
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}

, transition-property, ,
border, color text-shadow. , transition-duration, , border 2, color 3, text-shadow 8. ,
.



, , . , ( !)
. (, 2s), ,
. ease, linear, ease-in, ease-out, ease-in-out cubicbezier?
, , , .
, , , . http://cubic-bezier.com/ (.7.3).
,
. , (
-), ,
.

,
. , , , .
, , 5,
, :
! ,
-, (ease),
( , 1), .

224

7. CSS3-,

.7.3. ,



-, ,
, , . , ,
.

7.2. 2D- CSS3

225

http://css-tricks.com
(Chris Coyier), CSS-. , , , ,
. , ? - :
* {
transition: all 1s;
}

CSS- * ,
(all) 1 (1s).
, ease
, , , , . ? , (, ..) ,
. , ,
, .
? !
? !

7.2. 2D- CSS3


CSS- ( 2D-, 3D-) ,
CSS-, .
: , ,
. ( , )
:
-, . ,
() () - .
( , ), .
2D- And the
winner isnt:
nav ul li a:hover {
transform: scale(1.7);
}


(.7.4).

226

7. CSS3-,

.7.4.

, ,
1,7 .
Safari, ,
, . :
nav ul li a {
height: 42px;
text-decoration: none;
text-transform: uppercase;
color: black;
text-shadow: 0 1px 0 hsla(0, 0%, 100%, 1.0);
font: 1.875em/42px 'BebasNeueRegular';
display: block;
}

, , ,
.

?
CSS3-: 2D 3D. 2D-
, , ,
, . CSS3 2D Transforms
Module :
scale (

);
translate (, ,

);
rotate (

);
skew X Y;
matrix

7.2. 2D- CSS3

227

,
.

scale
. . , , 1,
(.7.5). :
transform: scale(0.5);

.7.5.

translate
transform: translate(40px, 0px);

translate
, , .
: ( 40
), ( 0 ,
). , ,
, . ,
40 ,
(.7.6).

.7.6.

228

7. CSS3-,

rotate
transform: rotate(90deg);
rotate . -

90 . .7.7
, .

.7.7.

(, 90deg).

, :
transform: rotate(3600deg);

. , ,
- ,
,
!

skew
-
Photoshop
, , skew. skew
.
transform: skew(10deg, 2deg);

(.7.8).

.7.8.

X (10deg ),
(2deg) Y. ,

7.2. 2D- CSS3

229

X ( ) .
:
transform: skew(10deg);

,
X. . , .

matrix
. ?
CSS3- matrix, ?
,
matrix :
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);

, (scale, rotate,
skew ..) .
(.7.9).

.7.9.

(
, ), , , . ,
, : http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface.
.
, , , .
, http://www.useragentman.com/matrix/ (.7.10).
Matrix Construction Set ,
,
( )
CSS-.

230

7. CSS3-,

.7.10.

transform-origin
transform-origin ,
:
transform: rotate(45deg);
transform-origin: 20% 20%;

,
(.7.11).

.7.11. 45

7.3. 3D- CSS3

231

transform-origin , . ,
, , .

transform-origin http://www.w3.org/
TR/css3-2d-transforms/#transform-origin-property.

2D-.
, 3
D
-.

2D-,
, .

CSS3 2D Transforms Module Level 3 http://


www.w3.org/TR/css3-2d-transforms/.

7.3.
3D- CSS3
3D- CSS3
WebKit (Safari Chrome) Firefox 10 , Internet
Explorer 10. ,
, 3D- CSS3
, Android
(3 ) iOS
( ), , WebKit.
WebKit, Chrome Safari ( , ,
,
3D-).
3D-.
3
D
- , . , ,
,
, , ,

JavaScript
-
jQuery
. , , 3D-.
, And the winner isnt . ,
,
(, ).

232

7. CSS3-,

( )
.
. ,
,
:
<section class="Qcontainer">
<div class="film">
<div class="face front">
<img src="img/goonies.jpg" alt="The Goonies" />
</div>
<div class="face back"><h5>HOT!</h5></div>
</div>
</section>

CSS-. WebKit
3D-,
. ,
.
.Qcontainer {
height: 100%;
width: 28%;
position: relative;
-webkit-perspective: 800;
float: left;
margin-right: 2%;
}
.film {
width: 100%;
height: 15em;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
.Qcontainer:hover .film {
-webkit-transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
}
.back {
width: 66%;
height: 127%;
-webkit-transform: rotateY(180deg);
background: #3b3b3b;
background: -webkit-linear-gradient(top,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 100%);
padding: 15%;
}

7.3. 3D- CSS3

233

, , HOT! (!) NOT! (!)


(.7.12).

.7.12.

3D-
, , .
-webkit-perspective . 3D-:
.Qcontainer {
height: 100%;
width: 28%;
position: relative;
-webkit-perspective: 200;
float: left;
margin-right: 2%;
}

234

7. CSS3-,

-webkit-perspective,
3
D
- . , 3D- ,
3D- .
, :
.film {
width: 100%;
height: 15em;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}

, .Qcontainer,
( div .film ).
,
preserve-3d.
div .film
.Qcontainer:
.Qcontainer:hover .film {
-webkit-transform: rotateY(180deg);
}

,
:
.face {
position: absolute;
-webkit-backface-visibility: hidden;
}

div .face
, div .back:
.back {
width: 66%;
height: 127%;
-webkit-transform: rotateY(180deg);
background: #3b3b3b;
background: -webkit-linear-gradient(top,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 100%);
padding: 15%;
}

, rotateY div .back.


div, , div .front.
. .

7.3. 3D- CSS3

235

,
WebKit
, (.7.13).

.7.13. , 3D-,

, ,

WebKit
,
CSS
-, :
.front {
z-index: 5;
}
.Qcontainer:hover .front {
z-index: 0;
}

z-index 5 div .front,


div .back:
.front {
z-index: 5;
}

236

7. CSS3-,

.Qcontainer
z-index 0, div .back:
.Qcontainer:hover .front {
z-index: 0;
}

/
, 3D-,
3D- (.7.14).

.7.14. , 3D-

3D-

, 3D-
(, ,
). , 3
D
- -

7.4. CSS3

237

. ,
3
D
- , - . -

jQuery
.
3D- CSS
, , ,
,
JavaScript, .

W3C 3D- CSS http://dev.w3.org/csswg/css3-3d-transforms/.

7.4. CSS3
- Flash,

CSS
3-.
CSS
3 , ,
Flash
- , .
, 3D-.
Firefox 5 , Chrome, Safari 4 , Android ( ),
iOS ( ), , Internet
Explorer10.
CSS3- : @keyframes,
animation. .
, .
, ,
.
@keyframes:
@keyframes warning {
0% {
text-shadow: 0px 0px 4px #000000;
}
50% {
text-shadow: 0 0 20px #000000;
}
100% {
text-shadow: 0px 0px 4px #000000;
}
}

238

7. CSS3-,

, , , , ,
( , , @-webkitkeyframes).
:
@keyframes warning {
0% {
text-shadow: 0px 0px 4px #000000;
}
50% {
text-shadow: 0 0 20px #000000;
}
100% {
text-shadow: 0px 0px 4px #000000;
}
}

@keyframes.
warning . @keyframes
, , ,
.
, (,
10, 20, 30, 40 ..), , ,
from to. ,
WebKit ( 0% 100%):
@keyframes warning {
from {
text-shadow: 0px 0px 4px #000000;
}
50% {
text-shadow: 0 0 40px #000000;
}
to {
text-shadow: 0 0 4px #000000;
}
}

text-shadow,
. 4px,
40px 50%.
, @keyframes, animation:
.back h5 {
font-size: 4em;
color: #f2050b;
text-align: center;
animation: warning 1.5s infinite ease-in;
}

7.4. CSS3

239

animation, @keyframes, (warning ),


animation-iteration-count ( infinite, -
) , ,
(ease-in). ,
, , , ,
. ,
http://www.andthewinnerisnt.com (.7.15).

.7.15.

.
, , animation-delay
(, , ), animation-play-state ( running paused,
) , ,
animation-fill-mode,
( none).

240

7. CSS3-,

, ,
, :
animation-name: warning;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 0s;
animation-fill-mode: none;

, . :
nav ul li a:hover {
animation: warning 1.5s infinite ease-in;
}

. , STILLS/PHOTOS .7.16
. http://www.andthewinnerisnt.com
.

.7.16.

CSS-.
, , ,

7.4. CSS3

241

, .

CSS3. http://webdesignerwall.com/
trends/47-amazing-css3-animation-demos
.

W3C CSS3-
http://dev.w3.org/csswg/css3-animations.

CSS3- .
, CSS3-.
<aside>
, . ,
-.
:
<aside>
<div role="complementary">
<div class="sideBlock unSung">
<h1>Unsung heroes...</h1>
<a href="#"><img src="img/midnightRun.jpg"
alt="Midnight Run" /></a>
<a href="#"><img src="img/wyattEarp.jpg"
alt="Wyatt Earp" /></a>
</div>
</div>
<div role="complementary">
<div class="sideBlock overHyped">
<h1>Overhyped nonsense...</h1>
<a href="#"><img src="img/moulinRouge.jpg"
alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong.jpg"
alt="King Kong" /></a>
</div>
</div>
</aside>

CSS3-, .
@keyframe swing:
@-webkit-keyframes swing {
from {
transform: rotate(3deg);
}
20% {
transform: rotate(7deg);
}
60% {
transform: rotate(10deg);
}

242

7. CSS3-,

80% {
transform: rotate(7deg);
}
to {
transform: rotate(3deg);
}
}

2D- rotate 3 10 .
animation:
#quiz .unSung a:nth-child(odd) img {
transform: rotate(3deg);
animation: swing 0.1s 5 ease-in;
}
#quiz .unSung a:nth-child(even) img {
transform: rotate(-3deg);
animation: swing 0.1s 5 0.3s ease-in;
}
#quiz .overHyped a:nth-child(odd) img {
transform: rotate(3deg);
animation: swing 0.1s 5 0.2s ease-in;
}
#quiz .overHyped a:nth-child(even) img {
transform: rotate(-3deg);
animation: swing 0.1s 5 0.5s ease-in;
}

. , CSS,
( <body id="quiz">).
animation rotate,
, , . ,
, nth-child,
5,
:
#quiz .unSung a:nth-child(odd) img {
transform: rotate(3deg);
animation: swing 0.1s 5 ease-in;
}
#quiz .unSung a:nth-child(even) img {
transform: rotate(-3deg);
animation: swing 0.1s 5 0.3s ease-in;
}
#quiz .overHyped a:nth-child(odd) img {
transform: rotate(3deg);
animation: swing 0.1s 5 0.2s ease-in;
}
#quiz .overHyped a:nth-child(even) img {

7.4. CSS3

243

transform: rotate(-3deg);
animation: swing 0.1s 5 0.5s ease-in;
}

animation .
. , (0.5s) . ,
.
#quiz .overHyped a:nth-child(even) img {
transform: rotate(-3deg);
animation: swing 0.1s 5 0.5s ease-in;
}

-, , , .
, , ,
, , , ,
.7.17.

.7.17. , !

244

7. CSS3-,

7.5.

CSS
-, . ,
. CSS3
- ,
- , , JavaScript
. ,
CSS3- , , ease linear,
,
-. 2
D
-, scale skew, ,
. , 3D-,
CSS-. ,
CSS3- !
,
( ,
-, ), .
, . , ,
HTML
5
CSS
3 , (, !) , -
. . ,
. .


HTML5
CSS3

,
. ,
JavaScript
, , URL-.
, HTML5
. ,
HTML5-, , .
HTML5, :
;
;

;
, ,
, URL-;
;
;
,
;
,
;
CSS3 .

8.1. HTML5-
: - And the winner isnt,
, , . ,

246

8. HTML5 CSS3

, , ,
, ,
.
.8.1 ,
Chrome ( 16).

.8.1. And the winner isnt

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

247

8.1. HTML5-

Chrome , ,
(.8.2).

.8.2.

, , ( , ),
.
, ,
JavaScript-.
, ( ,
, ) HTML5 JavaScript. ,
HTML5 .

248

8. HTML5 CSS3

HTML5-
, HTML5, ,
. , HTML5- <hgroup> :
<form id="redemption" method="post">
<hgroup>
<h1>Oscar Redemption</h1>
<h2>Here's your chance to set the record straight: tell us what year the wrong
film got nominated, and which film <b>should</b> have received a nod...</h2>
</hgroup>

<fieldset>,
<legend>:
<fieldset>
<legend>About the offending film (part 1 of 3)</legend>
<div>
<label for="film">The film in question?</label>
<input id="film" name="film" type="text" placeholder="e.g. King Kong" required
aria-required="true" >
</div>

, <input>
<div> . .
<input> ,
HTML5-. id, name type placeholder.

placeholder
placeholder :
placeholder="e.g. King Kong"

, , HTML5-, ,
. placeholder
<input>, , . , ,
.
placeholder , HTML5-, required.

required
required :
required aria-required="true"

HTML5
required <input> , -

249

8.1. HTML5-

. ,
, . ( ) . HTML5- required, WAI-ARIA aria-required="true".
-,
required, ( , WAI-ARIA 4).
,
Chrome. .8.3 ,
Firefox (9).

.8.3. Firefox9

250

8. HTML5 CSS3

required
, . range, color, button hidden,
.
HTML5- ,
<input>, autofocus.

autofocus
HTML5- autofocus ,
( ),
. <input>,
<div> autofocus:
<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp" autofocus>
</div>

, . , autofocus
. , <input>
autofocus, Chrome (16)
, . Firefox (9)
, , ,
autofocus.
, - . -, , autofocus, .
. ,
.

autocomplete
,

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

8.1. HTML5-

251

, off autocomplete
.
, autocomplete off.
<div>
<label for="tel">Telephone (so we can berate you if you're wrong)</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off"
required aria-required="true" >
</div>

,
( , <fieldset>),
autocomplete . :
<form id="redemption" method="post" autocomplete="off">

list ( <datalist>)
list <datalist>
, . ,
list <datalist>,
<div>:
<div>
<label for="awardWon">Award Won</label>
<input id="awardWon" name="awardWon" type="text" list="awards">
<datalist id="awards">
<select>
<option value="Best Picture"></option>
<option value="Best Director"></option>
<option value="Best Adapted Screenplay"></option>
<option value="Best Original Screenplay"></option>
</select>
</datalist>
</div>

, list (awards),
<datalist>. <datalist>
. <option> <selection> , , .
,
, (
) <datalist>. .8.4
( Firefox9). B
<datalist>, ,
.

252

8. HTML5 CSS3

.8.4.

D, (.8.5).

.8.5. , D

-
,
.

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

email
, type="email", , , . type="email" required placeholder:
<div>
<label for="email">Your Email address</label>
<input id="email" name="email" type="email" placeholder=
"dwight.schultz@gmail.com" required aria-required="true">
</div>

type="email" required,
, , (.8.6).

253

8.1. HTML5-

.8.6.

, (, Android,
iPhone ..)
. .8.7 , iPad
type="email". @, .

.8.7. iPad type="email"

254

8. HTML5 CSS3

number
, type="number", ,
. , ,
,
/. :
<div>
<label for="yearOfCrime">Year Of Crime</label>
<input id="yearOfCrime" name="yearOfCrime" type="number" min="1929" max="2015"
required aria-required="true" >
</div>

.8.8 ,
(Chrome16).

.8.8.

, , , .
, Chrome (16) , ,
,
Firefox
(9) (
). , , :
type="number" min="1929" max="2015"

, , ( )
. . ,
Chrome (16) , Firefox (9)
.

url
, , , type="url" URL-. , tel email, , .
,
. ,
placeholder:
<div>
<label for="web">Your Web address</label>
<input id="web" name="web" type="url" placeholder="www.mysite.com">
</div>

255

8.1. HTML5-

.8.9 , ,
URL
-,
Chrome
(16).

.8.9.

type="email",

. .8.10 ,
iPad
type="url".

.8.10. iPad type=url

256

8. HTML5 CSS3

Go, (/) .com?


url,
URL- ( ,
.com, , , Apple ).

tel
type="tel" ,
. tel , ,

.
:
<div>
<label for="tel">Telephone (so we can berate you if you're wrong)</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off"
required aria-required="true" >
</div>

,
, , Chrome16 Firefox9,
.
.
, email url, tel,

. .8.11
tel
iPad
( iOS5).
,
?
.

search
type="search" , , - . :
<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp">
</div>

.8.12 ,

Firefox
(9). , .
Chrome (16)

(.8.13).

257

8.1. HTML5-

.8.11. tel iPad

.8.12. Firefox

.8.13. Chrome

258

8. HTML5 CSS3

pattern
pattern="", : , (, ?). ,
. ,
, , .
, , , .

(The Exorcist) , , , , , , .
http://en.wikipedia.org/wiki/Regular_expressions.

pattern
, .
:
<div>
<label for="name">Your Name (first and last)</label>
<input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zAZ]{3,30}"
placeholder="Dwight Schultz" required ariarequired="true" >
</div>

458
, . pattern,
. , required

. ,
(.8.14).

.8.14.

color
type="color" ,
. :
<div>
<label for="color">Your favorite color</label>
<input id="color" name="color" type="color">
</div>

,
color. , Opera (11)

259

8.1. HTML5-

. , ,
Other (), ,
(.8.15).

.8.15.

date time
, date time . -
, , , ,
,
.
JavaScript
(
jQuery
), , HTML5-.

date
:
<input id="date" type="date" name="date" />

color,
date, .
Opera , .8.16 ,

Opera
(11) .

.8.16. Opera

260

8. HTML5 CSS3

date time.
.

month
:
<input id="month" type="month" name="month">

,
, 2012-06.
.8.17 , .

.8.17.

week
:
<input id="week" type="week" name="week">

week - ,
, , 2012-W47.
.8.18 , .

.8.18.

261

8.1. HTML5-

time
:
<input id="time" type="time" name="time">

, time, 24-
, 23:50.
, , (.8.19).

.8.19.

datetime datetime-local
:
<input id="datetime" type="datetime" name="datetime">

.8.20 ,
Opera (11).

.8.20. ( )

iOS
, .8.21.
datetime
( T), ( Z UTC
(Universal Coordinated Time )
+ , ). 25 2009
UTC :
2009-10-25T05:05:00Z

UTC GMT (Greenwich Mean


Time ), .

262

8. HTML5 CSS3

, (-) 8
GMT (UTC8). ,
:
2009-10-25T05:05:00-8:00

.8.21. iPad

datetime-local , datetime,
.

263

8.1. HTML5-


, , (
), step. , 4
, 4 14400
(60() 60() 4()). datetime,
4- :

<input id="datetime" type="datetime" name="datetime" step="14400">

range
range , .
:
<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5" >

.8.22 ,
Safari
(5.1).

.8.22. Safari

0 100. , min max


, , 1 10.
,
range, ,
.
, , . HTML5
.
, , , JavaScript-.
:
<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10"value="5"
onchange="showValue(this.value)"><span id="range">5</span>

onchange <span> range.


JavaScript-:
<script>
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>

264

8. HTML5 CSS3

, ,
range ( <span>).

CSS
-, . .8.23 ,
.

.8.23.

HTML5 , , , , . W3C HTML5-


: http://dev.w3.org/html5/spec-author-view/forms.html#forms.

8.2.
,

HTML
5- , , . , , -, : ,
. ,
, , . , , - .
4 Modernizr (http://www.modernizr.com)
JavaScript-, , HTML5/CSS3. Webshims
Lib, (Alexander Farkas) (http://afarkas.github.
com/webshim/demos/), Modernizr
jQuery
, (
,
HTML
5-) , , ,

HTML
5-. Webshims Lib Modernizr,
, .
-, ,
HTML5-.
( ), ,

8.2. ,

265


JavaScript.
Webshims Lib , . ,
, HTML5-. Webshims Lib
-,
. , Safari (5.1)
,
HTML
5-, - . ,
,
. , - Webshims Lib (.8.24).

.8.24.

, Firefox (9)
, , type="number", Webshims Lib ,
jQuery
. Webshims Lib ,
, .
HTML5-, ,
, (
,
Internet

Explorer
6 JavaScript).
Webshims Lib (http://github.com/aFarkas/
webshim/downloads) . js-webshim , -. .
<head> :
<script src="js/jquery-1.7.1.js"></script>
<script src="js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//
$.webshims.polyfill();
</script>

. jQuery ( www.jquery.com):
<script src="js/jquery-1.7.1.js"></script>

266

8. HTML5 CSS3

JavaScript- modernizr-custom.js
polyfiller.js, Webshims Lib:
<script src="js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>

, :
<script>
//
$.webshims.polyfill();
</script>

. . !

8.3. HTML5-
CSS3
, ,
, , CSS3 .
, , .
, :
#redemption {
width: 100%;
font-family: 'ColaborateThinRegular';
font-weight: 400;
}
#redemption hgroup {
margin-bottom: 20px;
}
#redemption div {
width: 100%;
margin-bottom: 15px;
float: left;
}
#redemption span#range {
float: left;
font-size: 3em;
width: 100%;
color: red;
clear: both;
text-align: center;
}
#howYouRateThis,#yearOfCrime {

8.3. HTML5- CSS3

text-align: right;
}
#redemption legend {
font-style: italic;
color: #434242;
font-size: 0.8em;
margin-bottom: 20px;
float: left;
width: 100%;
}
#redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
margin-bottom: 20px;
}
#redemption label {
width: 40%;
float: left;
}
#redemption input {
height: 20px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption textarea {
height: 60px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption input#submit {
text-decoration: none;
height: 34px;
font: 1.25em /* 36px 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
color: white;
float: right;
margin-bottom: 10px;
background: linear-gradient(top, rgb(241,92,96) 0%, rgb(176,28,32) 100%);
margin-top: 10px;
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
text-shadow: 0px 1px black;
border: 1px solid #bfbfbf;
}
.polyfill-important .input-range,.polyfill-important .step-controls {
float: right;
}

267

268

8. HTML5 CSS3

.polyfill-important .step-controls {
margin-right: -20px!important;
}

, , .
, fieldset .
CSS- fieldset:
#redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
margin-bottom: 20px;
background: #ffffff;
background: linear-gradient(top, #ffffff 77%,#f2f2f2 100%);
border-radius: 4px;
box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.3);
}

border-radius background ,
box-shadow , .
,
CSS3- .
.8.25 , Chrome.

.8.25.

8.3. HTML5- CSS3

269


, - .
, , , red, ,
RGB HSL-. . , , .

.
. CSS3-:
input, textarea, select {
border: 1px solid #bfbfbf;
padding: 0.2em;
font-size: 1.1em;
line-height: 1.2em;
background: #ffffff;
background: linear-gradient(top, #ffffff 0%,#ededed 8%,#ffffff 100%);
border-radius: 4px;
box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.1);
}

- background , border-radius box-shadow , . .8.26 ,


Chrome.

.8.26. ,

270

8. HTML5 CSS3

, -. . , . , ,
CSS3- :
input:not([type="range"]), textarea, select{
/* */
}

:not, , ,
type="range". Chrome (.8.27).

.8.27. ,

! , CSS3
,
, .
CSS3, .

CSS
3-, , :
input:required , ;
input:focus:invalid , ;
input:focus:valid ,
.

8.3. HTML5- CSS3

271

,
, :
input:required {
border: 1px solid rgba(253, 8, 8, 0.29);
}
input:focus:invalid {
background: url('../img/cross.png') no-repeat right;
padding-right: 3px;
}
input:focus:valid {
background: url('../img/tick.png') no-repeat right;
padding-right: 3px;
}

,
, , , ,
, .
.8.28 , (Firefox9),
.

.8.28. ,

, ( ) , (
) (.8.29).

.8.29.

272

8. HTML5 CSS3

, (.8.30).

.8.30.


CSS
3 , ,
, .

8.4.
HTML5- .
,
- , . , , ,

HTML
5-, . JavaScript-,
, .
-
HTML
5
CSS
3. And the winner isnt
- .
?
, ?
( ),
-, HTML5
CSS3.
.

;
-

Internet Explorer;
Modernizr CSS- -

JavaScript;

(Retina).
, ,
.
.
, ( )
.
, .
, , ,
.
,
, .
CSS
3- ( 2) ,
.

274

9. -

( 3),
. ,
, .
, 4
HTML5. ,
, , ,
. ,
WAI-ARIA,
.
5 6 CSS3,
RGBA HSLA, ,
, , , .., , CSS3.
, CSS-
(DOM) ,

JavaScript
.
CSS
3 . , Flash
JavaScript (.5)
(.7) . ,
, 3D- CSS3.
, 8
, ,
,
HTML5-. ,
JavaScript
-, , ,
Internet

Explorer
6, 7 8.
, HTML CSS3,
And the winner isnt
, http://www.andthewinnerisnt.com.
.9.1 ,
iPhone.
.9.2 ,
iPad.
.9.3 , Android ().
.9.4 , (Google Chrome16).

9. -

.9.1. And the winner isnt iPhone

.9.2. And the winner isnt iPad

275

276

9. -

.9.3. And the winner isnt Android

.9.4. And the winner isnt Google Chrome16

9.1.

277

, .9.5 , Internet Explorer8.

.9.5. And the winner isnt Internet Explorer8

, !
Internet Explorer8,
, <aside>, <header>, <nav> <footer>,
- .

9.1.

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

278

9. -

,
(, !).

. ,
-, (
, JavaScript CSS).

CSS- JavaScript ( ).

.
Opera http://dev.opera.com/articles/view/graceful-degradation-progressiveenhancement/, - (Aaron Gustafson), http://www.alistapart.com/
articles/understandingprogressiveenhancement.
. - .
, , , , , .
?
www.andthewinnerisnt.com, ,
HTML5. , Internet Explorer 6, 7 8
( Internet
Explorer), HTML5 (,
, ,
). , <aside>, <section> <footer>. , , , HTML5-.
, ,
JavaScript-, ?
, HTML5 HTML4.01,
-. ,
, ,

HTML
5 , . ( , , )

HTML
5-, ( http://validator.nu/ http://validator.w3.org/ ).
,
, , Internet Explorer. ,
border-radius. ,
,

9.2. , Internet Explorer? 279

9.2. ,

Internet Explorer?
, :

HTML
5-
CSS
3- , , , JavaScript
, .
, , . -
, !
, , ( ) ,
CSS-, Internet Explorer,
,
,
!
, ?

, 1. , , , 2010 2011 ( Global Stats


http://gs.statcounter.com) ( 2,86 7,02%),

Internet

Explorer
7 ( 5,45%). 2011 : Internet Explorer7
4%, Internet Explorer6 1,78%.
8,04%.
,
2011 Google Chrome
( 15 16) 25,7% . ,
Safari
(4,3%,
iOS
-)
Firefox
(21,01%), , ,
, . ,
!
: Internet Explorer (6, 7 8)
, ( , ) .

280

9. -


Internet
Explorer (9 ),
(
Internet

Explorer
8). , , ,
,
.
, , , , ,
,
Internet

Explorer
7. , , , ,
, .., . , ,
( )
.

, , Chrome, Safari Firefox, - HTML5 CSS3.
, Android
iOS, Safari Chrome, WebKit
, . Internet Explorer , , ,
, (
Internet Explorer , ). IE Tester (http://www.my-debugbar.com/wiki/IETester/HomePage)
, Internet
Explorer . ,
Smashing Magazine
, : http://www.smashingmagazine.com/2011/08/07/a-dozencrossbrowser-testing-tools/.

, : ,
www.andthewinnerisnt.com, Internet Explorer8,
, , .
JavaScript- Modernizr ,
Internet Explorer.
, Internet Explorer ,
, . , ,
, Modernizr.

9.3. Modernizr

281

9.3. Modernizr

- -
.
Modernizr 4 8. , Modernizr

JavaScript
- , . (Fauk
Ate ) , Modernizr
(Alex Sexton)
(Paul Irish), . Modernizr Twitter, Microsoft
Google. , Modernizr ( , , ),
, , ,
JavaScript
-. , , .
Modernizr? , ?

Modernizr
HTML5- ( )
HTML5-, <aside>
<section>, HTML5 Internet Explorer 8
. Modernizr
. ,

HTML
5-
CSS
3-. , ,
. . ,
Modernizr .
Modernizr ( http://www.modernizr.com).

MODERNIZR
?
, , Modernizr
(.9.6), /.
, ,
-, ,
.

282

9. -

.9.6. Modernizr

( , js).
<head> :
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initialscale=1.0,maximum-scale=1"
/>
<title>And the winner isn't</title>
<link href="css/main.css" rel="stylesheet" />
<script src="js/modernizr.js"></script>
</head>

, Modernizr, Firebug
- , , <html>.
Firefox9.01:
<html class=" js flexbox geolocation postmessage indexeddb history websockets rgba
hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients no-cssreflections csstransforms
no-csstransforms3d csstransitions fontface generatedcontent video audio localStorage
sessionstorage applicationcache" lang="en">

.
, ( , no-). -

9.3. Modernizr

283

CSS-,
CSS- JavaScript-
.


Modernizr
And the winner isnt Modernizr .
( http://www.andthewinnerisnt.com/3Dquiz.html)
, 3D- ( Safari

Chrome
), 3D-. , ,
3D-,
: This page relies on 3D transforms. If the
posters dont flip on hover, try viewing in Safari or Chrome (
3D-.
, Safari
Chrome).
Modernizr
, ,
3D-.
.note {
display: none;
}
.no-csstransforms3d .note {
display: block;
}

:
CSS
-, :
.note {
display: none;
}

, , 3
D
-
CSS
(, Google Chrome16), (.9.7).
, , ,
Modernizr, ,
3D-:
.no-csstransforms3d .note {
display: block;
}

.9.8 , Firefox9.

284

9. -

.9.7. , 3D-

.9.8. , Firefox 3D-

9.3. Modernizr

285

Modernizr ,
, , .

Modernizr
HTML5-
Internet Explorer
Modernizr,
HTML5-, - Internet
Explorer8 , (.9.9).

.9.9. Internet Explorer8

- . JavaScript-
Modernizr
HTML
5- Internet Explorer, CSS-
, .
, . ,
, - . , Internet Explorer8 CSS3, ,
- , . ,
(

286

9. -

, ), ,
. , , , ,
, CSS3 ,
.
Internet
Explorer 6, 7 8.
, ,
Modernizr,
. min-width max-width,
Internet
Explorer 6, 7 8.

min-width
max-width Internet Explorer 6, 7 8
, Internet Explorer,
min-width max-width. ,
, - (Scott Jehl)
Respond.js, ,
.
Respond.js (https://github.com/scottjehl/Respond)
Modernizr
, ,
Internet

Explorer
.
, , Respond.js Modernizer, .
Respond.js ( Modernizer,
) ,
Internet Explorer. ,
<head>:
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initialscale=1.0,maximum-scale=1"
/>
<title>And the winner isn't</title>
<link href="css/main.css" rel="stylesheet" />
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
</head>

Internet Explorer8
, -
(.9.10).

9.3. Modernizr

287

.9.10. -

, ,
min-width max-width Internet Explorer, :
,
, . , Internet
Explorer, :
<!--[if lte IE 8]>
<script src="js/respond.min.js"/></script>
<![endif]-->

, .
CSS- JavaScript-
( ),

Internet

Explorer
. .
: ( lte less than or equal) Internet Explorer8
( IE 8), .

288

9. -


, URL-
: http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx.

.
, Internet Explorer?
? Modernizr .

Modernizr
- , Modernizr ,
( CSS-, JavaScript-). , ,
, ( , ),
, . .
, Modernizr <head> ,
Respond.js
,
CSS
3- (, Internet Explorer 6, 7 8).
Modernizr JavaScript- YepNope.js
(http://yepnopejs.com/). :
Modernizr.load({
test: Modernizr.mq('only all'),
nope: 'js/respond.min.js'
});

Modernizr, :
Modernizr.load({

,
. , :
test: Modernizr.mq('only all'),

, ,
respond.min.js:
nope: 'js/respond.min.js'

only all ?. Internet Explorer


, nope , , . respond.min.js .

9.3. Modernizr

289

:
Modernizr.load({
test: Modernizr.mq('only all'),
nope: ['js/respond.min.js', 'css/extra.css']
});

respond.min.js extra.css . CSS- ,


,
. ,
:
Modernizr.load({
test: Modernizr.mq('only all'),
yep: 'js/pass.js',
nope: 'js/respond.min.js'['fail-polyfill.js', 'fail.css'],
both: 'js/for-all.js'
});

, , ( ), , ,
.
JavaScript. conditional.js
js modernizr.js respond.min.js. , <head>
, :
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initialscale=1.0,maximum-scale=1"
/>
<title>And the winner isn't</title>
<link href="css/main.css" rel="stylesheet" />
<script src="js/modernizr.js"></script>
<script src="js/conditional.js"></script>
</head>

, respond.min.js <head>,
.


Modernizr http://www.modernizr.com/docs/#load.


, Github :
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills.

290

9. -

9.4.

()
- ,
, ,
.
, And the
winner isnt, , (.9.11).

.9.11.

9.4. ()

291

,
,
. JavaScript-
.
, (http://css-tricks.com/convertmenu-to-dropdown/).
, .
. .9.12 ,
.

.9.12.

Select a page ( )
, .9.13.

292

9. -

.9.13. ,

. ,
, . , . Responsive Menu (https://
github.com/mattkersley/Responsive-Menu). ,
(jquery.mobilemenu.js) js. :
<nav role="navigation">
<ul id="mainNav">
<li><a href="why.html">Why?</a></li>
<li><a href="offline.html">Offline</a></li>
<li><a href="redemption.html">Redemption</a></li>
<li><a href="video.html">Videos/clips</a></li>

9.4. ()

293

<li><a href="quotes.html">Quotes</a></li>
<li><a href="3Dquiz.html">Quiz</a></li>
</ul>
</nav>

, jQuery-
, , .
conditional.js :
Modernizr.load([
{
test: Modernizr.mq('only all'),
nope: 'js/respond.min.js'
},
{
// , max-width 600px;
test: Modernizr.mq('only screen and (max-width: 600px)'),
yep : ['js/jquery-1.7.1.js', 'js/jquery.mobilemenu.js'],
complete : function () {
// ,
// ,
$(document).ready(function(){
$('#mainNav').mobileMenu({
switchWidth: 600,
// ,
//
//
topOptionText: 'Select a page', //
indentString: '&nbsp;&nbsp;&nbsp;' //
//
});
});
}
}
]);

, Respond.js
Internet Explorer, :
test: Modernizr.mq('only screen and (max-width: 600px)'),

, , ,
600.
yep : ['js/jquery-1.7.1.js', 'js/jquery.mobilemenu.js'],

jQuery,
Responsive Menu:
complete : function () {

294

9. -

complete , , , :
$(document).ready(function(){

});

$('#mainNav').mobileMenu({
switchWidth: 600, // ,

topOptionText: 'Select a page',
//
indentString: '&nbsp;&nbsp;&nbsp;' //
//
});

Responsive Menu. , ( , 600).


- Modernizr
,
,
, .
, JavaScript, Modernizr
. , , , ,
.

9.5.
()
.
.
. iPhone4 ,
. 960 640 326
, (iPhone 3GS).
, , , MacBook Pro 2011 15.
, iPhone
.
,
.
, , , , . , ,
http://www.benfrain.com. , :

9.5. ()

295

<div class="logo">
<a href="http://benfrain.com/"></a>
</div>

CSS-, :
#container header[role="banner"] .logo a {
background-image: url("../img/logo2.png");
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 7em;
margin-top: 10px;
}

, .9.14.

.9.14. .

, ,
. ( ,
), ' , ,

296

9. -

logo2@x2.png logo2Over@x2.png. CSS- :


@media all and (-webkit-min-device-pixel-ratio : 1.5) {
#container header[role="banner"] .logo a {
background-image: url("../img/logo2@x2.png");
}
#container header[role="banner"] .logo a:hover {
background-image: url("../img/logo2Over@x2.png");
}
}

, min-devicepixel-ratio 1.5. , ,

iPhone
4 , . ,
webkit-. , , .
, .9.15.

.9.15. .

9.6.

297

,
. ,
. , ,
,
.
, .
, , ,
, - , ,
.
Scalable Vector Graphics (SVG) ( ), , .
, ,
.
SVG
, . ,
JavaScript.

9.6.
, .
Internet Explorer, - .
, Modernizr CSS- JavaScript
,
, ,
.
, ,
CSS
3 ,
.
( ),
, ,
- -.
, -,
HTML5 CSS3,
. , ,
- ,
, , .

298

9. -


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


HTML5 CSS3.

.


.

.

.

. , .

.

, 192102, -, . (. ), 3, , . 7.
005-93, 2; 95 3005 .
09.08.13. 70100/16. . . . 24,510. 2000. 0000.

. 180004, , . , 34.

?
!
?
?
? ,

?
!


!

www.piter.com/ePartners

www.piter.com,
,

( www.piter.com)
!
.
10% ,
, - c
. ,
, 5%
.
, , 500 ,
. Web.Money.
:
http://www.piter.com/book.phtml?978538800282
http://www.piter.com/book.phtml?978538800282&refer=0000
, 0000


WWW.PITER.COM


:
: www.piter.com
: postbook@piter.com
: (812) 7037374
: 197198, , / 127,
ICQ: 413763617

:

.
.
,
.
. : . Web-money USD
E-Gold, MoneyMail, INOCard, RBK Money (RuPay), USD Bets, Mobile Wallet
.
, ,
.
.
.
e-mail.

:
, , , , , e mail;
, , , , , ,
, ;
, , .

O'REILLY
.
- PHP, MySQL,
JavaScript CSS. 2-

560 ., 16,523,3

-,
.
HTML, :
PHP, MySQL, JavaScript CSS. , ,
-. ,
, .

O'REILLY
.
PHP MySQL.
CSS JavaScript,
- PHP MySQL.
. ,
,
512 ., 16,523,3 , -. PHP-
- PHP SQL
-,
,

,
.