Introduction |
|
1 | (1) |
About This Book |
|
1 | (1) |
Foolish Assumptions |
|
1 | (1) |
Icons Used in This Book |
|
2 | (1) |
Beyond the Book |
|
3 | (1) |
Where to Go from Here |
|
3 | (2) |
|
Part I Page Structure and Design with HTML5 and CSS3 |
|
|
5 | (90) |
|
Chapter 1 Structure and Design with HTML5 and CSS3 |
|
|
7 | (28) |
|
Realizing the Magic of HTML5 and CSS3 |
|
|
9 | (2) |
|
Not all new ... but different |
|
|
11 | (3) |
|
HTML5: Building on HTML techniques |
|
|
14 | (1) |
|
Understanding HTML Foundations |
|
|
15 | (1) |
|
Five things you need to know about HTML |
|
|
16 | (2) |
|
Getting started with a basic HTML template |
|
|
18 | (2) |
|
Identifying HTML document structure |
|
|
20 | (1) |
|
Knowing basic element syntax |
|
|
21 | (1) |
|
Working with the <head> element |
|
|
22 | (1) |
|
Using the <body> element and <div> tags |
|
|
22 | (2) |
|
Using headings, lists, and links |
|
|
24 | (2) |
|
|
26 | (1) |
|
|
27 | (3) |
|
|
30 | (1) |
|
Examining CSS style definitions |
|
|
30 | (2) |
|
Combining style definitions |
|
|
32 | (1) |
|
Moving Forward with HTML5 and CSS3 |
|
|
33 | (2) |
|
Chapter 2 Deploying HTML5 |
|
|
35 | (24) |
|
Identifying the Advantages of HTML5 |
|
|
38 | (1) |
|
Knowing the Price of Using HTML5 |
|
|
39 | (1) |
|
Introducing the Simplified Doctype Declaration |
|
|
40 | (2) |
|
Understanding HTML5's New, Standardized Structure Elements |
|
|
42 | (1) |
|
|
43 | (1) |
|
A brief introduction to semantic elements |
|
|
44 | (1) |
|
A new role for basic tags |
|
|
47 | (1) |
|
|
48 | (2) |
|
Taking a Quick Look at HTML5's New Form Tools |
|
|
50 | (3) |
|
HTML5 Elements for Scripting with JavaScript |
|
|
53 | (1) |
|
|
53 | (1) |
|
Using the <canvas> element |
|
|
54 | (5) |
|
Chapter 3 CSS3 for Design, Interactivity, and Animation |
|
|
59 | (18) |
|
Breaking Out of the Box with CSS3 Design |
|
|
62 | (1) |
|
|
62 | (1) |
|
|
63 | (1) |
|
Replacing Images with CSS3 |
|
|
64 | (1) |
|
|
65 | (2) |
|
CSS3 and Mobile --- A Perfect Fit |
|
|
67 | (2) |
|
|
69 | (1) |
|
|
70 | (2) |
|
|
72 | (5) |
|
Chapter 4 Compatibility Issues and Solutions |
|
|
77 | (18) |
|
Making HTML5 and CSS3 Work in Older Browsers |
|
|
80 | (1) |
|
Everything you wanted to know about IE8 (and earlier) but were afraid to ask |
|
|
81 | (2) |
|
|
83 | (3) |
|
Testing sites in IE8 (and older) |
|
|
86 | (1) |
|
Using graceful degradation for backward compatibility |
|
|
87 | (2) |
|
HTML5 and CSS3 Browser Wars |
|
|
89 | (1) |
|
Using vendor-specific CSS prefixes |
|
|
90 | (1) |
|
|
90 | (2) |
|
|
92 | (1) |
|
|
93 | (1) |
|
|
94 | (1) |
|
Part II Creating Pages with HTML5 |
|
|
95 | (108) |
|
Chapter 5 HTML5 Semantic Tags |
|
|
97 | (24) |
|
Understanding the Different Kinds of Semantic Elements |
|
|
100 | (1) |
|
Structural HTML5 semantic tags |
|
|
100 | (1) |
|
Nonstructural semantic tags |
|
|
101 | (1) |
|
Other HTML5 semantic tags |
|
|
102 | (3) |
|
Organizing Content with Five Elements |
|
|
105 | (1) |
|
|
105 | (4) |
|
Examining a basic HTML5 page template |
|
|
109 | (1) |
|
|
110 | (1) |
|
HTML5 for Specific Content |
|
|
111 | (2) |
|
Using <details> and <summary> elements |
|
|
113 | (1) |
|
Defining <figure> and <figcaption> tags |
|
|
114 | (1) |
|
Highlighting with the <mark> tag |
|
|
115 | (1) |
|
Using <time> and <datetime> |
|
|
116 | (1) |
|
|
117 | (1) |
|
|
118 | (1) |
|
Advantages of HTML5 Semantic Tags |
|
|
119 | (2) |
|
|
121 | (22) |
|
HTML5 Forms --- An Underrated Resource |
|
|
124 | (1) |
|
Surveying the new HTML5 form field parameters |
|
|
125 | (2) |
|
HTML5 versus JavaScript or server-side scripts |
|
|
127 | (2) |
|
|
129 | (1) |
|
|
129 | (1) |
|
|
130 | (2) |
|
Defining input and label tags |
|
|
132 | (1) |
|
Defining Placeholder Text |
|
|
133 | (1) |
|
Implementing HTML5 Input Types |
|
|
134 | (1) |
|
|
134 | (1) |
|
Using input types for accessibility |
|
|
135 | (3) |
|
|
138 | (1) |
|
Creating Form Output Elements |
|
|
139 | (1) |
|
|
139 | (1) |
|
|
140 | (1) |
|
Validating e-mail addresses |
|
|
140 | (1) |
|
|
141 | (1) |
|
A Final Word on HTML5 Forms |
|
|
141 | (2) |
|
Chapter 7 Native Video and Audio |
|
|
143 | (26) |
|
Getting Familiar with Native Audio and Video |
|
|
145 | (1) |
|
A deeper look at native video and audio |
|
|
146 | (1) |
|
Identifying proprietary plug-ins |
|
|
147 | (1) |
|
Understanding the rise of native media |
|
|
147 | (2) |
|
Designing for a complex video terrain |
|
|
149 | (1) |
|
|
150 | (1) |
|
Video from your camera: Not ready for prime time |
|
|
150 | (1) |
|
Competing native video formats |
|
|
151 | (1) |
|
Different players in different browsers |
|
|
151 | (6) |
|
Converting video to native formats |
|
|
157 | (1) |
|
Knowing your options for hosting native video |
|
|
158 | (3) |
|
|
161 | (1) |
|
|
161 | (2) |
|
Providing options for non-HTML5 browsers |
|
|
163 | (1) |
|
|
164 | (1) |
|
|
165 | (1) |
|
|
165 | (1) |
|
Converting MP3 audio to OGG |
|
|
166 | (1) |
|
Embedding an HTML5 audio element |
|
|
167 | (1) |
|
Alternative audio options |
|
|
168 | (1) |
|
Chapter 8 Going Mobile: Responsive Design and jQuery Mobile |
|
|
169 | (34) |
|
Understanding the Nature and Role of Responsive Design |
|
|
171 | (1) |
|
A day in the life of a multidevice user |
|
|
172 | (6) |
|
Three approaches to responsive design |
|
|
178 | (1) |
|
The evolution and role of fluid design |
|
|
178 | (1) |
|
Implementing Responsive Design with Media Queries |
|
|
179 | (1) |
|
Two techniques for media queries |
|
|
180 | (1) |
|
Different strokes for different (viewport) folks |
|
|
181 | (1) |
|
Defining Media Queries with Multiple CSS Files |
|
|
182 | (1) |
|
Forcing devices to report actual width |
|
|
182 | (1) |
|
Creating CSS files for different sized viewports |
|
|
183 | (4) |
|
Deploying Responsive Design in a Single CSS File |
|
|
187 | (2) |
|
Building Web Apps with jQuery Mobile |
|
|
189 | (1) |
|
|
190 | (1) |
|
Building a basic jQuery Mobile template |
|
|
190 | (3) |
|
jQuery Mobile and data-role elements |
|
|
193 | (1) |
|
Customizing jQuery Mobile content |
|
|
194 | (4) |
|
Customizing themes with ThemeRoller |
|
|
198 | (5) |
|
Part III CSS3 Effects and Transforms |
|
|
203 | (98) |
|
Chapter 9 Styling with CSS3 Properties |
|
|
205 | (24) |
|
|
207 | (4) |
|
Phase I Using HTML for styling |
|
|
208 | (1) |
|
Phase II Using CSS for styling |
|
|
209 | (1) |
|
Phase III Beyond boxes and image files |
|
|
210 | (1) |
|
|
211 | (1) |
|
CSS3 transition properties |
|
|
212 | (2) |
|
Using transition-timing-function |
|
|
214 | (1) |
|
Compatibility issues for transitions |
|
|
215 | (1) |
|
|
216 | (1) |
|
CSS3 transition syntax examples |
|
|
217 | (2) |
|
Can transitions get even more fun? |
|
|
219 | (2) |
|
Redefining Color with CSS3 |
|
|
221 | (1) |
|
Smoother workflow with RGB and HSL |
|
|
222 | (2) |
|
|
224 | (1) |
|
|
225 | (2) |
|
Support for RGB and HSL color |
|
|
227 | (2) |
|
Chapter 10 Applying CSS3 Effects |
|
|
229 | (26) |
|
Getting the Most from CSS3 Effects |
|
|
232 | (1) |
|
Breaking out of the box with border radii |
|
|
232 | (3) |
|
Applying CSS3 border images |
|
|
235 | (2) |
|
Applying CSS3 drop shadows |
|
|
237 | (1) |
|
Effects and compatibility prefixes |
|
|
238 | (2) |
|
|
240 | (1) |
|
|
240 | (1) |
|
Defining and applying a border radius |
|
|
241 | (3) |
|
|
244 | (3) |
|
|
247 | (2) |
|
|
249 | (1) |
|
|
250 | (1) |
|
|
250 | (5) |
|
Chapter 11 Applying and Animating CSS3 Transforms |
|
|
255 | (28) |
|
Knowing How to Use Transforms |
|
|
257 | (2) |
|
Advantages of design with transforms |
|
|
259 | (1) |
|
Understanding transform syntax |
|
|
260 | (2) |
|
|
262 | (2) |
|
|
264 | (1) |
|
|
265 | (1) |
|
Animating Transforms with Transitions |
|
|
266 | (1) |
|
How transitions work with transforms |
|
|
267 | (1) |
|
Building an animated image gallery |
|
|
268 | (3) |
|
Animating with @keyframes |
|
|
271 | (1) |
|
Understanding how @keyframes work |
|
|
272 | (3) |
|
Adding motion to @keyframes |
|
|
275 | (3) |
|
|
278 | (1) |
|
@keyframe compatibility and prefixes |
|
|
278 | (1) |
|
Using @keyframes to define a moving banner element |
|
|
278 | (5) |
|
Chapter 12 Styling Gradients with CSS3 |
|
|
283 | (18) |
|
The Evolutionary Path to CSS3 Gradients |
|
|
286 | (2) |
|
|
288 | (1) |
|
Gradients and mobile: A nice fit |
|
|
289 | (2) |
|
|
291 | (2) |
|
Competing CSS3 Gradient Syntax |
|
|
293 | (1) |
|
Defining Gradients with Free Online Generators |
|
|
294 | (3) |
|
Using Ultimate CSS Gradient Generator |
|
|
297 | (1) |
|
Using preset gradients and the preview feature |
|
|
297 | (1) |
|
Defining gradient color stops |
|
|
298 | (1) |
|
Saving and applying gradient backgrounds |
|
|
299 | (2) |
|
|
301 | (38) |
|
Chapter 13 Top Ten HTML5 Design Resources |
|
|
303 | (12) |
|
|
304 | (1) |
|
|
305 | (1) |
|
|
306 | (2) |
|
|
308 | (1) |
|
|
309 | (1) |
|
|
310 | (1) |
|
WC3 Markup Validation Service |
|
|
310 | (1) |
|
|
311 | (1) |
|
|
312 | (1) |
|
|
313 | (2) |
|
Chapter 14 Top Ten CSS3 Design Tools |
|
|
315 | (12) |
|
Ultimate CSS Gradient Generator |
|
|
316 | (2) |
|
|
318 | (1) |
|
|
319 | (1) |
|
|
320 | (1) |
|
CSS3 Box Shadow Generator |
|
|
321 | (1) |
|
|
321 | (1) |
|
|
322 | (1) |
|
|
323 | (1) |
|
|
324 | (1) |
|
|
325 | (2) |
|
Chapter 15 Top Ten Form Data Resources |
|
|
327 | (12) |
|
|
329 | (1) |
|
|
330 | (1) |
|
|
331 | (1) |
|
Google Custom Search Engine |
|
|
331 | (1) |
|
|
332 | (1) |
|
|
333 | (1) |
|
|
334 | (1) |
|
|
335 | (1) |
|
|
335 | (1) |
|
|
336 | (3) |
Index |
|
339 | |