INDEX
Symbols
@charset rule
applying multiple style sheets to a page, 191
declaring at start of style sheet, 101
@font-face at-rule (CSS3), 322–323
@font-face construct, and applying multiple style sheets to a page, 192
@import rules
applying multiple style sheets to a page, 191
<link> element compared to, 281–282
and media type parameter, 17
performance concerns, 277
targeting print styles, 120–121
@media rules
{} (curly braces) and, 119
applying multiple style sheets to a page, 192
block, optimizing for performance, 283
CSS rule, 17
targeting print styles, 119–120, 192
@page rule
applying multiple style sheets to a page, 192
properties, 124
size property, 126
support for, 125
(backslash), delimiting beginning of escape sequence, 99
<body> element, HTML compared to XML, 265
:after pseudo-element, 53, 92–93
:before pseudo-element, 53, 92–93
:first-child pseudo-class, 51–52
:first-letter pseudo-element, 52–53
:first-line pseudo-element, 53
:first pseudo-class, 52
:lang() pseudo-class, 50
:last-child pseudo-class, 51–52
:left pseudo-class, 52
:right pseudo-class, 52
::selection pseudo-element, 53
<div> element, overusing arbitrary, 196
!important declarations, 36
<g> element, and SVG example, 11
<link> elements
@import rules compared to, 281–282
media attribute, 17
| (pipe character), 252
<rect> element, and SVG example, 10
<style> element, media attribute, 17
* (universal) selector, 280
A
about attribute, 218
absolute length units, 62
absolute positioning, 69, 73–75
abstracting presentation of content
media types
overview of, 16
print, 21
targeting, 18
overview of, 15
accented characters, 100
adjacent sibling combinator, 56–57
Adobe
Illustrator, and SVG, 8
Photoshop, and color models, 122
SVG plug-in, 259
aesthetics, and proportional values, 235
:after pseudo-element, 53, 92–93
Ahonen, Tomi T., 20
all media type, 17
Allsopp, John, Microformats: Empowering Your Markup for Web 2.0, 217
alphabetic system styles, 103
alphabetizing declarations, 199–200
anchor elements, hyperlinks compared to, 48
animated elements, optimizing for performance, 284
animation (CSS3), 330
anonymous inline boxes, 67
AP boxes, 74
application, definition of, 5
applying multiple style sheets to a page, 191–192
architecture of CSS code, 191–193
at-rules
See also specific rules
applying multiple style sheets to a page and, 191–192
description of, 59
Atom Syndication Format, 6–8, 259–260
attribute matching selectors (CSS3), 301
attributes
charset, 39
description of, 4
href, 37
id, 11
media, 39
style, 10
title, 39
audible CSS, 335
authoring conventions. See patterns
author style sheets
inline styles, 40
media and character encoding details, 39
azimuth property, 21
B
background color
applying to mobile web page, 166
setting with foreground color, 33
background-image property (CSS3), 328
background images with visible lines at points of grid, 236
background-size property (CSS3), 328
backslash (), delimiting beginning of escape sequence, 99
baked-in CSS rules, and browsers, 230
bandwidth, and mobile web, 153–154
bandwidth usage, optimizing web sites to decrease, 277
Base CSS (YUI CSS Foundation), 239
:before pseudo-element, 53, 92–93
Berners-Lee, Tim, 333
block-level boxes, 67
blocks
adding visual separation to, 263
containing, 68
displaying elements as, 263
margins and contrast, establishing in viewport, 264
typography for, 265
<body> element, HTML compared to XML, 265
border and background effects (CSS3)
image resizing, 328
multiple backgrounds, 327
overview of, 323
border area of CSS box, 83
border-box model, 84
border property, 279
border-radius rule (CSS3), 324–326
borders for mobile web page, 169
boxes. See CSS boxes; marker boxes
box-shadow property (CSS3), 326–327
braille media type, 17
browsers
See also specific browsers
baked-in CSS rules and, 230
major, 293
Chrome, 295
Safari, 295, 301, 315, 321, 329
for mobile web
Internet Explorer Mobile, 157
Mobile Safari, 159
Openwave Mobile Browser, 158
Opera Mobile and Opera Mini, 156
SVG and, 259
unstyled XML viewed in, 262
C
calc() function, 66
CDATA (character data), unparsed, and XML, 250
chaining
attribute selectors, 46
character data (CDATA), unparsed, and XML, 250
character encoding details, naming and specifying, 39
characters, representing in style sheet, 100
charset attribute, 39
children, description of, 54
cHTML (Compact HTML), 155
ch unit, 61
class attribute selectors, 46–48
classes, naming conventions for, 201. See also pseudo-classes
classical inheritance schemes for style sheets, 192
classitis, 196
cm unit, 62
CMYK color model, 122
code, optimizing, 278
coding principles
See also commenting code
alphabetize declarations, 199–200
avoid overuse of arbitrary <div> elements, IDs, or classes, 196
divide design principles into files, 197
divide style sheets into logical sections, 196
formatting conventions, 198–199
inheritance, taking advantage of, 193–194
organize from general to specific, 194–196
overview of, 193
use shortest URL that works, 197–198
color
background
applying to mobile web page, 166
setting with foreground color, 33
for handheld media type, 166–173
color keywords, 59
color property, 65
Color Small Screen Rendering (CSSR), 156
color values, writing in CSS3, 296–299
combinators
descendant, 55
combining
multiple style sheets, 189
style sheets, 282
commenting code
CSSEdit, 204
signposts, 204
TextMate, 205
communication. See intra-team communication techniques
Compact HTML (cHTML), 155
competing technologies, and mobile web, 154
complementing semantics with CSS, 24
components, styling common. See patterns
compressing style sheets, 282–283
Compressor (YUI), 282
concluding escape sequences, 101
consistency in coding, 200–201
containing blocks, 68
content
generated
:before or :after pseudo-elements, 92–93
content property and, 90
escape sequences in strings, 99–101
replacing content with pseudo-content, 97–98
using to make data more readable, 267
repurposing for multiple formats, 334
content area of CSS box, 83
content attribute, 219
content-box model, 84
content functions, 66
content presentation
abstracting, 15
media types
overview of, 16
print, 21
targeting, 18
in multiple formats, 23
putting control of in hands of users, 14
:before or :after pseudo-elements, 90–93
content syndication formats, 6–8
continuous media, 117
contrast, when printing, 135
control of presentation of content, putting in hands of users, 14
conventions, 213. See also patterns
corners, rounded (CSS3), 324–326
costs, optimizing web sites to decrease, 277
counter-increment property, 106
counter-reset property, 106
counters
atypical numbering with, 106–108
automatic numbering with, 105–106
multiple, using
numbering groups of elements and siblings, 109–110
overview of, 108
total counts, displaying, 111–112
counters() function, 112
counting backward, 107
counting with letters, 107
creator, 218
CSS2
pseudo-elements in, 52
CSS3
border and background effects
image resizing, 328
multiple backgrounds, 327
overview of, 323
features
animation, 330
attribute matching selectors, 301
color units and opacity, 296–299
General Sibling Combinator, 299–300
transitions, 329
modules of
levels of completion, 294
overview, 293
overview of, 294
priority of projects of, 293
pseudo-classes
E:empty, 312
E:first-of-type, 308
E:nth-last-of-type(n), 307
E:only-child, 311
E:only-of-type, 311
E:root, 301
E:target, 314
overview of, 301
pseudo-elements in, 52
sources of information on, 330
vendor extensions, 294
CSS3 Generated and Replaced Content module, 97
CSS boxes
content-box vs. border-box models, 83–85
positioning schemes
overview of, 69
static, 69
CSS cascade
stages of, 34
user agent style sheets and, 32
CSSEdit, 204
CSS Formatter and Optimiser tool, 282
CSSR (Color Small Screen Rendering), 156
CSS selectors, using in JavaScript, 182–183
cue-after property, 21
cue-before property, 21
curly braces ({}), and @media rules, 119
cursive keyword, 141
D
datatype attribute, 219
declarations
DOCTYPE, 6
font-family, 136
!important, 36
white space, 101
XML, 248
default media type, 17
default styles, removing, 230–231
definition list, elements of, 101
descendant combinator, 55
descendant selectors, 222, 280–281
design principles, dividing into files, 197
design relationships, defining, 192–193
desktop device simulators, 175
device pixels, 61
displaying total counts, 111–112
display property, 68
displays of mobile browsers, comparing, 160–161
<div> element, overusing arbitrary, 196
divitis, 196
DOCTYPE (document type) declaration, 6
document tree
combinators and, 54
unstyled XML displayed as, 262
Document Type Definition (DTD), 6
document type (DOCTYPE) declaration, 6
dots per inch (dpi), 61
Dublin Core metadata, styling, 224–226
dynamic pseudo-classes, 49
E
E:checked pseudo-class (CSS3), 316–317
E:disabled pseudo-class (CSS3), 316–317
E:empty pseudo-class (CSS3), 312
E:enabled pseudo-class (CSS3), 316–317
E:first-of-type pseudo-class (CSS3), 308
E:last-child pseudo-class (CSS3), 307–308
E:not(s) pseudo-class (CSS3), 318–319
E:nth-child(n) pseudo-class (CSS3), 301–303
E:nth-last-of-type(n) pseudo-class (CSS3), 307
E:only-child pseudo-class (CSS3), 311
E:only-of-type pseudo-class (CSS3), 311
E:root pseudo-class (CSS3), 301
E:target pseudo-class (CSS3), 314
Edwardian Script ITC font, 141
elements
See also pseudo-elements
anchor, hyperlinks compared to, 48
animated, optimizing for performance, 284
<body>, HTML compared to XML, 265
description of, 4
displaying as blocks, 263
<div>, overusing arbitrary, 196
<g>, 11
parent, 54
<rect>, 10
<style>, 17
elevation property, 21
embedding
line breaks in generated content, 100
URLs in printed media, 138
embossed media type, 17
em unit, 60
escape sequences in strings, 99–101
examotion RENESIS Player, 259
exposing
metadata through attr() function, 94–97
structure with nested counters, 112–113
expressions, and optimizing for performance, 284
extensible, definition of, 251
Extensible Hypertext Markup Language. See XHTML
Extensible Markup Language. See XML
Extensible Stylesheet Language Transformations (XSLT), 8
Extensible Style Sheet Language (XSL), 249–250
extensible vocabularies, adding to semantic markup, 217–219
ex unit, 60
F
feed readers, as user agents, 13
files, dividing design principles into, 197
fill property, and SVG example, 10
filters, and optimizing for performance, 284
Firebug
Net panel, 285
YSlow plug-in for, 286
Firefox browser (Mozilla)
basic markup example in, 30
CSS3 and, 295
font color in, 123
Gecko rendering engine, 18, 75, 158, 295
repaint tracker for, 288
RSS feeds
accessed through local filesystem, 8
viewed over HTTP, 6
support for user style sheets in, 35
user agent style sheets, 32
XSLT and, 8
:first-child pseudo-class, 51–52
:first-letter pseudo-element, 52–53
:first-line pseudo-element, 53
:first pseudo-class, 52
flag design, changing color IDs in, 254–256
floated positioning, 69, 78–79
float property, 69
font color, applying to mobile web page, 166
@font-face at-rule (CSS3), 322–323
@font-face construct, and applying multiple style sheets to a page, 192
font-family declaration, 136
font names, 59
fonts
Fonts CSS (YUI CSS Foundation), 238
font size, and printing, 136
Fonts module (CSS3), 319
foreground color, setting with background color, 33
formatting conventions for code, 198–199
formatting page for handheld media type, 164–173
fragment identifier, 51
frameworks
advantages of, 237
constraints of, 238
grid-based design and, 231–236
grid diagnostics, tools for, 236
written by others, working with, 238
functional notation/functions
calc() function, 66
content functions, 66
counters(), 112
description of, 50
overview of, 63
url() function, 64
G
gd unit, 61
Gecko browsers, and font color, 123
Gecko rendering engine, 18, 75, 158, 295
<g> element, and SVG example, 11
general sibling combinator, 58, 299–300
generated content
:before or :after pseudo-elements, 92–93
content property and, 90
escape sequences in strings, 99–101
replacing content with pseudo-content, 97–98
using to make data more readable, 267
glyph marker styles, 102
glyphs, 67
Google Android SDK, 175
Google Voice, 335
grid diagnostics, tools for, 236
Grids CSS (YUI CSS Foundation), 239–241
groups of elements, numbering, 109–110
The Guardian, 119
GZipping style sheets, 283
H
handheld media type
color and typography, establishing, 166–173
WebKit and, 174
hardware, and mobile web, 152–153
headings
for mobile web page, 170
“Hello world!” example in SVG, 9
hierarchical context, 4
history of mobile web technology, 154–156
home button, touch-friendly, 179
href attribute (hyperlink reference), 37
hResume microformat design, 133
HSL values, writing color values using, 296–297
HTML (Hypertext Markup Language)
<body> element in, 265
evolution of markup conventions in, 214–215
extracting style sheet from, 144–147
freedom from, 248
linking to print styles in, 119
semantics of, 5
XML compared to, 248
hyperlink reference (href attribute), 37
hyperlinks
anchor elements compared to, 48
for mobile web page, 167
hypertext, definition of, 3
Hypertext Markup Language. See HTML
I
id attribute, and SVG example, 11
idioms, 213. See also patterns
IDs
naming conventions for, 201
overusing, 196
IE. See Internet Explorer
Illustrator (Adobe), and SVG, 8
image resolution, and printing, 124
images
adding to XML document, 268
replacing marker boxes with, 103
!important declarations, 36
@import rules
applying multiple style sheets to page and, 191
<link> element compared to, 281–282
and media type parameter, 17
speed and, 277
targeting print styles using, 120–121
information box, improving display of, 139–140
inheritance
classical, and style sheets, 192
taking advantage of when coding, 193–194
using to optimize performance, 280
initial containing blocks, 74
inline-level boxes, 67
inline styles, 40
inserting page breaks, 125
interaction paradigms, and mobile web, 152–153
Internet Explorer (IE)
CSS3 and, 295
font color in, 123
styling XML namespaces in, 253
SVG and, 259
Trident rendering engine, 18, 295
Internet Explorer 6, and XML declaration, 248
Internet Explorer 7, support for user style sheets in, 35
Internet Explorer Mobile, 157
intra-team communication techniques
CSS commenting
CSSEdit, 204
signposts, 204
TextMate, 205
overview of, 201
in unit, 62
iPhone browser
bookmarking with, 181
building native iPhone application, 183
Dashcode.app IDE and, 183
iPhone Developer SDK, 175
iPhone Simulator application, 175
iPhone simulators, 174
iPod browser, bookmarking with, 181
J
JavaScript, using CSS selectors in, 182–183
K
keywords
color, 59
cursive, 141
font names and, 59
!important, 36
landscape, 126
overview of, 59
portrait, 126
L
landscape keyword, 126
:lang() pseudo-class, 50
:last-child pseudo-class, 51–52
latency, and mobile web, 153–154
layout properties, WebKit screen, 176–177
:left pseudo-class, 52
lengths
absolute length units, 62
overview of, 60
lengthy descendant selector, 280–281
letters, counting with, 107
line breaks, embedding in generated content, 100
line-height property, 144
linguistics of markup languages, 4–5
<link> elements
@import rules compared to, 281–282
media attribute, 17
linking
to print styles in HTML, 119
style sheets in XML, 250
styling to be touch-friendly, 177–181
list-item boxes, 68
list-itis, 110
list rendering, whitespace used in, 33
lists, ordered (numbered), 90–91
list-style-image property, 103
list-style-position property, 104–105
list-style-type property, 102
list styling
built-in marker box styles, using, 102–103
marker boxes, changing position of, 104–105
replacing marker boxes with custom images, 103
logical sections, dividing style sheets into, 196
Lulu web site, 335
M
margin area of CSS box, 83
margin property, and list rendering, 33
margins, setting for printed page, 124–129
marker boxes
built-in marker box styles, 102–103
characteristics of, 102
replacing with custom images, 103
marker-offset property, 105
markup, using XML for
advantages of, 248
overview of, 247
markup languages, linguistics and semantics of, 4–5. See also specific markup languages
markup patterns
microformats
rel-tag links, styling, 220–221
styling, 220
opportunities and benefits of, 219–220
overview of, 214
RDFa
reusing and adding semantics, 216
media attribute, screen value, 39
@media block, and optimizing for performance, 283
@media CSS rule, 17
media encoding details, naming and specifying, 39
media groups, and media types, 15–16
media queries
targeting media types and, 207–209
using, 177
media types
all, 17
braille, 17
mobile strategy, developing, 209–210
print, 21
targeting, 18
metadata, exposing through attr() function, 94–97
Meyer, Eric, 138
microformats
class attribute, 216
styling
Microformats: Empowering Your Markup for Web 2.0 (Allsopp), 217
Microsoft. See also Internet Explorer
Vector Markup Language, 9
Word, as user agent, 13
MIME types, text/html, 249
minifying style sheets, 282
minimizers, 282
mm unit, 62
mobile media, 20
Mobile Safari browser
Apple iPhone and, 150
DOM Touch API and, 183
full-screen mode, changing to, 183
overview of, 159
Show Development Menu, 174
mobile strategy, developing, 209–210
mobile web
browsers
Blazer, 157
Internet Explorer Mobile, 157
Mobile Safari, 159
Openwave Mobile Browser, 158
Opera Mobile and Opera Mini, 156
limitations and challenges of development on
bandwidth and latency, 153–154
hardware, interaction, and usability, 152–153
technology options and capabilities, 153–154
possibilities of, 149
style for
support for browsing on, 150
WebKit browsers
CSS selectors, using in JavaScript, 182–183
CSS transforms and transitions, 182, 185–186
styling links to be touch-friendly, 177–181
mod_deflate module, 283
mod_gzip module, 283
Mozilla Firefox. See Firefox browser
multiple backgrounds (CSS3), 327
multiple counters
numbering groups of elements and siblings, 109–110
overview of, 108
total counts, displaying, 111–112
multiple style sheets
combining, 189
music composer list
final style sheet for, 271–273
N
namespaces
extending XHTML through, 251–252
styling
in Internet Explorer, 253
XML, 6
naming collisions, and microformats, 216
naming conventions, classes and IDs, 201
narrow patterns, 215
navigation buttons, touch-friendly, 178
navigation toolbar for mobile web page, 167–171
nested counters, exposing structure with, 112–113
news readers, as user agents, 13
normal document flow, 69
numbering
atypical, using counters, 106–108
automatic, using counters, 105–106
groups of elements and siblings, 109–110
numbering system styles, 103
number values
lengths
absolute length units, 62
overview of, 60
percentages, 62
time, frequencies, and angles, 62–63
num-links counter, 112
O
Oomph Microformats Toolkit, 217
opacity property (CSS3), 297–299
Open Font Library, 322
Open Mobile Alliance, 155
Openwave Mobile Browser, 158
Opera browser
CSS3 and, 295
font color in, 123
Presto rendering engine, 18, 295
support for user style sheets in, 35
Opera Mini browser, 156
Opera Mobile browser
handheld media type and, 20
release of, 155
optimizing for performance
absolute or fixed positioning on animated elements, using, 284
bandwidth usage and costs, decreasing, 277
combining style sheets, 282
compressing style sheets, 282–283
CSS shorthand and, 279
expressions, filters, and, 284
inheritance and, 280
lengthy descendant selector and, 280–281
<link> elements compared to @import rules, 281–282
minifying style sheets, 282
placement of style sheets, 281
referencing external CSS, 284
speed, increasing, 276
techniques for, 278
Firebug, 285
overview, 284
reflow and repaint timers and visualizers, 287
WebKit Web Inspector, 287
YSlow Firebug plug-in, 286
universal (*) selector and, 280
organization of style sheets
See also architecture of CSS code; coding principles; intra-team communication techniques
need for, 190
optimizing web sites for performance and, 277–278
successful model for, 190
origins of style sheets, 34
overflow, 68
overlapping technologies, and mobile web, 154
overriding default style sheets, 32
overusing arbitrary <div> elements, IDs, or classes, 196
P
padding area of CSS box, 83
padding property, and list rendering, 33
page box, 124
page breaks, 125
@page construct, and applying multiple style sheets to page, 192
paged media, 117
page, formatting for handheld media type, 164–173
@page rule
properties, 124
size property, 126
support for, 125
paper, 3:4 sheet of
central rectangle, adding to, 233
content, adding to, 235
diagonal lines on, 232
filling in rectangles dependent on diagonals, 233
filling out rectangles to corners, 234
inserting rectangle dependent on diagonals, 232
margins and gutter, adding to, 234
rectangles, adding to, 231
parent element, 54
participation
overview of, 339
in W3C discussion groups, 340
in Web Standards Project, 340
patterns
markup
overview of, 214
reusing and adding semantics, 216
opportunities and benefits of, 219–220
overview of, 213
pc unit, 62
percentages, 62
performance. See optimizing for performance
persistent style sheets, 206
Photoshop (Adobe), and color models, 122
pipe character (|), 252
pitch property, 21
pixels, 61
placement of style sheets, and optimizing for performance, 281
Plain Old Semantic HTML (POSH), 248
plug-ins, support for SVG, 259
portrait keyword, 126
positioning marker boxes outside or inside document flow, 104–105
positioning on animated elements, and optimizing for performance, 284
position property, 69
preferred style sheets, 206
presentation layer
CSS as, 15
CSS-generated content and, 98
presentation of content
abstracting, 15
media types
handheld, 20
overview of, 16
print, 21
targeting, 18
in multiple formats, 23
putting control of in hands of users, 14
Presto rendering engine, 18, 295
previewing WebKit pages, 174–175
PrinceXML, 334
print command, convention for, 118
image resolution, 124
overview of, 121
units, 123
print, expanding CSS in, 334–335
printing web pages
See also print style sheet
page box, 124
page breaks, 125
printer style
image resolution, 124
overview of, 121
units, 123
size property, 126
print style sheets
future of, 129
targeting
linking to print styles in HTML, 119
overview of, 118
projection media type, 16, 17, 19–20
prolog, XML, 248
properties
for @page rule, 124
auditory, 21
border, 279
color, 65
content
:before or :after pseudo-elements, 90–93
counter-increment, 106
counter-reset, 106
CSS3
background-image, 328
of CSS box, 83
display, 68
elevation, 21
float, 69
layout, and WebKit screen, 176–177
line-height, 144
list rendering, 33
list-style-image, 103
list-style-type, 102
marker-offset, 105
page-break, 125
position, 69
size, 126
border-radius, 185
box-shadow, 185
transform, 184
transition-duration, 185
transition-timing-function, 185
property attribute, 219
property/value pairs, and SVG, 257–259
proportional values, and aesthetic pleasure, 235
pseudo-classes
:first-child and :last-child, 51–52
:hover, :active and :focus, 49–50
:lang(), 50
:left, :right and :first, 52
pseudo-classes (CSS3)
E:empty, 312
E:first-of-type, 308
E:nth-last-of-type(n), 307
E:only-child, 311
E:only-of-type, 311
E:root, 301
E:target, 314
overview of, 301
pseudo-content. See generated content
pseudo-elements
:before, :after, and ::selection, 53
:first-line, 53
pt unit, 62
px unit, 60
Q
querySelector(), 182
querySelectorAll(), 182
R
RDFa
RDF (Resource Description Framework), 218
<rect> element, and SVG example, 10
referencing external CSS, 284
Reflowr cross-browser bookmarklet, 287
reflows, and performance, 278
rel-tag links, styling, 220–221
removing
site navigation from page, 138
rem unit, 61
rendering engines, 18. See also specific engines
RENESIS Player (examotion), 259
repaints, and performance, 278
repaint tracker for Mozilla Firefox, 288
replacing content with pseudo-content, 97–98
Reset CSS (YUI CSS Foundation), 238
Resig, John, 288
resource attribute, 219
Resource Description Framework (RDF), 218
résumé print style example, 129–147
reusing markup patterns and adding semantics, 216
RGB color model, 122
:right pseudo-class, 52
root element
Atom, 6
RSS, 6
SVG, 9
Rule of Least Power, and choosing between CSS and XSL, 250
rules
See also at-rules; specific rules
baked-in CSS, and browsers, 230
organizing from general to specific, 194–196
S
Safari browser
See also WebKit rendering engine
basic markup example in, 31
CSS3 and, 295
font color in, 122
Show the Develop Menu option, 287
support for user style sheets in, 35
user agent style sheets, 32
scalable vector graphics (SVGs)
browser support for, 259
screen media, 117
screen media type, 16, 18–19, 174
screen readers, as user agents, 21
screen sizes, and mobile web, 151–152
search engines, as users, 13
selection model, 338
::selection pseudo-element, 53
selector groups
defining design relationships using, 192–193
using to optimize performance, 279–280
selectors
combinators
child, 55
descendant, 55
CSS3
attribute matching, 301
background-size, 328
descendant, and styling hCards, 222
optimizing, 278
overview of, 40
simple
class attribute selector, 46–48
overview of, 41
universal type selector, 44–45
universal (*), 280
writing using pipe character, 252
self-documenting, style sheets as, 190
semantic markup, and user agents, 14
semantic patterns
markup
overview of, 214
reusing and adding semantics, 216
opportunities and benefits of, 219–220
overview of, 213
semantics
complementing with CSS, 24
of HTML, 5
separation of concerns principle, 3, 5
SGML (Standard Generalized Markup Language), 5
shorthand, using to optimize performance, 279
siblings, 54
signposts, comment, 204
simple selectors
overview of, 41
pseudo-classes
:first-child and :last-child, 51–52
:hover, :active and :focus, 49–50
:lang(), 50
:left, :right and :first, 52
pseudo-elements
:before, :after, and ::selection, 53
:first-line, 53
site navigation, removing from page, 138
size property, 126
skipping numbers, 107
specificity, and organization of CSS code, 191
speech-rate property, 21
speed, optimizing web sites to increase, 276
spiders, 13
spread, printing, 124
Standard Generalized Markup Language (SGML), 5
static positioning, 69
stress property, 21
strings, escape sequences in, 99–101
string values, 63
structure, exposing with nested counters, 112–113
style attribute, and SVG example, 10
<style> element, media attribute, 17
style for mobile web
style sheet libraries
overview of, 229
style sheets
See also author style sheets; organization of style sheets; print style sheets
characters, representing in, 100
classical inheritance and, 192
declaring @charset rule at start of, 101
dividing into logical sections, 196
GZipping, 283
minifying, 282
origins of, 34
overriding default, 32
persistent, 206
placement of, and optimizing for performance, 28
preferred, 206
as self-documenting, 190
styling common design components. See patterns
styling generated content, limitations on, 98–99
Stylish extension, 35
substring matching attribute selectors, 46
summary points, improving on résumé, 144
SVGs (scalable vector graphics)
browser support for, 259
T
tap behavior, customizing, 181
targeting media types
handheld, 20
overview of, 18
print, 21
technology options and capabilities, and mobile web, 153–154
text/html MIME type, 249
TextMate, 205
Text module (CSS3), 319
text-shadow property (CSS3), 320–321
text-to-speech features of operating systems, 22
3:4 sheet of paper
central rectangle, adding to, 233
content, adding to, 235
diagonal lines on, 232
filling in rectangles dependent on diagonals, 233
filling out rectangles to corners, 234
inserting rectangle dependent on diagonals, 232
margins and gutter, adding to, 234
rectangles, adding to, 231
title attribute, 39
tools
CSS Formatter and Optimiser, 282
grid diagnostic, 236
performance optimization
Firebug, 285
overview of, 284
reflow and repaint timers and visualizers, 287
WebKit Web Inspector, 287
YSlow Firebug plug-in, 286
YUI Compressor, 282
YUI Grids Builder, 241
total counts, displaying, 111–112
touch-friendly, styling links to be, 177–181
transforms
transitions
CSS3, 329
Trident rendering engine, 18, 295
triple, 218
tty media type, 17
tv media type, 17
typeof attribute, 219
typographic effects (CSS3)
typography for handheld media type, 166–173
TypoGridder tool, 236
U
Unicode code points, and escape sequences, 100
unit identifiers, 60
units
absolute length, 62
for print, 123
universal (*) selector, 280
universal type selectors, 44–45
unstyled pages, 28
unstyled XML displayed as document tree, 262
up-to-date, remaining, 339–341
URI fragments, 50
url() function, 64
URLs
embedding in printed media, 138
using shortest that works, 197–198
usability, and mobile web, 152–153
user agent detection, 173
user agents
detection features, limitations of, 23
inconsistencies across, 230
screen readers as, 21
semantic markup and, 14
user agent style sheets, 28–34
V
values
functional notation and
calc() function, 66
content functions, 66
overview of, 63
url() function, 64
percentages, 62
strings, 63
time, frequencies, and angles, 62–63
Vector Markup Language (VML), 9
vendor extensions, 294
vh unit, 61
in browser, 133
in print without styles, 135
with site navigation removed and hyperlinks toned down, 138
viewport
description of, 33
establishing margins and contrast in, 264
visual rendering and formatting
CSS boxes and document flow, 67–69
overview of, 66
positioning schemes
overview of, 69
static, 69
VML (Vector Markup Language), 9
vm unit, 61
voice-family property, 21
vw unit, 61
W
W3C discussion groups, participating in, 340
W3C (World Wide Web Consortium), 5
WAP (Wireless Application Protocol), 155
Web
future of
audible CSS, 335
expanding CSS in print, 334–335
history of, 333
opportunities and, 334
web browsers
See also specific web browsers
aural, 21
overriding default style sheets of, 32
support for user style sheets in, 35–36
supporting web queries, 23
as user agents, 12
Web Fonts module (CSS3), 319, 322–323
Web Hypertext Application Technology Working Group, 336
WebKit rendering engine
CSS selectors, using in JavaScript, 182–183
CSS transforms and transitions, 182, 185–186
overview of, 18, 75, 159–160, 295
styling links to be touch-friendly, 177–181
Web Inspector network timeline, 287
border-radius property, 185
box-shadow property, 185
transform property, 184
transition-duration property, 185
transition-timing-function property, 185
web pages
basic markup example
with default styles zeroed out, 32
in Firefox, 30
in Safari, 31
printing
page box, 124
page breaks, 125
size property, 126
viewing
in browser, 133
in print without styles, 135
with site navigation removed and hyperlinks toned down, 138
web sites
for CSS3 developments, 330
Lulu, 335
optimizing for performance, 276–278
Web Standards Project, participating in, 340
whitespace in list rendering, 33
white space declaration, 101
wide patterns, 215
Wireless Application Protocol (WAP), 155
Wireless Markup Language (WML), 155
Word (Microsoft), as user agent, 13
word-wrap property (CSS3), 319–320
World Wide Web, evolution of, 149
World Wide Web Consortium (W3C), 5
Wozniak, Steve, 209
X
x-axis of CSS box, 79
XHTML (Extensible Hypertext Markup Language)
extending through namespaces, 251–252
styling XML namespaces, 252–253
XHTML Basic, 155
XML (Extensible Markup Language)
See also XHTML
<body> element in, 265
content syndication formats, 6–8
development of, 5
Document Type Definition and, 6
namespaces, 6
prologue, 6
unstyled, displayed as document tree, 262
using for markup
advantages of, 248
overview of, 247
XML document founded on custom markup
final style sheet for, 271–273
xml-stylesheet prologue, 8
XPath, CSS3 Selectors compared to, 338
XSL (Extensible Style Sheet Language), 249–250
XSL Formatting Objects (XSL-FO)
typical workflow, 337
XSLT (Extensible Stylesheet Language Transformations), 8
Y
y-axis of CSS box, 79
YSlow Firebug plug-in, 286
YUI Compressor, 282
YUI Grids Builder, 241
Z
z-axis of CSS box, 79
zeroing out default style sheets, 32