Index

A, B

Animations

* values, 542–44

@keyframes, 532–33

3D transforms, 549–51

browsers, 544–46

conculsion, 548–49

CSS3, 476

definition, 528–30

delay, 536–37

direction, 538–39

features, 547–48

fill-mode, 539–41

flash and JavaScript, 475

guidelines, 551–53

iteration-count controls, 537

JavaScript, 546–47

keyframes, 526–28

name and duration, 530–32

play-state, 541–42

properties, 542–44

timing functions, 533–36

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

source, 141–42

C, D

Canvas, 142

adding/implementing, 143

2D context, 144–51

in IE, 151–52

applications

Darkroom, 155

Picozu Editor, 156–57

Sketchpad, 155–56

combining video and audio

9elements, 157

Ambilight, 158

video destruction, 159

games

3D Tetris, 154

Canvas Rider, 153–54

Cut the Rope, 152–53

pixel-based, 143

Cascading Style Sheets (CSS). See Transitions, See CSS3

animations

browser, 544–46

conculsion, 548–49

features, 547–48

comparison, transitions and animations, 504–6

differences, 504

transforms

2D transforms, 499–500

3D transforms, 500–501

browser, 499

conculsion, 503

fallback, 502

features, 502

Internet Explorer, 501

polyfills, 501–2

CSS Layout

web devices, 287–88

monitoring sizes, 289

CSS3

basics, 209

benefits

streamlining design, 213–14

workarounds and hacks, 214–15

browser

current and wider overview, 241

Good CSS Developers Pledge™, 244

IE Filters, standards and performance, 245–46

in action, vendor prefixes, 242–43

Opera effect, 225–26

-prefix-free, 244

vendor prefixes, 241

calculating specificity, 221–23

cascade, 221

context, 211–12

contextual awareness, 209

convention

declarations, 225–26

naming conventions, 227

rule sets, 226–27

single line vs. multi-line, 223–25

CSS 1 and CSS 2.1, 210–11

essential links, 562–64

feature detection, 246–47

frameworks and toolkits, 232

fundamentals

anatomy of a rule/rule set, 215

At-rules, 219

combinators, 219

declaration, 216

declaration block, 216

functional notation, 217–18

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

counters module, 556–58

filter property, 560–61

list-style-type, 556

variables, mixins and nesting, 560

lint, 238–39

maintainable CSS

Object Oriented CSS, 235–36

pattern primer/components library, 233–35

principles, 233

systems and practical, maintainable CSS, 235

three-fold process, 232–33

maturity levels, 213

modularity, 212–13

module status, 250–52

normalize.css, 231–32

polyfills

definition, 247

PIE, 248–49

Selectivizr, 248

progressive enhancement

in action, 240

principles, 239–40

resets

basics, 230

Meyer’s reset reloaded, 230–31

style sheets, 230

shorthand, 219–21

specifications, 555

validation, 237–38

W3C, 211

web standards, 210

Cufón, 379

E

Ex-presentational elements, 76

a element, 88

block link, 88–89

browser caveats, 89–90

b element, 76, 78–79

cite element, 94–96

dl element, 92

definition, 93

metadata, 93

em element, 80

em elements, 76

extending HTML5. See Extending HTML5

hr element, 76, 81–83

i element, 76, 77–78

mark element, 97–98

ol element, 90

reversed attribute, 92

start and value attribute, 91

type attribute, 91

ruby annotations, 98

for East Asian languages, 101–3

for English, 100–101

s element, 76

s element with del and ins, 83–87

small element, 76, 81

strong element, 76, 80

time element, 103–6

u element, 76, 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

using XFN, 110–11

rev and profile attributes, 106

F

Farhner Image Replacement (FIR), 376

Flash of unstyled text (FOUT), 382–83

font.js, 384–85

Google’s WebFont Loader, 383

G

Gilder/Levin method, 377

Gradients

linear gradients

angle, 455

color values, 455, 457–59

diagonal, 456–57

side-or-corner, 455

vertical, 455–56

radial gradients

circular, 460

ColorZilla, 463–64

ellipse, 460–61

ellipse top left, 461–62

position, 459

shape, 459

size, 459

syntax, 459

repeating gradients

diagonals, 464–65

radial gradient, 465–66

