Table of Contents

-1. Foreword

0. Preface

   1. Who Should Read This Book
   2. What’s in This Book
   3. Where to Find Help
      1. The SitePoint Forums
      2. The Book’s Website
   4. The SitePoint Newsletters
   5. The SitePoint Podcast
   6. Your Feedback
   7. Acknowledgments
      1. Alexis Goldstein
      2. Louis Lazaris
      3. Estelle Weyl
   8. Conventions Used in This Book
      1. Code Samples
      2. Tips, Notes, and Warnings

1. 1. Introducing HTML5 and CSS3

   1. What is HTML5?
   2. How did we get here?
      1. Would the real HTML5 spec please stand up?
   3. Why should I care about HTML5?
   4. What is CSS3?
   5. Why should I care about CSS3?
   6. What do we mean by the “real world”?
      1. The Varied Browser Market
      2. The Growing Mobile Market
   7. On to the Real Stuff

2. 2. Markup, HTML5 Style

   1. Introducing The HTML5 Herald
   2. A Basic HTML5 Template
      1. The Doctype
      2. The html Element
      3. The head Element
      4. Leveling the Playing Field
      5. The Rest is History
   3. HTML5 FAQ
      1. Why do these changes still work in older browsers?
      2. Shouldn’t all tags be closed?
      3. What about other XHTML-based syntax customs?
   4. Defining the Page’s Structure
      1. The header Element
      2. The section Element
      3. The article Element
      4. The nav Element
      5. The aside Element
      6. The footer Element
   5. Structuring The HTML5 Herald
   6. Wrapping Things Up

3. 3. More HTML5 Semantics

   1. A New Perspective on Types of Content
   2. The Document Outline
   3. Breaking News
      1. The hgroup Element
   4. More New Elements
      1. The figure and figcaption Elements
      2. The mark Element
      3. The progress and meter Elements
      4. The time Element
   5. Changes to Existing Features
      1. The Word “Deprecated” is Deprecated
      2. Block Elements Inside Links
      3. Bold Text
      4. Italicized Text
      5. Big and Small Text
      6. A cite for Sore Eyes
      7. Description (not Definition) Lists
   6. Other New Elements and Features
      1. The details Element
      2. Customized Ordered Lists
      3. Scoped Styles
      4. The async Attribute for Scripts
   7. Validating HTML5 Documents
   8. Summary

4. 4. HTML5 Forms

   1. Dependable Tools in Our Toolbox
   2. HTML5 Form Attributes
      1. The required Attribute
      2. The placeholder Attribute
      3. The pattern Attribute
      4. The disabled Attribute
      5. The readonly Attribute
      6. The multiple Attribute
      7. The form Attribute
      8. The autocomplete Attribute
      9. The datalist Element and the list Attribute
      10. The autofocus Attribute
   3. HTML5 New Form Input Types
      1. Search
      2. Email Addresses
      3. URLs
      4. Telephone Numbers
      5. Numbers
      6. Ranges
      7. Colors
      8. Dates and Times
   4. Other New Form Controls in HTML5
      1. The output Element
      2. The keygen Element
   5. Changes to Existing Form Controls and Attributes
      1. The form Element
      2. The optgroup Element
      3. The textarea Element
   6. In Conclusion

5. 5. HTML5 Audio and Video

   1. A Bit of History
   2. The Current State of Play
      1. Video Container Formats
      2. Video Codecs
      3. Audio Codecs
      4. What combinations work in current browsers?
   3. The Markup
      1. Enabling Native Controls
      2. The autoplay Attribute
      3. The loop Attribute
      4. The preload Attribute
      5. The poster Attribute
      6. The audio Attribute
      7. Adding Support for Multiple Video Formats
      8. source Order
      9. What about Internet Explorer 6–8?
      10. MIME Types
   4. Encoding Video Files for Use on the Web
   5. Creating Custom Controls
      1. Some Markup and Styling to Get Us Started
      2. Introducing the Media Elements API
      3. Playing and Pausing the Video
      4. Muting and Unmuting the Video’s Audio Track
      5. Responding When the Video Ends Playback
      6. Updating the Time as the Video Plays
      7. Further Features of the Media Elements API
   6. What about audio?
   7. Accessible Media
   8. It’s Showtime

6. 6. Introducing CSS3

   1. Getting Older Browsers on Board
   2. CSS3 Selectors
      1. Relational Selectors
      2. Attribute Selectors
      3. Pseudo-classes
      4. Structural Pseudo-classes
      5. Pseudo-elements and Generated Content
   3. CSS3 Colors
      1. RGBA
      2. HSL and HSLA
      3. Opacity
   4. Putting It into Practice
   5. Rounded Corners: border-radius
   6. Drop Shadows
      1. Inset and Multiple Shadows
   7. Text Shadow
   8. More Shadows
   9. Up Next

