Html5 и Css3 Разработка Сайтов Для Любых Браузеров и Устройств

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> 
</div> 
,
:
#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> 
</div> 
, 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;
}
}
body {
background-color: orange;
}
}
body {
background-color: yellow;
}
}
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
-, :
<head>
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
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, :
#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. :
#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 {
line-height: 60px;
font-size: 40px;
}
#content, #sidebar {
margin-top: 20px;
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;
}
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">
<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-left: 10px;
3.3.
83
width: 940px;
#navigation ul li {
}
#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;
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 {
margin-top: 26px;
margin-left: -10px;
padding-left: 10px;
width: 72.7083333%; /* 698 960 */
}
#navigation ul li {
}
#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 {
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-image: url(../img/atwiNavBg.png);
border-bottom-color: #bfbfbf;
border-bottom-style: double; border-bottom-width: 4px;
}
#navigation ul li {
}
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%. , , :
height: 42px;
line-height: 42px;
margin-right: 2.6595745%; /* 25 940 */
font-size: 27px;
color: black;
}
! , (.3.4)
90
3.
.3.4.
, , . ,
, ,
. ,

( = ), .
. :
<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 {
margin-right: 2.6595745%; /* 25 940 */
}
height: 42px;
line-height: 42px;
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;
font-size: 48px;
}
#logo span { color: #dfdada; }
94
3.
, 4816=3. , :
#logo {
display: block;
padding-top: 75px;
color: #0d0c0c;
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;
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> , :
<head>
<title>And the winner isnt</title>
<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; }
}
}
}
, ,

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
.
:
<head>
<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>
<ul>
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 »</a>

</div>

<div id="sidebar">
<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>
<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.
<head>
<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>
</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>
</div>
</div>

<div id="sidebar" class="col_3">
112
3.

<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
</div>
</div>
</div>
</div>

<div id="footer" class="row">
are right. Thats a fact. Deal with it.</p>
</div>
</div>
</body>
</html>
, custom.css . :
#navigation ul li {
}
#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-
-. ,
:
<head>
:
<!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.
, .
, :
,
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>
<ul>
</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 name="viewport" content="width=device-width,initial-scale=1.0"
/>
<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>
</ul>
</nav>
</header>

4.4. HTML5
127
<div id="content">
<h1>Every year <span>when I watch the Oscars Im annoyed...</span></h1>
<p>Were here to put things right. </p>
</div>

<div id="sidebar">
<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt
Earp" /></a>
</div>
</div>
</div>

<footer>
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>
<nav>
<ul>
</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">
Earp" /></a>
</div>
</div>
</div>
, , , <div id="sidebar">
<aside>:

<aside>
Earp" /></a>
</div>
</div>
</aside>
! (.4.2). ,

4.4. HTML5
129
.4.2.
, ! ,
CSS
- . , .
#header, header, #navigation,
nav, #footer, footer. , CSS-,
, :
#header {
background-position: 0 top;
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-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>
Earp" /></a>
4.4. HTML5
131
</div>
</section>
<section>
</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">
<h1>Every year <span>when I watch the Oscars I'm annoyed...</ span></h1>
<p>We're here to put things right. </p>
</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>
</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">
<ul>
</ul>
</nav>
</header>

<div id="content" role="main">
<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>
</div>

<aside>
138
4. HTML5 -
<section role="complementary">
<a href="#"><img class="sideImage" src="img/wyattEarp.jpg"
alt="Wyatt Earp" /></a>
</div>
</section>
<section role="complementary">
</div>
</section>
</aside>

<footer role="contentinfo">
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&image=myVideoPoster.