H, I

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

type attribute, 31–32

browsers, 27

block-level elements, 30–31

IE print protector, 30

shiv, 29–30

with unknown elements, 27–29

character encoding, 23

coding styles, 20

design principles, 11–13

DOCTYPE, 21

Hello World page, 24

in HTML4 style, 25

in loose style, 25–26

in strict style, 26

in XHTML 1.0 style, 24–25

HTML 4, 8

improvements, 10

language declaration, 21–23

memory, 24

meta charset attribute, 20

myths, 13–16

revisit the Miss Baker page, 36–38

validation, 33

lint, 35–36

WHATWG, 33

WaSP. See Web Standards Project (WaSP)

web page, 18–19

WHATWG and W3C, 9

XHTML 1.0, 8

XHTML 2.0, 9

XMLNS attribute, 23

J, K

JavaScript, 546–47

JavaScript image replacement (JIR), 377–78

L

Leahy and Stuart Langridge method, 376–77

M, N

Matrix transformation

2D functions, 488

3D transform, 490

definition, 488

rotation, 489–90

MugTug

Darkroom, 155

Sketchpad, 155

O

Object Oriented CSS (OOCSS)

classes, 236

concepts, 235–36

overriding principles, 236

P, Q

Plain Old Semantic HTML (POSH), 3

Progressive Internet Explorer (PLE), 248–49

Properties

background-clip

border-box value, 418–19

content-box, 420–21

padding-box value, 419–20

background-origin

border-box, 422–23

content-box, 423–24

padding-box, 421–22

background-size

auto, 424–25

contain keyword, 425–26

cover keyword, 426–28

border-image

border-radius, 446

nine slices overlaid, 443

Opera, 444

stretch and round values, 445

stretch options, 445

syntax, 443

border-radius

background image, 438–39

diameter, 436–37

different values, 440–41

equal, 438

horizontal and vertical radius, 439–40

image elements, 442

margin and padding, 437

box-shadow

blur radius, 447–48

inset keyword, 447, 449

multiple shadows, 449–50

negative offset values, 451–52

rgba, 447

vendor prefix, 448

browsers

CSS3 Pie, 467–68

Modernizr, 467

types, 466

color and transparency

HSLa, 415–17

opacity, 417–18

RGB, 411–13

RGBa transparency, 413–15

CSS3 effects

hover and focus states, 470–71

basic styles, 468

border-radius, 469

Collison, Simon, 471–72

rgb and hsla, 468–69

text-shadow, 469–70

gradients

linear-gradient, 454–59

radial gradients, 459–66

multiple backgrounds

background-repeat, 432–33

first background image, 430–31

html element, 430

individual images, 429

parallax effect, 434–35

Patrick Lauke’s, 436

second body element, 431–32

Silverback app, 428–29

third image, 433–34

text-shadow

Chrome, 452

faux 3D anaglyph, 452–53

Mark Otto, 453

typography, 452

WebKit browser, 453

R

Rich media, 119

audio, 140

browser support, 141

codecs, 140–41

common video attributes, 140

jPlayer, 142

media API, 140

source element, 141–42

canvas, 142

adding/implementing, 143–52

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

browser support, 126–28

containers and codecs, 125–26

DOM media elements, 135–36

markup, 122

object tag, 122

poster and controls attributes, 122

source element, 128–31

standard global attributes, 123

tools, 136–39

track element, 131–35

S

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

combinators, 254–55

CSS 2.1, 252–53

CSS1, 252

CSS3, 253

future, 282

negation pseudo-class, 280–81

pseudo-elements

before and after, 278–79

<figcaption> element, 278

CSS1 and CSS2, 277–78

exploring further, 279–80

href attribute, 279

structural pseudo-classes

first-child, 267–69

last-child, 269

nth-child, 269–72

nth-last-child, 272

only-child, 272

first-of-type, 272–73

last-of-type, 273

nth-of-type, 273–75

nth-last-of-type, 276

only-of-type, 277

empty, 277

root class, 277

target pseudo-class

hover:focus, 262–63

first-of-type selector, 266

target, 266

article, div and sections, 265

highlighted section, 263–64

section element, 266–67

tabbed interface, 264–65

z-index property, 265

UI element states pseudo-classes