7. 7. CSS3 Gradients and Multiple Backgrounds

   1. Linear Gradients
      1. The W3C Syntax
      2. The Old WebKit Syntax
      3. Putting It All Together
      4. Linear Gradients with SVG
      5. Linear Gradients with IE Filters
      6. Tools of the Trade
   2. Radial Gradients
      1. The W3C Syntax
      2. The Old WebKit Syntax
      3. Putting it All Together
   3. Repeating Gradients
   4. Multiple Background Images
   5. Background Size
   6. In the Background

8. 8. CSS3 Transforms and Transitions

   1. Transforms
      1. Translation
      2. Scaling
      3. Rotation
      4. Skew
      5. Changing the Origin of the Transform
      6. Support for Internet Explorer 8 and Earlier
   2. Transitions
      1. transition-property
      2. transition-duration
      3. transition-timing-function
      4. transition-delay
      5. The transition Shorthand Property
      6. Multiple Transitions
   3. Animations
      1. Keyframes
      2. Animation Properties
   4. Moving On

9. 9. Embedded Fonts and Multicolumn Layouts

   1. Web Fonts with @font-face
      1. Implementing @font-face
      2. Declaring Font Sources
      3. Font Property Descriptors
      4. Unicode Range
      5. Applying the Font
      6. Legal Considerations
      7. Creating Various Font File Types: Font Squirrel
      8. Other Considerations
   2. CSS3 Multicolumn Layouts
      1. The column-count Property
      2. The column-gap Property
      3. The column-width Property
      4. The columns Shorthand Property
      5. Columns and the height Property
      6. Other Column Features
      7. Other Considerations
      8. Progressive Enhancement
   3. Media Queries
      1. What are Media Queries?
      2. Syntax
      3. Flexibility of Media Queries
      4. Browser Support
      5. Further Reading
   4. Living in Style

10. 10. Geolocation, Offline Web Apps, and Web Storage

    1. Geolocation
       1. Privacy Concerns
       2. Geolocation Methods
       3. Checking for Support with Modernizr
       4. Retrieving the Current Position
       5. Geolocation’s Position Object
       6. Grabbing the Latitude and Longitude
       7. Loading a Map
       8. A Final Word on Older Mobile Devices
    2. Offline Web Applications
       1. How It Works: the HTML5 Application Cache
       2. Setting Up Your Site to Work Offline
       3. Getting Permission to Store the Site Offline
       4. Going Offline to Test
       5. Making The HTML5 Herald Available Offline
       6. Limits to Offline Web Application Storage
       7. The Fallback Section
       8. Refreshing the Cache
       9. Are we online?
       10. Further Reading
    3. Web Storage
       1. Two Kinds of Storage
       2. What Web Storage Data Looks Like
       3. Getting and Setting Our Data
       4. Converting Stored Data
       5. The Shortcut Way
       6. Removing Items and Clearing Data
       7. Storage Limits
       8. Security Considerations
       9. Adding Web Storage to The HTML5 Herald
       10. Viewing Our Web Storage Values with the Web Inspector
    4. Additional HTML5 APIs
       1. Web Workers
       2. Web Sockets
       3. Web SQL and IndexedDB
    5. Back to the Drawing Board

11. 11. Canvas, SVG, and Drag and Drop

    1. Canvas
       1. A Bit of Canvas History
       2. Creating a canvas Element
       3. Drawing on the Canvas
       4. Getting the Context
       5. Filling Our Brush with Color
       6. Drawing a Rectangle to the Canvas
       7. The Canvas Coordinate System
       8. Variations on fillStyle
       9. Drawing Other Shapes by Creating Paths
       10. Saving Canvas Drawings
       11. Drawing an Image to the Canvas
       12. Manipulating Images
       13. Converting an Image from Color to Black and White
       14. Security Errors with getImageData
       15. Manipulating Video with Canvas
       16. Displaying Text on the Canvas
       17. Accessibility Concerns
       18. Further Reading
    2. SVG
       1. Drawing in SVG
       2. Using Inkscape to Create SVG Images
       3. SVG Filters
       4. Using the Raphaël Library
       5. Canvas versus SVG
    3. Drag and Drop
       1. Feeding the WAI-ARIA Cat
       2. Making Elements Draggable
       3. The DataTransfer Object
       4. Accepting Dropped Elements
       5. Further Reading
    4. That’s All, Folks!

12. A. Modernizr

    1. Using Modernizr with CSS
    2. Using Modernizr with JavaScript
    3. Support for Styling HTML5 Elements in IE8 and Earlier
    4. Further Reading

13. B. WAI-ARIA

    1. How WAI-ARIA Complements Semantics
    2. The Current State of WAI-ARIA
    3. Further Reading

14. C. Microdata

    1. Aren’t HTML5’s semantics enough?
    2. The Microdata Syntax
    3. Understanding Name-Value Pairs
    4. Microdata Namespaces
    5. Further Reading

15. Index