Contents
Chapter 1: HTML5: Now, Not 2022
The Dao of web design: embracing uncertainty
1. Browsers don’t support HTML5
2. OK, most browsers support HTML5, but IE surely doesn’t
3. HTML5 won’t be finished until 2022
4. Now I have to relearn everything!
5. HTML5 uses presentational elements
6. HTML5 is a return to tag soup
7. HTML5 kills accessibility kittens
10. HTML5’s development is controlled by browser vendors
11. HTML5 includes CSS3, Geolocation, SVG, and every other modern technology under the sun
12. So when can I start using HTML5?
Chapter 2: Your First Plunge into HTML5
“Hello World!” in XHTML1.0 style
“Hello World!” in HTML5 “loose” style
“Hello World!” in HTML5 “strict” style
Supporting HTML5 cross-browser
How do browsers deal with unknown elements?
Declaring block-level elements
Chapter 3: New Structural Elements
Structural building blocks: <div>, <section>, and <article>
The difference between <div>, <section>, and <article>
Basic structures using these elements
Headings: <header>, <hgroup>, and <h1>–<h6>, plus <footer>
An article <header> with heading and metadata
An article with an <hgroup>-enclosed subheading
An article with heading, subheading, and metadata
The scourge of the untitled section
HTML5-style heading element levels
Example of nesting heading element levels
Example of the new style for heading element levels
Even more structural elements: <nav>, <aside>, <figure> (and <figcaption>)
New sectioning content elements in a nutshell
Converting a simple page to HTML5
Introducing “HTML4.5”: Adding HTML5’s semantics via <div class=””>
Adding semantics to “HTML4.5” and HTML5 via ARIA landmark roles
Reality rains on our accessible parade
Accessibility techniques, evolving
Other HTML5 accessibility issues
HTML5 accessibility: A new hope
Chapter 4: A Richer Approach to Marking Up Content
Ex-presentational elements and friends
Giving the <i> and <b> elements new semantic meanings
The <s> element, together with <del> and <ins>
Presentational elements: relics of a bygone era
Block-level links with the <a> element
Browser caveats with Firefox <4
Other elements with minor changes from HTML 4
The <ol> element and related new (and old) attributes
Ruby annotations with <ruby>, <rt>, and <rp>
The custom data attribute (data-*)
A lightning introduction to microformats
Microdata: HTML5’s semantic sprinkles
Further reading and related links
Proprietary formats vs. open standards
Does HTML5 signal the end of Flash?
The power and potential of canvas
Chapter 6: Paving the Way for Web Applications
Validation and how to provide fallbacks
Introduction to elements for web applications
Introduction to HTML5-related APIs
Homework: Mark up the “Join Gordo’s Space Cadets” form using the new markup covered
A Refresher on the importance of web standards
Anatomy of a rule (or rule set)
The cascade, specificity, and inheritance
CSS organization and maintenance
Browser support, vendor prefixes, polyfills, and progressive enhancement
Feature detection and polyfills
Chapter 8: Keeping Your Markup Slim Using CSS Selectors
Attribute and substring selectors
UI element states pseudo-classes
Chapter 9: A Layout for Every Occasion
Separate sites optimized for each device? But that’s crazy talk!
The Visual Formatting Model of CSS—it’s boxes all the way down!
The Box Model: content, padding, border, margin
CSS Positioned Layout Module Level 3
CSS Fragmentation Module Level 3
CSS Exclusions and Shapes Module Level 3
CSS Paged Media Module Level 3
CSS Generated Content for Paged Media Module
The Flexible Box Layout Module
CSS3 layout modules in summary
Chapter 10: Improving Web Typography
Farhner Image Replacement (FIR)
JavaScript Image Replacement (JIR)
Dissecting font face syntax: @font-face declaration
Bulletproof syntax for @font-face
Avoiding the flash of unstyled text (FOUT)
Things to keep in mind while using web fonts
Align text vertically from baseline
Control the white space between letters of a word
Control white space and line breaks
Control the rendering of non-latin web type
Use ligatures and additional OpenType font features
Chapter 11: Putting CSS3 Properties to Work
Detecting support and helping other browsers
Chapter 12: Transforms, Transitions, and Animation
Translate, rotate, scale, skew, transform: 2D and 3D CSS transforms
Using transform and the transform functions
Putting 3D things into perspective with perspective and transform:perspective()
Changing the origin of perspective with the perspective-origin property
Changing transforms via transform-origin
3D or flat transforms with transform-style
Hiding and showing the back of a transformed element with backface-visibility
Browser support for CSS transforms
CSS transitions and CSS animations: compare and contrast
Setting what to transition with transition-property
Controlling the duration of a transition with transition-duration
transition-timing-function, cubic Bézier curves, and steps()
Delaying the start of a transition with transition-delay
Multiple transition values and the transition shorthand property
transition shorthand property order
Browser support for CSS transitions
Keyframin’ with CSS animations
A simple animation example with animation-name and animation-duration
Controlling an animation using @keyframes
Timing functions with animation-timing-function
Changing how an animation starts using animation-delay
How many times? animation-iteration-count will tell you!
Mixing it up with animation-direction
Control how elements behave before and after an animation with animation-fill-mode
Pausing an animation using animation-play-state
The animation shorthand property and comma-separated animation-* values
Browser support for CSS animations
A little animation-related JavaScript detour
Chapter 13: The Future of CSS or, Awesome Stuff That’s Coming
Hardware acceleration and CSS performance
Define your own list counters with the CSS Counter Styles Module
The calc() and attr() functions
Variables, mixins, and nesting