jpg&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, .
(, 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[alt="atwi_oscar"] {
}
<img> alt,
atwi_oscar. CSS2.

CSS
3?
CSS3
CSS3 .
, ! ,
. :
;
;
.
, .
. :
[^=""]
5.5. CSS3-
161
, <img>
alt, film, :
img[alt^="film"] {
}
^, .
.
:
[*=""]
, <img>
alt, film, :
img[alt*="film"] {
}
*, .
.
:
[$=""]
, <img>
alt, film,
:
img[alt$="film"] {
}
$, .

? , 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 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).
,
. :
<ul>
</ul>
</nav>
164
5. CSS3: ,
, 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 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 {
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-style: normal;
}
( ) . ,
176
5. CSS3: ,
Bebas Neue:
nav ul li a {
height: 42px;
line-height: 42px;
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;
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> 
CSS-:
.intro h1 {
font-family: CaudexBold, "Times New Roman", Times, serif;
font-size: 2.63636364em;
line-height: 1em;
}
.intro h1 span {
font-family: CaudexRegular, "Times New Roman", Times, serif;
}
@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;
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-:
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-, :
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.
, , ,
, , :
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).
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;
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
.sideBlock img {
max-width: 45%;
}
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, , - , , /.
, . .

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 ). ,
:
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 {
font: 2.25em /* 36px 16 */ 'BebasNeueRegular';
}
. , ,
. , ,
RGB HSL:
#content a {
background-color: #b01c20;
}
. , , ,
CSS
3-, , .
:
#content a {
border-radius: 8px;
}
(.6.21).
.6.21.
(-, ,
, )
( ),
:
211
6.6. CSS3-
#content a {
border-radius: 8px;
color: white;
padding: 30px;
}
(.6.22).
,
float: left:
#content a {
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 {
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 {
border-radius: 8px;
color: white;
padding: 30px;
float: left;
background: -moz-linear-gradient(90deg, #b01c20 0%,
#f15c60 100%);
margin-top: 30px;
text-shadow: 0px 1px black;
border: 1px solid #bfbfbf;
}
Firefox8 (.6.25).
.6.24.

.6.25. -

,
(» HTML) Photoshop-
. ,
, , . :
<a href="#">these should have won <span>»</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> 
</body>
, ( <div>
container), , <div> footerBackground.

CSS
- <body>:
body {
background-image: url("../img/topSlice.png");
}
, footerBackground.
.
.footerBackground {
background-image: url("../img/bottomSlice.png");
background-position: bottom;
}
. , .
6.7.
215
, CSS3,
( CSS Backgrounds and Borders Module Level3). ,
Internet Explorer 8 . :
background:
url('../img/1.png'),
url('../img/3.png');
, ,
, . , , :
background:
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/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 {
border-radius: 8px;
color: #ffffff;
padding: 3%;
float: left;
background: linear-gradient(90deg, #b01c20 0%, #f15c60 100%);
margin-top: 30px;
}
:
#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-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;
,
, .

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

, :
. , ,
- ,
,
!
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-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%;
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 {
}
,
:
.face {
position: absolute;
-webkit-backface-visibility: hidden;
}
div .face
, div .back:
.back {
width: 66%;
height: 127%;
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% {
}
50% {
text-shadow: 0 0 20px #000000;
}
100% {
}
}
238
7. CSS3-,
, , , , ,
( , , @-webkitkeyframes).
:
0% {
}
50% {
}
100% {
}
}
@keyframes.
warning . @keyframes
, , ,
.
, (,
10, 20, 30, 40 ..), , ,
from to. ,
WebKit ( 0% 100%):
from {
}
50% {
}
to {
}
}
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">
<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">
<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 {
}
20% {
}
60% {
}
242
7. CSS3-,
80% {
}
to {
}
}
2D- rotate 3 10 .
animation:
#quiz .unSung a:nth-child(odd) img {
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 {
}
#quiz .overHyped a:nth-child(even) img {
}
. , CSS,
( <body id="quiz">).
animation rotate,
, , . ,
, nth-child,
5,
:
#quiz .unSung a:nth-child(odd) img {
animation: swing 0.1s 5 ease-in;
}
#quiz .unSung a:nth-child(even) img {
}
#quiz .overHyped a:nth-child(odd) img {
}
7.4. CSS3
243
}
animation .
. , (0.5s) . ,
.
}
-, , , .
, , ,
, , , ,
.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).
,
,
, , .
( ),
, ,
( ), . , 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"
</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"
</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-webshim/minified/extras/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//
$.webshims.polyfill();
</script>
. jQuery ( www.jquery.com):
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 {
}
#redemption div {
width: 100%;
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;
float: left;
width: 100%;
}
#redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
}
#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 {
height: 34px;
border-radius: 8px;
color: white;
float: right;
background: linear-gradient(top, rgb(241,92,96) 0%, rgb(176,28,32) 100%);
margin-top: 10px;
}
.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%;
background: #ffffff;
background: linear-gradient(top, #ffffff 77%,#f2f2f2 100%);
border-radius: 4px;
}
border-radius background ,
box-shadow , .
,
CSS3- .
.8.25 , Chrome.
.8.25.
8.3. HTML5- CSS3
269

