Smashing WebKit
®
Table of Contents
Introduction
Part I: Introducing WebKit
Part II: CSS3 Support in WebKit
Part III: HTML5 Support in WebKit
Part IV: Mobile WebKit
Part V: Advanced WebKit
Companion Website
Start Building Better Websites
Part I: Introducing WebKit
Chapter 1: What Is WebKit?
Quick History
Where is WebKit Used?
Web browsers
Mobile devices
RIAs
Miscellaneous Devices
What Does WebKit Support?
CSS3
HTML5 and SVG
Not All WebKits Are Created Equal
Using Different Versions of WebKit
Modifying the Core
Summary
Chapter 2: Getting Started With WebKit Development
Setting Up Testing Environments
Testing Approaches
Mac Vs. PC
Chrome And Safari environments
Testing Older Browsers
Debugging Chrome and Safari Issues
iOS And Android Environments
Selecting an Emulator
iOS Simulators
Android Emulator
Debugging iOS and Android Issues
Beyond WebKit Browsers
Firefox
Internet Explorer
Opera
Other Mobile Browsers
Summary
Part II: CSS3 Support in WebKit
Chapter 3: Advanced Styling with CSS3
Using CSS3 to Render Graphics Without Images
Basic Setup
Border radius
Gradients
Font face
Text and box shadows
RGBa transparency
CSS3 Animations
Using transitions
Using Keyframes
CSS3 Transforms
2D Transforms
3D Transforms
Other CSS3 Properties
Border images
Masks
Text Strokes
Box Reflect
WebKit Marquee
Background Clip
Data URIs
Summary
Chapter 4: Improved Selection with CSS3
CSS3 Selectors and Pseudo-Classes
Attribute Selectors
Structural Selectors
Structural Pseudo-Classes
Other Pseudo-Classes
Text and Content Based Pseudo-Elements
Media Queries
Using Media Types
Using Media Queries
Creating flexible layouts With Media Queries
Detecting specific devices
Summary
Chapter 5: Cross-Browser Support for CSS3
Basic CSS3 Styles In All Browsers
Cross-Browser Border Radius
Cross-Browser Gradients
Cross-Browser Font Face
Cross-Browser Text and Box Shadows
Cross-Browser RGBa Transparency
Cross-Browser Border Images
Cross-Browser Background Clip
Cross-Browser Data URIs
CSS3 Animations In All Browsers
Transitions in Non-Supportive Browsers
Keyframe Animations in Non-Supportive Browsers
CSS3 Transforms In All Browsers
Supporting Transforms In Older Versions of IE
Cross-Browser Support for 3D Transforms
Cross-Browser Support For CSS3 Selectors and Pseudo-classes
Cross-Browser Support For Selectors
Cross-Browser Support For Pseudo-cLasses and Pseudo-Elements
jQuery Support For cSS3 Selectors
Cross-Browser Support For Media Queries
Using Modernizr For Feature Detection
Summary
Part III: HTML5 Support in WebKit
Chapter 6: HTML5 Media Tags
Why Use HTML5?
HTML5 Video
HTML5 Video Options
HTML5 Video Formats
Encoding Different Formats
Testing HTML5 Video Encoding
HTML5 Audio
HTML5 Audio Formats
Encoding HTML5 Audio
HTML5 Media Tags And JavaScript Interaction
Basic JavaScript Commands
Flash Backups For HTML5 Media Tags
Including The Flash Backup
Creating The Flash File
Summary
Chapter 7: The Canvas Element
The Basics of Canvas
Drawing Basic Shapes
Drawing Complex Shapes
Styling The Canvas
Using Images
Fill and Stroke Styles
Line Styles
Shadows
Using Text
Transformations
Translations
Rotations
Scaling
Transforms
Saving and Restoring the Canvas State
Saving and Restoring Multiple States
CompositeS and Clipping Paths
Composites
Clipping Paths
The Interactive Canvas
Basic Animation
Mouse Interaction
Using Physics Libraries
3D Canvas
WebGL and OpenGL
3D Canvas Libraries
Canvas Inspiration
Games
Audio / Video
Drawing And Creation Tools
DRAWING AND CREATION TOOLS
Math / Physics
Visual Effects
More Canvas Inspiration
Summary
Chapter 8: HTML5 Forms
Special Input Types
Number
Slider
Color and Date Pickers
Contextual Keyboards
Search Box
Interactive Functionality
Placeholder Text
Autofocus
Form Validation
Cross-Browser Support
Cross-Browser Support For Special Input Types
Cross-Browser Support For Interactive Functionality
Summary
Chapter 9: Scalable Vector Graphics
Advantages of Using SVG
Vectored Image Format
