Index
A
abbt element, 208
absolute positioning
absolute URLs, 43
accessibility, 157–176. See also ARIA
alt text and, 170
business case for, 158–159
color contrast, 170–171
commitment to, 157–158
forms and, 174–176
goals of, 4
issues for headings, 170
legal framework for, 159
links and titles, 169–170
resetting focus state, 260
SVG and, 371
tables and, 171–174
technologies for, 11
video and audio, 292
W3C’s guidelines for, 159–169
web development with, 12–13
addEventListener method, 141, 142, 146–147
adjacent sibling selectors, 117
Ajax, 154
anchor (a) elements, 41–42, 43
animating SVG images, 372
applet element, 51
ARIA (Accessible Rich Internet Applications Suite), 163–169
browser support for, 167–168
keyboard access standards, 164
overview, 159
states and properties, 166
validating markup, 168–169
article element, 274
attribute selectors, 117–118
attributes. See also specific attributes
illustrated, 26
audio in HTML5, 291–292
B
background-attach property, 102
background-color:transparent property, 327
background-color property, 96
background-position property, 99–102
background properties, 95–103. See also specific properties
about, 95–96
illustrated, 95
new in CSS3, 102
shorthand for, 103
background-repeat property, 98–99
gradient, 336–337
gradual color transitions of, 333–334
multiple images for, 335
semitransparent images in, 327–329
best practices
code readability, 204–206
markup, 203–217
microformats, 212–217
POSH, 206–211
search engine optimization, 211–212
standards-based DOM scripting, 142–149
formats for, 47–48
scaling up, 371
vector vs., 366
block elements
about, 37–38
block quotations, 207
displaying, 105–106
breaking lines, 33
as containers, 31
div elements within, 34–35
headings in, 32
lists, 36–37
paragraphs in, 32
preformatted text, 33–34
Boolean expressions in JavaScript, 146–147
border images, 334–335
borders
around navigation list, 236–237
properties specifying, 110–111, 324–327
setting margins for specific, 112
shorthand for properties, 112
box model. See also specific components
borders, 110–112
bugs in, 185–189
components of, 106–107
Internet Explorer, 187
margins, 108–110
width and height for, 112–113
box-shadow property, 322–324
br (line break element), 33
browser hacks, 180
browsers. See also specific browsers
applying default style sheet, 255–256
ARIA support in, 167–168
audio and video support in, 291–292
box-shadow compatibility with, 324
canvas element support in, 378, 387, 388
common bugs for, 185–189
compatibility mode switching in IE, 183–185
connecting to resources via URLs, 46–47
CSS support in, 69–71, 94, 125–126, 129
CSS vendor-specific extensions for, 301–303
CSS3 compatibility, 300–301
defining DOCTYPE for, 26–28
displaying document elements, 106–107
distinguishing with addEventListener method, 146–147
DOM event flow models and, 142
DOM tree of objects with, 133–135
Doubled Float-Margin Bug, 187–188
evolving standards for, 10–11
fallbacks for canvas support in, 379–380
forgiving invalid markup, 64
graphic support in, 365–366
handling multimedia content for, 49–51
hasLayout property problems, 190–193
hiding styles from Netscape, 4, 197–198
HTML5 support in, 292–294
incompatibilities with DOM, 145–147
inline SVG challenges, 374–375
linking fonts with @font-face, 357, 359–362
media queries with, 341–342, 347, 350
missing feature support in, 200–202
modern, 94
modes, 181–185
progressive enhancement for, 13–14, 200–201
relative URLs in, 43–46
rendering multiple shadows for text, 320–322
resets with, 256–260
RGBa color compatibility and, 329
serving or hiding style sheets for, 196–200
SVG support by, 375–377
text-shadow property with, 322
tools for inspecting DOM, 152–154
XHTML error handling, 67–68
bugs
common box-model, 185–189
feature support and, 181
hacks for, 193–196
buttons
button element for, 55
labels and accessibility, 175
radio, 53–54
styled with border images, 335
C
canvas element, 378–389
adding, 379–380
drawing with, 381–385
getting drawing context from, 380–381
origins of, 378
shadow added to, 386
SVG vs., 389
Cartesian coordinate system, 369–370
case sensitivity
camel case, 136
XHTML, 22
cells, 60–62
centering in CSS, 220–223
chaining selectors, 90–91
character entities, 63–64
checkboxes, 53–54
circles in SVG, 369
class attribute, 39–40, 208–211
class selectors, 83
clear property, 114–115
clipping paths, 386
broken links, 66
common validation errors, 65
forgiving browsers and, 64
hacks for bugs and, 193–196
HTML Tidy to improve, 66
improving, 18
WCAG quality assurance tools, 162–163
collapsing margins
about, 109–110
Non-Collapsing Margins Bug, 188–189, 192
color
accessibility and, 160–161, 170–171
adding background, 96
applying zebra-striped, 310–315
assigning to three-column layout, 244–250
RGBa, 329
color property, 76–77
adding color to three-column layout, 244–250
CSS markup for, 251–252
elastic layouts with, 242–243
floated multi-column layouts, 237–243
specifying in pixels, 239–241
text with multi-columns, 330–331
comments
adding for HTML markup, 35
conditional comments for IE, 198–200
readability and, 205–206
compatibility mode switching (IE), 183–185
conditional comments (IE), 198–200
containers
body elements as, 31
containment hierarchy, 28
positioning elements in, 224–233
content
accessibility of audio and video, 160
containing in video element, 290–291
displayed in box model, 106, 186
embedding, 47–51
floating text around images, 113–115
grouping with HTML5, 273
HTML5 embedded, 286–287
importance of CSS to, 71–72
multimedia, 49–51
overflowing, 108
preformatted, 33–34
separating site into markup, behavior, and, 14
style separated from, 69–71
styling generated, 121
controls
disabling, 58
grouping, 59
labeling, 58–59
coordinate systems
canvas coordinate space, 381–382
Cartesian and SVG, 369–370
createElement method, 148
CSS (Cascading Style Sheets). See also CSS frameworks; CSS resets; CSS3; page layouts
adjacent sibling selectors, 117
ARIA-based styling elements, 166–167
associating documents with, 72–73
attribute selectors, 117–118
background properties, 95–103
basic syntax for, 74–82
break throughs in page layout, 219–220
browser support for, 69–71, 94, 125–126, 129
chaining selectors, 90–91
child selectors, 90
class selectors, 83
color accessibility guidelines, 160–161
CSS Frameworks, 260–264
CSS resets, 256–260
declaration blocks, 74
defined, 72
descendant selectors, 89–90, 93
display types, 119–120
dynamic selectors, 103–105
embedded, 72–73
embedding fonts in, 357–358
evolving to CSS3, 297–298, 300
float-based layouts, 233–250
forms, 126–127
grid layouts, 250–253
grouping selectors, 75–76
hidden property, 119
horizontal centering, 220–222
id selectors, 83–84
image replacement in, 127–128, 318, 354, 356
importing style sheets, 124–125
inheritance of, 82–83
inline, 72
length values in, 79
linking to external, 73
list items, 119–120
page layout, 105–116
positioning, 224–233
printing, 120
readability of, 129
relative and absolute values in, 79–80
selectors, 74–76, 117–119, 121
separating style from content, 69–71
serving/hiding style sheets, 196–200
shadow effects (CCS3), 318–324
site performance and, 129–130
specificity in, 84–85
style and link elements with, 31
style sheets in, 74
styling generated content, 121
table layout model in, 251–253
text layout properties, 85–88
user interface properties, 121
using for media types, 121–123
validating, 125
CSS frameworks, 260–264
about, 263–264
additional, 263
pros and cons of, 260–261
purpose of CSS, 260
resets in, 263
YAML, 262
YUI Library CSS tools for, 263
CSS resets, 256–260
advantages of, 256
developing personal, 260
disadvantages of, 257–258
Reset Reloaded, 259
sample markup for, 258–259
Yahoo Reset CSS, 259–260
CSS Zen Garden, 210
adding rounded corners on box, 324–327
background properties in, 102
border images, 334–335
box-shadow property in, 322–324
compatibility and, 300–301
@font-face statements, 357–358
first-of-type selector, 307–308
gradients, 336–337
implementing navigation bar in, 300, 337
media queries, 341–351
multi-column text, 330–331
multiple shadows in, 320–322
new selectors in, 304–316
opacity property, 328
RGBa color values in, 329
shadow effects, 318–324
styling HTML5 with first-child selector, 305–307
text-shadow property in, 318–319
transforms, 335–336
transition effects in, 332–334
transparency in, 327–328
vendor-specific extensions in, 301–303
D
declaration blocks, 74
default style sheet, 255
definition lists (<dl>), 36–37
descendant selectors, 89–90, 93
Designing with Web Standards (Zeldman), 4, 14, 267
device-independence guidelines, 161
devices. See also media queries
adjusting text widths with media queries, 347–350
diversity in, 339–340
location-aware services for, 270
media queries, 341–351
SVG advantages for higher-resolution, 371
user-agent sniffing, 340–341, 351
directories
linking to, 46–47
navigating with relative URLs, 43–46
disabling controls, 58
display property, 119–120
choosing standards mode rendering, 182–183
declaring in HTML5, 272
entering, 26–28
IE 8 switching model, 183–185
Quirks Mode and switching, 181–182
document object, 137
Document Object Model. See DOM
documents. See also body elements; DOCTYPE
anchor elements linking, 41–42
associating CSS with, 72–73
defining DOCTYPE, 26–28
elements of, 23–26
embedding JavaScript in, 30–31
escaping characters in, 64
HTML, 23
lists in, 36–37
root element of, 29
DOM (Document Object Model), 131–155. See also libraries
browser incompatibilities with, 145–147
canvas element and, 378
changing style of element, 138–139
core objects and methods in, 136–140
document object, 137
element objects, 137–140
events in, 140–142
getting elements by tag name, 139
illustrated, 134
importance of, 11
innerHTML property debate, 147–148
inspecting, 152–154
intermediate, 132
JavaScript for forms and links, 144–145
libraries, 149–152
methods in, 135
mitigating data input risks in, 149
scripting content separate from object, 143–144
security with JavaScript and, 148–149
SVG and, 378
tree of objects in, 133–135
unobtrusive scripting techniques, 142–144, 201
window object, 136–137
Doubled Float-Margin Bug, 187–188, 193
drawing context
drawing with canvas element, 381–386
getting from canvas element, 380–381
lines, 384
paths, 383
rectangles, 382–383
text, 384–385
transformations, 385
transparency and, 385
using images on canvas, 385
drop shadows, 318
dynamic pseudo-class selectors, 315
dynamic selectors, 103–105, 332
E
ECML (Electronic Commerce Markup Language), 211
elastic page layouts, 242–243, 262
element objects, 137–140
getting by tag name, 139
locating by id value, 139–140
style properties of, 138–139
elements. See also specific elements
abbreviation, 38
anchor, 41–42
best practices for class and id, 209–212
block, 37–38
border images for, 334–335
defined, 23
empty, 25–26
headings in body, 32
illustrated, 26
inline, 38
new to HTML5., 272–280
non-empty, 24–25
positioning, 115–116
providing emphasis, 38
root html, 29
selecting CSS, 89–92
structuring tables with, 60–62
tags and attributes in, 24–25
using for HTML quotations, 207
ways of getting layout, 190–191
ellipses, 369
em-driven layouts, 242–243
Embedded OpenType (EOT) fonts, 355–356, 357, 358–359
embedding
audio, 291
CSS, 72–73
images, 49
JavaScript in documents, 30–31
media types, 123
video with HTML5, 287–291
empty elements, 25–26
entities, 64
equals sign (=), 24
errors
common validation, 65
font property, 78
handling in HTML5, 269
handling XHTML, 67–68
escaping characters, 64
event bubbling, 142
event listeners, 140–141
events, 140–142
adding event listeners, 140–141
capturing, 142
flow models in DOM, 141–142
overview of DOM, 140
ExplorerCanvas, 388
external CSS files, 73
F
@font-face statements, 357, 359–362
faux column technique, 245–246, 247, 249
figure element, 278–279
files
external CSS, 73
HTML, 23
PNG, JPEG, and GIF, 47–48, 366
size of SVG, 371
using relative URLs to link to, 43–46
Firefox. See also browsers
audio and video support in, 291–292
border-radius property support in, 327
box-shadow property in, 324
inspecting DOM in, 153
SVG support by, 375–376
text-shadow property compatibility with, 322
first-child selector, 305–307
first-of-type selector, 307–308
fixed positioning, 115, 116, 224, 232–233
fixed-width layouts, 239–241
float-based layouts, 233–250
fixed-width layouts, 239–241
floated multi-column layouts, 237–243
horizontal navigation lists, 233–235
z-index property and, 233
float property
Doubled Float-Margin Bug, 187–188, 193
floating images with, 113–114
positioning using, 224–225
floated column layout, 237–243, 245
fluid page layouts, 241–242, 262
font-family property, 77–78
font-size property, 79–80
font-style property, 81
font-weight property, 81
fonts, 353–363
adding to headings, 77–78
availability of, 353–354
@font-face statements, 357, 359–362
“fonts as a service” businesses, 362, 363
legal aspects of linking, 356–357
linking and embedding, 355–356
resetting, 260
size of, 79–80
“fonts as a service” businesses, 362, 363
footer
fixing with clear property, 243
found in section element, 273
HTML5 features of, 280
block elements for containing, 59
checkboxes and radio buttons, 53–54
handling with input element, 52
types of, 52
formatting
CSS for readability, 129
HTML code, 204–205
using microformats, 212–217
forms, 51–59. See also form controls
accessibility and, 174–176
allowing multiple lines in, 57–58
button element, 55
checkboxes and radio buttons for, 53–54
containing in form element, 52
controls for, 52
disabling controls, 58
input element for, 52–53
labeling controls, 58–59
menus for, 56–57
placing labels and controls in block elements, 59
push button markup for, 54–55
styling, 126–127
text and password input elements, 52–53
frames, 62–63
G
getContext method, 381
getElementById method, 139–140
getElementsByTagName method, 139
graphics. See also bitmap images; vector images
bitmap formats, 47–48, 365, 366
bitmap vs. vector, 366
graphs and data visualization, 372–373, 387
SVG format and vector, 365–366
greater than sign (>), 90
grid layouts, 250–253
grouping controls, 59
H
hacks
about browser hacks, 180
code quality and, 193–194
selector-parsing, 195
statement-parsing, 195–196
hasLayout property (IE), 190–193
hCard microformat, 213, 214–216
head elements, 29–31
headings
about, 32
accessibility issues for, 170
adding font to, 77–78
HTML4/HTML5 features for, 274–277
nesting anchors in, 43
height
challenges setting element, 244
specifying for page layout, 112–113
hidden property, 119
horizontal centering, 220–222
HTML (Hypertext Markup Language). See also HTML documents; HTML5
about, 17
adding images with CSS or, 49
ARIA extensions for accessibility, 163–169
body elements, 31–37
case insensitivity of, 22, 272
characters and entities in, 63–64
checking links, 66
class attribute, 39–40, 208–211
cleaning up legacy, 66
commenting in documents, 35
containers in, 28
converting to XHTML, 66
current use of HTML5, 295
defining DOCTYPE, 26–28
definition lists, 36–37, 207–208
developing CSS for, 69–71
documents in, 23
DOM objects in documents, 134
embedded content, 47–51
empty elements, 25–26
formatting, 204–205
forms, 51–59
frames and iframes in, 62–63
headings, 32
history of, 20–22
importance of, 11
link element, 31
links in, 41–47
meta elements, 30
multiple media support in, 341
new HTML5 elements, 272–280
non-empty elements, 24–25
origins of, 18–19
paragraphs in, 32
plain old semantic, 206–207
providing emphasis in, 38
quotations in, 207
root html element, 29
scaling and rotating elements with CSS transforms, 335–336
script elements, 30–31
span attribute in, 41
start and end tags, 24–25
syntax and semantics in, 19
table layout in CSS and, 251
tables, 59–62
text files containing, 22–23
validating markup, 64–65
versions of, 20–21, 22, 68, 271
XHTML vs., 66–68
about, 23
browsers modeling with DOM, 133–135
DOM objects in, 134
elements within, 305
example in HTML5, 280–286
styling with first-child selector, 305–307
html element, 29
HTML Tidy, 66
HTML5, 267–295. See also canvas element; and specific elements
about, 22
article element, 274
asides element in, 278
audio element support in, 291
audio in, 291–292
current use of, 295
development of, 267–269
differences from HTML4., 271–280
DOCTYPE declarations in, 272
embedded content in, 286–287
error handling in, 269
example document in, 280–286
figure element, 278–279
footer element, 280
local storage by browsers, 270
location-aware services with, 270
multimedia support in, 270
nav element, 277–278, 280, 281, 282
new elements in, 272–280
section elements, 273, 283, 285
standards for, 268–269
styling with first-child selector, 305–307
SVG capability with, 271
threaded JavaScript with web workers, 270
user-editable web pages in, 270
validating and serving, 294
video embedding with, 287–291
I
@import statements, 124–125, 197–198
id selectors, 83–84
iframes element, 62–63
images. See also SVG
adding with HTML or CSS, 49, 278–279
background images, 96–97
benefits of SVG, 370–372
bitmap and vector formats for, 365–366
border, 334–335
embedding, 49
floating, 113–114
format standards for, 11, 47–48
inappropriate in SVG, 370
multiple background, 335
positioning, 99–102
repeating background of, 98–99
replacing with CSS, 127–128, 318, 354
using as font, 356
using directly on canvas, 385
img element
alt attributes with, 49
embedding SVG images with, 373–374, 376
as empty element, 25–26
including images with, 47
immediate mode rendering, 379
importing style sheets, 124–125
inheritance, 82–83
inline elements
about, 72
defined, 38
displaying, 105–106
inline quotations, 207
nesting anchors in heading elements, 43
inline event handlers, 140–141
inline frames, 42–43
inline SVG, 374–375
innerHTML property, 147–148
input elements
about, 52
push button, 54–55
text and password, 52–53
type attribute for, 52
Internet Explorer. See also browsers
@import statements for older, 198
audio and video support in, 292
box model for, 185–189
box-shadow property and, 324
conditional comments for, 198–200
embedding fonts with, 358–359
errors specifying width and height in older, 113
font linking in, 361–362
hasLayout property problems, 190–193
HTML5 support in versions of, 293–294
inline SVG with, 374–375
inspecting DOM in, 152–153
libraries supporting canvas in, 387, 388
margins in Quirks mode, 221
min-width and max-width properties support in, 241
missing feature support in browsers, 200–202
support of addEventListener method, 141, 142, 146–147
SVG support by, 375–377
text-shadow property compatibility with, 322
version 8 DOCTYPE switching model, 183–185
ISO organization, 10
J
JavaScript. See also libraries
assessing need for, 143
book’s coverage of, 7
Boolean expressions in, 146–147
defining front-end interactivity with, 14
DOM and, 131–133
Ecma International standards for, 11
enabling HTML5 support in browsers, 294
form and link elements for DOM, 144–145
implementing, 10
libraries in, 149–152, 201–202
needed for canvas use, 381
syntax for SVG in, 377
transitions implemented in, 332
unobtrusive scripting with, 142–143, 201
ways to embed, 30–31
web workers and, 270
K
keyboard accessibility, 164
keyword values, 81
keywords
position property, 115–116
specifying font size with, 80
using with background-position property, 99–100
values for overflow, 108
L
label element, 58–59
language selectors, 121
last-child selector, 309
legend element, 59
letter-spacing property, 87
libraries, 149–152. See also Yahoo User Interface Library
choosing, 151
enabling HTML5 support in browsers, 294
IE support, 201–202
microformats with, 213
supporting canvas in IE, 387, 388
SVG support, 377
using CSS3 selectors with, 304
line break element (br), 33
line-height property, 85–87
lines in canvas context, 384
links, 41–47
absolute and relative URLs, 43–46
accessibility issues for, 169
anchor elements in, 41–42
broken code, 66
external CSS, 73
linked fonts, 355–357, 359–361
rel attributes for, 43
resource, 46–47
title attribute in, 42–43
liquid layouts, 241–242
list items, 119–120
list-style-image property, 120
list-style-type property, 120
lists
chaining nested, 90–92
horizontal, floated navigation, 233–235
nesting, 37
ordered, 36
unordered, 36
local storage feature, 270
location-aware services, 270
M
@media statements, 123, 343–346
maintenance goals, 4
maps, 372
collapsing, 109–110
specifying, 108–109
margins. See also margin property
Doubled Float-Margin Bug, 187–188, 193
Non-Collapsing Margins Bug, 188–189, 192
markup. See also HTML; XHTML; XML
accessibility guidelines for, 161
advantages of HTML5 figure element, 278–279
best practices, 203–217
commenting for, 35
consistency in, 206
ECML, 211
history of HTML, 20–22
HTML vs. XHTML, 66–68
key to good HTML5, 286
origins of HTML and XHTML, 18–19
PGML, 365
sample of CSS reset, 258–259
search engine optimization and, 211–212
semantically meaningful, 14–15
separating presentation, behavior, and, 14
SGML and XML for, 20
specifying document types, 26–28
syntax and semantics in, 19
understanding concepts of, 17
validating, 65–66
vector graphic standards for, 365
web page concepts for, 22–23
MathML, 271
max-width properties, 241
media queries, 341–351
about, 342–343
compatibility of, 350
purpose of, 347–350
user-agent sniffing vs., 351
using, 343–347
media types. See also media queries
embedding, 123
linking to style sheet, 122
style sheets for different, 121–122
using @media statements, 123, 343–346
menus, 56–57
meta elements, 30
metadata, 29
methods. See also specific methods
about DOM, 135
arguments and results of DOM, 136–137
microformats, 212–217
MIME (Multipurpose Internet Mail Extensions) types, 50, 375, 377
mimetype attribute, 289
min-width properties, 241
mouse states, 103–104
multi-column layouts, 237–243
markup for floated, 237–239
one true layout technique, 245
using faux columns, 245–246, 247, 249
using fixed-width columns in, 239–241
multi-column text, 330–331
multimedia
browser support of, 291–292
embedding video, 287–291
media queries, 341–351
supported in HTML5, 270
used in web sites, 49–51
multiple background images, 335
N
namespaces in XML, 368
naming conventions, 204
navigation. See also navigation bar; navigation lists
in HTML4, 277–278
in HTML5, 277–278, 280, 281, 282
gradient background for, 336–337
border around, 236–237
filling parent list items, 236
floating list items for, 233–235
Navigator, TrueDoc fonts, 355
nesting
anchor in heading element, 43
lists, 37
960 Grid System, 263
Non-Collapsing Margins Bug, 188–189, 192
non-empty elements, 24–25
nth-child selector, 307, 309–315
O
object element
about, 50–51
embedding SVG images with, 374, 376
HTML5 embedded features and, 287
using, 287
Ogg Theora codec, 287, 288, 291, 292
one true layout, 246–250
opacity property, 328
Opera. See also browsers
audio and video support in, 292
font linking in, 361–362
inspecting DOM in, 153
SVG support by, 375–376
text-shadow property with, 322
ordered lists (<ol>), 36
overflowing content, 108
P
padding
Non-Collapsing Margins Bug, 188–189, 192
page layouts, 105–116, 219–254
about, 105
adding different color to columns in, 244–250
block vs. inline elements, 105–106
borders, 110–112
box model for elements, 106–107
break throughs in CSS, 219–220
CSS resets for, 256–260
effect of hasLayout property on, 190–193
fixed-width, 239–241
float-based, 233–250
float property in, 113–114
floated multi-column layouts, 237–243
floating images, 113–114
footers, 243
frameworks and, 260–264
grid layouts, 250–253
height property, 108
horizontal centering, 220–222
margin property, 108–110
overflowing content, 108
padding element, 112
positioning, 224–233
specifying width and height for, 112–113
vertical centering, 223
paragraphs
about, 38
breaking lines in, 33
tag for, 32
text-align property with, 85
text-indent property with, 88
using line-height property, 85–87
password element, 52–53
paths with canvas element, 383
Peek-A-Boo Bug, 193
performance
CSS and web site, 129–130
font linking and, 362
resets and server, 257
PGML (Precision Graphics Markup Language), 365
PNG (Portable Network Graphics) files, 47–48, 327, 366
POSH (plain old semantic HTML), 206–211
Position Is Everything, 192, 193
positioning
CSS schemes for, 224–233
elements, 115–116
float-based layouts as workaround for, 233
images, 99–102
position keywords, 115–116, 225
preformatted text (<pre>), 33–34
presentation
associating CSS and documents, 72–73
inheritance of style, 82–83
scripting DOM object content separate from, 143–144
separating markup from, 71–72
specificity in CSS, 84–85
previewing styles in browser, 125–126
printing, CSS properties for, 120
progressive enhancement, 13–14, 200–201
properties, 76–82. See also specific properties
ARIA, 166
background, 95–103
debate over DOM innerHTML, 147–148
keyword values, 81
printing, 120
shadow, 386
text-decoration, 81–82
transitions with CSS3, 332–334
user interface, 121
prototyping with frameworks, 260, 261, 264
pull quotes, 285
Q
quality assurance. See code quality
Quirks mode, 27, 181–182, 187, 322
quotation marks (“”), 24
R
radio boxes, 53–54
readability
commenting and, 205–206
consistency in markup, 206
CSS, 129
formatting code, 204–205
importance of code, 204
naming conventions, 204
rectangles
drawing in canvas context, 382–383
relative positioning
page flow and, 231–232
using, 229–230
relative URLs, 43–46
repeating background images, 98–99
Reset Reloaded, 259
retained mode rendering, 379
rev attribute, 208
RFC 1866, 20
RGBa color values, 329
Rich Snippets, 213
roles in ARIA, 164–165, 210–211
rounded corners, 324–327
S
Safari. See also browsers
audio and video support in, 292
border-radius property support in, 327
box-shadow property and, 324
fallbacks for canvas support in, 379–380
rendering SVG graphics, 369
support for ARIA, 168
SVG support by, 375–376
Safari Web Inspector, 153–154
scalability of SVG images, 371
scope element, 172–174
screen readers, 169–170
script elements, 30–31
Script.aculo.us library, 152, 332
scripting. See also JavaScript
standards-based DOM, 142–149
SVG images and, 372
search engines
benefits of standards for, 217
optimizing, 211–212
section elements, 273, 283, 285
security, DOM and JavaScript, 148–149
selector-parsing hacks, 195
selectors, 304–316
about structural pseudo element, 304–305
adjacent sibling, 117
attribute, 117–118
chaining, 90–91
class, 83
defined, 74
first-child, 305–307
first-of-type, 307–308
grouping, 75–76
id, 83–84
last-child, 309
specialized, 121
target, 315–316
type, 75
semantics
best practices for HTML, 206–211
block and inline elements, 37–38
class attribute in HTML, 39–40
defined, 19
HTML 4.01, 21
id attribute in HTML, 40–41, 208–211
microformats, 212–217
search engine optimization and, 211–212
span attribute in HTML, 41
semicolon (;), 74
servers
navigating directories with relative URLs, 43–46
performance with resets, 257
scope of discussed in book, 7
serving
different HTML5 syntaxes, 294
style sheets for browsers, 196–200
SVG, 377
setAttribute method, 148
SGML (Standard, Generalized Markup Language), 20
shadow effects in CCS3, 318–324
box-shadow property, 322–324
multiple shadows, 320–322
text-shadow property, 318–319
sidebars, 278
span attribute, 41
specificity
CSS, 84–85
used with child and descendant selectors, 93
src attribute, 31
statement-parsing hacks, 195–196
states
ARIA, 166
dynamic selector mouse, 103–104
static positioning, 115, 116, 224
strong element, 38
structural pseudo element selectors
about, 304–305
first-child, 305–307
first-of-type, 307–308
last-child, 309
nth-child, 310–315
style elements, 31
Style Master, 130
summary element, 171–172
SVG (Scalable Vector Graphics), 366–378
accessibility and, 371
browser support for, 375–377
canvas element vs., 389
capacities of, 367
circles in, 369
concepts and syntax of, 367–369
coordinate system for, 369–370
DOM and, 378
ellipses in, 369
HTML5 capability for, 271
importance of, 11
including in web pages, 373–375
retained mode rendering, 379
serving, 377
uses for, 372–373
SVG Web, 377
switching
DOCTYPE switching, 183–185
IE 8’s compatibility mode, 183–185
syntax. See also specific markup languages
declaration blocks, 74
defined, 19
DOCTYPE declarations, 27–28
first-child selector, 306–307
HTML 4.01, 21
HTML vs. XHTML, 66–67
rules for header elements, 272–273
selectors for CSS, 74–76
serving different HTML5 syntaxes, 294
SVG, 367–369
T
tables, 59–62. See also columns; multi-column layouts
about, 59
accessibility of, 161, 171–174
adding different color to three-column layout, 244–250
cells spanning columns of, 61–62
CSS column markup for, 251–252
grid layouts and, 250–253
structure of, 60–61
table-based layouts, 219–220
zebra striping with nth-child selector, 310–315
tags
heading, 32
illustrated, 26
paragraph, 32
start, 24
target selector, 315–316
text. See also fonts
adjusting for various device displays, 347–350
aligning, 85
alt attribute and accessibility, 170
box-shadow property for, 322–324
color of, 76
CSS3 shadow effects for, 318–324
drawing, 384–385
horizontal centering of, 220–222
indenting, 88
layout properties in CSS, 85–88
letter-spacing property, 87
marking up characters entities, 63–64
multi-column, 330–331
multiple shadows for styled, 320–322
specifying multi-column layout width, 239–241
vertical centering of, 223
word-spacing property, 87
text-align property, 85
text-decoration property, 81–82
text element, 52–53
text-indent property, 88
text layout properties
letter and word spacing, 87
line-height, 85–87
text-align, 85
text-indent, 88
text-shadow property, 318–319
textarea elements, 57–58
3-Pixel Text Jog Bug, 193
titles
accessibility issues for, 169–170
title attribute in links, 42–43
title element, 29
transformations
canvas element and, 385
CSS, 335–336
transition effects in CSS3, 332–334
TrueDoc fonts, 355
TrueType fonts, 359–360
type selectors, 75
typographical selectors, 121
U
universal selector (*), 118–119, 257, 258
unordered lists (<ul>), 36
URI (Uniform Resource Identifier), 23
URLs (Uniform Resource Locators)
absolute and relative, 43–46
defined, 23
included in DOCTYPE, 27
user agent, 13
users
CSS interface properties for, 121
developing web for, 12–13
validating input data of, 149
V
validating
ARIA and HTML, 168–169
CSS, 125
DOM data, 149
HTML5, 294
markup, 64–65
vector images. See also SVG
bitmap vs., 366
browser support for, 365–366
evolving standards for, 365–366
SVG format for, 366–378
vendor-specific extensions in CSS3, 301–303
versions. See also CSS3; HTML5
Web Content Accessibility Guidelines, 159–163
vertical-align property, 223
vertical centering, 223
visibility property, 119
VML (Vector Markup Language), 365, 376, 388
W
W3C (World Wide Web Consortium). See also ARIA
accessibility guidelines, 159–169
commitment to accessibility, 157–158
CSS specifications by, 70, 297, 298, 300
development of XHTML, 22
HTML standards by, 10, 20, 22, 268–269
WCAG version 1 and 2, 159–163
WAI-ARIA. See ARIA
WCAG (Web Content Accessibility Guidelines), 159–163
Web Accessibility Initiative, 159, 163–169
web applications, 14, 268, 270
web development standards. See also code quality; W3C
break throughs in page layout, 219–220
browser modes and, 181–185
browser shortcomings and, 179–181, 202
contributors to, 4–5
CSS resets, 256–260
design embracing flexible display, 12–13
development of DOM and JavaScript, 131–133
evolving browser standards, 10–11
focusing on users vs. browsers, 12–13
font availability and, 353–354
good HTML5 markup and, 286
history of HTML standards, 20–22, 267–269
interoperability and, 11–12
key technologies, 11
making markup meaningful, 14–15
media queries, 341–351
overview, 389–390
problems with browser modes, 181–185
progressive site enhancement, 13–14, 200–201
relative age of web, 9
separating content, presentation, and behavior, 14
standards and interoperability of code, 12
using multimedia content, 49–51
Web Embedding Font Tool (WEFT), 358
body element components in HTML, 31–37
files, documents, and, 22–23
linking to, 46–47
semitransparent elements on, 327–328
SVG in, 373–375
user-editable, 270
Web apps vs., 14
web workers, 270
Webkit-based browsers, 299, 302
websites. See also accessibility; W3C; WWW
accessing links and titles, 169–170
book’s, 8
CSS and performance of, 129–130
developing for users, 12–13
flexibility of, 13
goals for developing, 4
hacks and bug fixing for, 193–196
interoperability of, 11–12
long-term maintenance goals for, 4
meaningful markup for, 14–15
multimedia content in, 49–51
platform for web page applications, 14
profitability of accessibility, 158–159
progressive enhancement of, 13–14
WHATWG (Web Hypertext Application Technology Working Group), 268, 269
width
fixed-width layouts, 239–241
specifying for page layout, 112–113
window object, 136–137
word-spacing property, 87
WWW (World Wide Web). See also W3C; web pages; websites
devices accessing, 339–340, 351
evolution of browser standards, 10–11
relative age of, 9
X
X2V service, 213
X11 color chart, 76
XHTML (Extensible Hypertext Markup Language). See also HTML
about HTML and, 17
case sensitivity of, 22
converting HTML to, 66
defining DOCTYPE, 26–28
inline SVG in, 374–375
XHTML2
heading-level models in HTML5 and, 275
HTML5 acceptance vs., 271
HTML5’s heading-level model and, 276
XML (Extensible Markup Language)
namespaces in, 368
parsing rules for, 67
SVG concepts and syntax, 367–369
syntax of SGML and, 20
xmlns attribute, 368
Y
Yahoo User Interface (YUI) Library
about, 152
graded browser approach, 342
tools for CSS frameworks, 263
Yahoo Reset CSS, 259
YAML (Yet Another Multicolumn Layout), 262