Animations
CSS3, 476
flash and JavaScript, 475
iteration-count controls, 537
user interface, 475
Audio, 140
browser support, 141
codecs
AAC, 141
MP3, 141
MP4, 141
Vorbis, 141
WAV, 141
common video attributes, 140
jPlayer, 142
media API, 140
Canvas, 142
adding/implementing, 143
applications
Darkroom, 155
combining video and audio
9elements, 157
Ambilight, 158
video destruction, 159
games
3D Tetris, 154
pixel-based, 143
Cascading Style Sheets (CSS). See Transitions, See CSS3
animations
comparison, transitions and animations, 504–6
differences, 504
transforms
browser, 499
conculsion, 503
fallback, 502
features, 502
Internet Explorer, 501
CSS Layout
monitoring sizes, 289
CSS3
basics, 209
benefits
browser
current and wider overview, 241
Good CSS Developers Pledge™, 244
IE Filters, standards and performance, 245–46
in action, vendor prefixes, 242–43
-prefix-free, 244
vendor prefixes, 241
calculating specificity, 221–23
cascade, 221
contextual awareness, 209
convention
naming conventions, 227
single line vs. multi-line, 223–25
frameworks and toolkits, 232
fundamentals
anatomy of a rule/rule set, 215
At-rules, 219
combinators, 219
declaration, 216
declaration block, 216
keywords, 216
property, 215
selectors, 219
units, 217
value, 215
vendor-specific extensions, 219
go forth and make awesome, 561–62
hardware acceleration and performance, 556
inheritance, 223
internationalization
calc() and attr() functions, 558–59
list-style-type, 556
variables, mixins and nesting, 560
maintainable CSS
pattern primer/components library, 233–35
principles, 233
systems and practical, maintainable CSS, 235
maturity levels, 213
polyfills
definition, 247
Selectivizr, 248
progressive enhancement
in action, 240
resets
basics, 230
Meyer’s reset reloaded, 230–31
style sheets, 230
specifications, 555
W3C, 211
web standards, 210
Cufón, 379
Ex-presentational elements, 76
a element, 88
dl element, 92
definition, 93
metadata, 93
em element, 80
em elements, 76
extending HTML5. See Extending HTML5
ol element, 90
reversed attribute, 92
start and value attribute, 91
type attribute, 91
ruby annotations, 98
for East Asian languages, 101–3
s element, 76
s element with del and ins, 83–87
Extending HTML5, 106
class and rel attributes, 106
custom data attribute, 107
data element, 107
meta element, 106
methods, 106
microdata, 113
global identifiers, 118
in-page references, 117
itemprop value, 115
itemscope and itemprop, 115
making own vocabulary, 125
multiple properties, 117
nested items, 116
RDFa, 126
schema.org vocabularies, 119–24
tools and browser support, 124
typed items and globally unique names, 118
using meta, 117
vs. microformats, 114
microformats, 108
contact information, using hcard, 111–13
licensing information, using rel-license, 109–10
rev and profile attributes, 106
Farhner Image Replacement (FIR), 376
Flash of unstyled text (FOUT), 382–83
Google’s WebFont Loader, 383
Gilder/Levin method, 377
Gradients
linear gradients
angle, 455
side-or-corner, 455
radial gradients
circular, 460
position, 459
shape, 459
size, 459
syntax, 459
repeating gradients
HTML4.5
semantics via ARIA landmark roles, 77–78
semantics via div class, 73–77
HTML5, 8
boilerplate page, 31
polyfills and alternatives, 32–33
browsers, 27
IE print protector, 30
character encoding, 23
coding styles, 20
DOCTYPE, 21
Hello World page, 24
in HTML4 style, 25
in strict style, 26
HTML 4, 8
improvements, 10
memory, 24
meta charset attribute, 20
revisit the Miss Baker page, 36–38
validation, 33
WHATWG, 33
WaSP. See Web Standards Project (WaSP)
WHATWG and W3C, 9
XHTML 1.0, 8
XHTML 2.0, 9
XMLNS attribute, 23
JavaScript image replacement (JIR), 377–78
Leahy and Stuart Langridge method, 376–77
Matrix transformation
2D functions, 488
3D transform, 490
definition, 488
MugTug
Darkroom, 155
Sketchpad, 155
Object Oriented CSS (OOCSS)
classes, 236
overriding principles, 236
Plain Old Semantic HTML (POSH), 3
Progressive Internet Explorer (PLE), 248–49
Properties
background-clip
background-origin
background-size
border-image
border-radius, 446
nine slices overlaid, 443
Opera, 444
stretch and round values, 445
stretch options, 445
syntax, 443
equal, 438
horizontal and vertical radius, 439–40
image elements, 442
margin and padding, 437
box-shadow
negative offset values, 451–52
rgba, 447
vendor prefix, 448
browsers
Modernizr, 467
types, 466
color and transparency
CSS3 effects
hover and focus states, 470–71
basic styles, 468
border-radius, 469
gradients
multiple backgrounds
first background image, 430–31
html element, 430
individual images, 429
Patrick Lauke’s, 436
text-shadow
Chrome, 452
Mark Otto, 453
typography, 452
WebKit browser, 453
Rich media, 119
audio, 140
browser support, 141
common video attributes, 140
jPlayer, 142
media API, 140
canvas, 142
combining video and audio, 157–59
games and applications, 152–57
pixel-based, 143
resources, 160
flash, 119
Dan’s approach, 121
open web standards, 121
proprietary formats vs. open standards, 120–21
SVG. See Scalable Vector Graphics (SVG)
video, 122
markup, 122
object tag, 122
poster and controls attributes, 122
standard global attributes, 123
Scalable Vector Graphics (SVG), 160
implementation, 161
circle, 163
gradient, 163
rectangle, 162
shape elements, 162
SVG element, 161
inline SVG, 160
resources, 164
vs. canvas, 160
scale() transform function, 485–86
Selectors
attribute and substring
contains/asterisk (*) operator, 258–59
ends with/$ operator, 258
equals (=) operator, 256
required attribute, 255
starts with/caret (^) operator, 256–57
tilde (~) operator, 256
title attribute, 255
vertical bar ( | ) operator, 256
browser support, 281
CSS1, 252
CSS3, 253
future, 282
pseudo-elements
<figcaption> element, 278
href attribute, 279
structural pseudo-classes
last-child, 269
nth-last-child, 272
only-child, 272
last-of-type, 273
nth-last-of-type, 276
only-of-type, 277
empty, 277
root class, 277
target pseudo-class
first-of-type selector, 266
target, 266
article, div and sections, 265
z-index property, 265
UI element states pseudo-classes
checked and enabled, 261
login form, 260
sIFR, 378
Structural elements
class names, 45
div, section and article, 46
flow and phrasing elements, 43
headings
h1-h6, 51
header and footer, 51
hgroup, 51
HTML4.5
semantics via ARIA landmark roles, 77–78
semantics via div class, 73–77
HTML5 accessibility
axis attribute, 84
issues, 84
longdesc attribute, 83
universal access, 79
outlining algorithm, 55
media-independent semantics, 44
outlining algorithm, 55
implicit section, 56
in action, 56
sectioning root elements, 58
sectioning content elements, 66
Timing-function, transitions
cubic-bezier()
preset values, 515
steps()
frame-based animation, 520
preset values, 516
Transforms
2D CSS transforms, 477
3D/flat, 496
conculsion, 478
CSS
browser, 499
fallback, 502
Internet Explorer, 501
CSS values and units, 478
features, 502
functions
3D rotation, 484
perspective and perspective(), 491–92
perspective-origin, 492
rotate(), 483
transforms via transform-origin, 493–96
translate3d(), 482
meaning, 476
transform-style, 496
Transforms via transform-origin, 493–96
Transitions
modules, 506
properties, 506
duration, 514
faking transition, 513
multiple values, 521
positioning properties, 509
shorthand order, 521
SVG properties, 510–11, 510–11
text properties, 508
transition-delay, 520
vendor code, 507
transforms
flickering animation, 525
fuzzy, z-index and hardware acceleration, 524–25
steps, 524
translate() transform function, 481–84
Video, 122
containers and codecs
H.264, 126
MPEG-4, 126
Ogg, 125
Theora, 126
VP8, 126
WebM, 125
markup, 122
object tag, 122
poster and controls attributes, 122
standard global attributes, 123
tools
JW Player, 137
MediaElement.js, 138
SublimeVideo Player, 139
VideoJS, 139
track element, 131
attributes, 131
subtitles in multiple languages, 132
Web Standards Project (Wasp)
accessibility, 6
benefits, 3
browser wars, 2
crafted approach, 7
definition, 2
semantic markup, 3
W3C, 2
web trifle, 4
Web typography
baselines
font family, 389
font-size, 390
rem unit, 390
vertical spacing, 389
Cufón, 379
Farhner Image Replacement, 376
fonts, 373
Gilder/Levin method, 377
grid design
automatic vertical rhythms, 395
JavaScript image replacement, 377–78
Leahy/Langridge method, 376–77
non-latin type
OpenType format, 408
word-break, 407
Phark method, 377
sIFR, 378
SVG fonts, 379
typeface, 373
web fonts
being, 380
bulletproof syntax, 382
commercial foundries, 386
disadvantages, 388
flash of unstyled text, 382–83
Font Squirrel, 386
Google’s WebFont Loader, 383
icons, 388
Kernest, 386
web type
font-stretch, 397
synthesize text, 397
vertical-align properties, 398
WebSRT (Web Subtitle Resource Tracks), 132
WebVTT (Web Video Text Tracks), 132–35
World Wide Web Consortium (W3C), 2