checked and enabled, 261

disabled attribute, 260–61

login form, 260

user interface module, 261–62

W3C table, 283–86

sIFR, 378

skew() transform, 486–88

Structural elements

aside element, 62, 64

class names, 45

div, section and article, 46

basic structures, 49–51

comparison, 47–48

preferences, 48–49

figure element, 63, 65

flow and phrasing elements, 43

heading element levels, 60–62

headings

article, 52–54

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

alt attribute, 80–83

axis attribute, 84

issues, 84

longdesc attribute, 83

summary attribute, 83–84

universal access, 79

outlining algorithm, 55

media-independent semantics, 44

nav element, 62, 63

outlining algorithm, 55

implicit section, 56

in action, 56

sectioning root elements, 58

untitled section, 57, 58–60

page layout, 67–72

sectioning content elements, 66

workflow, 42–43

T, U

Timing-function, transitions

cubic-bezier()

equivalent, 514–20

fallback, 518–19

preset values, 515

steps()

frame-based animation, 520

functions, 516–17

preset values, 516

Transforms

2D CSS transforms, 477

3D/flat, 496

backface-visibilities, 497–98

conculsion, 478

CSS

2D transforms, 499–500

3D transforms, 500–501

browser, 499

fallback, 502

Internet Explorer, 501

polyfills, 501–2

CSS values and units, 478

features, 502

functions

3D rotation, 484

default, 478–81

matrix(), 488–90

perspective and perspective(), 491–92

perspective-origin, 492

rotate(), 483

scale() and scale3d(), 485–86

skew(), 486–88

transforms via transform-origin, 493–96

translate(), 481–82

translate3d(), 482

guidelines, 551–53

meaning, 476

transform-style, 496

Transforms via transform-origin, 493–96

Transitions

browsers, 521–23

conculsion, 525–26

features, 523–24

guidelines, 551–53

modules, 506

properties, 506

box properties, 508–9

CSS animations, 507–12

duration, 514

faking transition, 513

multiple values, 521

positioning properties, 509

shorthand order, 521

SVG properties, 510–11, 510–11

text properties, 508

timing-function, 514–20

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

V

Video, 122

browser support, 126–28

containers and codecs

H.264, 126

MPEG-4, 126

Ogg, 125

Theora, 126

VP8, 126

WebM, 125

DOM, 135–36

markup, 122

object tag, 122

poster and controls attributes, 122

source element, 128–31

standard global attributes, 123

tools

JW Player, 137

MediaElement.js, 138

Playr, 137–38

SublimeVideo Player, 139

VideoJS, 139

track element, 131

attributes, 131

subtitles in multiple languages, 132

WebVTT, 132–35

W

Web Standards Project (Wasp)

accessibility, 6

benefits, 3

browser wars, 2

crafted approach, 7

definition, 2

semantic markup, 3

uncertainty, 4–6

W3C, 2

web trifle, 4

Web typography

anatomy, 374–75

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

baseline grid, 394–95

ems, 393–94

pixels, 391–93

vertical rhythm, 390–91

hanging punctuation, 406–7

history, web type, 375–76

JavaScript image replacement, 377–78

Leahy/Langridge method, 376–77

non-latin type

OpenType format, 408

text-emphasis-style, 407–8

word-break, 407

Phark method, 377

quotes, 405–6

sIFR, 378

SVG fonts, 379

typeface, 373

web fonts

@font-face, 380, 385–86

being, 380

bulletproof syntax, 382

commercial foundries, 386

declaration, 381–82

disadvantages, 388

flash of unstyled text, 382–83

font services, 387–88

Font Squirrel, 386

font.js, 384–85

Google’s WebFont Loader, 383

icons, 388

Kernest, 386

rule, 380–81

web type

font-stretch, 397

font-weight property, 395–97

hyphens, 402–3

letter space, 398–99

soft hyphen, 403–5

synthesize text, 397

text overflows, 397–98

vertical-align properties, 398

white-space, 401–2

word-space, 399–400

word-wrap/break-word, 400–401

WebSRT (Web Subtitle Resource Tracks), 132

WebVTT (Web Video Text Tracks), 132–35

World Wide Web Consortium (W3C), 2

X, Y, Z

XHTML Friends Network (XFN), 110–11