, - .
, , , red, ,
RGB HSL-. . , , .
.
. CSS3-:
input, textarea, select {
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;
}
- 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 name="viewport" content="width=device-width,initialscale=1.0,maximum-scale=1"
/>
<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>
/>
<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, :

, .
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({
,
. , :
, ,
respond.min.js:
only all ?. Internet Explorer

, nope , , . respond.min.js .
9.3. Modernizr
289
:
Modernizr.load({
nope: ['js/respond.min.js', 'css/extra.css']
});
respond.min.js extra.css . CSS- ,

,
. ,
:
Modernizr.load({
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>
/>
<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. :
<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([
{
},
{
// , 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 () {
// ,
// ,
$('#mainNav').mobileMenu({
switchWidth: 600,
// ,
//
//
topOptionText: 'Select a page', //
indentString: ' ' //
//
});
});
}
}
]);
, 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 , , , :
});
$('#mainNav').mobileMenu({
switchWidth: 600, // ,

topOptionText: 'Select a page',
//
indentString: ' ' //
//
});
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
-,
,

,
.

Html5 и Css3 Разработка Сайтов Для Любых Браузеров и Устройств

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Html5 и Css3 Разработка Сайтов Для Любых Браузеров и Устройств

Enviado por

Direitos autorais:

Formatos disponíveis

32.988.

Copyright 2012 Packt Publishing

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

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

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

.1.4. 930 1060

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

.1.7. dConstruct 2011

.1.10. dConstruct 2011

.1.11 , Google Chrome

.1.14. 3D- CSS3

1.9. HTML5 CSS3 ?

, (Firefox 3.6 , Safari 4 , Chrome

@media screen and (max-width:

, CSS- @import HTTP- (, ,

(min) (max) width

.2.5. And the winner isnt

.2.7. iPhone 3GS

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

wrapper, header, footer

<div> #navigation #footer

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

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

display: inline; ( <li>

, And the winner isnt,

max-width: 100% img

.3.12. , Adaptive Images

ZIP- adaptive-images.php .htaccess

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

, , AND THE WINNER

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

HTML5 <!DOCTYPE html> , . HTML5.

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

yy A post about something

.4.1 HTML5 Outliner.

.4.1. HTML5 Outliner

HTML5 W3C <hgroup>,

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

.4.4. HTML5 Outliner

, , : Were here to put things right (

. Adobe Apple HTML5

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

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

.4.10. And the winner isnt

CSS3 Internet Explorer 68

CSS2.1 CSS3, Internet

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

Firefox, Chrome, Safari ,

.5.1. When can I use

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

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

.5.7. And the winner isnt

.5.18. Font Squirrel

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

.5.19. Bebas Neue

font-family font-size Google

.5.20. Google Chrome

5.7. CSS3- @font-face

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

And the winner isnt

CSS3 Color CSS3,

.6.1. And the winner isnt

Photoshop EVERY YEAR 102,

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

<a href="#">these should have won »</a>

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