Contents COPYRIGHTED MATERIAL INTRODUCTION 1 PART I: INTRODUCING WEBKIT 5

Transcription

1 Contents INTRODUCTION 1 PART I: INTRODUCING WEBKIT 5 Chapter 1: What Is WebKit? 7 Quick History 8 Where Is WebKit Used? 8 Web Browsers 8 Mobile Devices 9 RIAs 9 Miscellaneous Devices 9 What Does WebKit Support? 9 CSS3 10 HTML5 and SVG 10 Not All WebKits Are Created Equal 10 Using Different Versions of WebKit 10 Modifying the Core 11 Summary 11 Chapter 2: Getting Started With WebKit Development 13 Setting Up Testing Environments 14 Testing Approaches 14 Mac Vs. PC 15 Chrome and Safari Environments 15 Testing Older Browsers 16 Debugging Chrome and Safari Issues 17 ios and Android Environments 19 Selecting an Emulator 19 ios Simulators 19 COPYRIGHTED MATERIAL

2 Android Emulator 22 Debugging ios and Android Issues 24 Beyond WebKit Browsers 26 Firefox 26 Internet Explorer 26 Opera 27 Other Mobile Browsers 28 Summary 28 PART II: CSS3 SUPPORT IN WEBKIT 29 XII Chapter 3: Advanced Styling with CSS3 31 Using CSS3 to Render Graphics Without Images 32 Basic Setup 32 Border Radius 33 Gradients 36 Font Face 40 Text and Box Shadows 41 RGBa Transparency 44 CSS3 Animations 45 Using Transitions 45 Using Keyframes 49 CSS3 Transforms 52 2D Transforms 52 3D Transforms 56 Other CSS3 Properties 58 Border Images 58 Masks 59 Text Strokes 60 Box Reflect 61 WebKit Marquee 61 Background Clip 62 Data URIs 64 Summary 64 Chapter 4: Improved Selection with CSS3 65 CSS3 Selectors and Pseudo-Classes 66 Attribute Selectors 66 Structural Selectors 67 Structural Pseudo-Classes 70 Other Pseudo-Classes 73 Text and Content Based Pseudo-Elements 76 Media Queries 77 Using Media Types 78 Using Media Queries 79

3 Creating Flexible Layouts with Media Queries 79 Detecting Specific Devices 81 Summary 81 Chapter 5: CROSS-BROWSER SUPPORT FOR CSS3 83 Basic CSS3 Styles in All Browsers 84 Cross-Browser Border Radius 84 Cross-Browser Gradients 85 Cross-Browser Font Face 89 Cross-Browser Text and Box Shadows 92 Cross-Browser RGBa Transparency 93 Cross-Browser Border Images 95 Cross-Browser Background Clip 95 Cross-Browser Data URIs 95 CSS3 Animations in All Browsers 97 Transitions in Non-Supportive Browsers 97 Keyframe Animations in Non-Supportive Browsers 100 CSS3 Transforms in All Browsers 101 Supporting Transforms in Older Versions of IE 102 Cross-Browser Support for 3D Transforms 103 Cross-Browser Support for CSS3 Selectors and Pseudo-Classes 103 Cross-Browser Support for Selectors 103 Cross-Browser Support for Pseudo-Classes and Pseudo-Elements 103 jquery Support for css3 Selectors 104 Cross-Browser Support for Media Queries 105 Using Modernizr for Feature Detection 105 Summary 107 XIII PART III: HTML5 SUPPORT IN WEBKIT 109 Chapter 6: HTML5 Media Tags 111 Why Use HTML5? 112 HTML5 Video 112 HTML5 Video Options 113 HTML5 Video Formats 114 Encoding Different Formats 116 Testing HTML5 Video Encoding 125 HTML5 Audio 125 HTML5 Audio Formats 126 Encoding HTML5 Audio 127 HTML5 Media Tags and JavaScript Interaction 128 Basic JavaScript Commands 128 Flash Backups for HTML5 Media Tags 130 Including the Flash Backup 130 Creating the Flash File 131 Summary 131

4 XIV Chapter 7: The Canvas Element 133 The Basics of Canvas 134 Drawing Basic Shapes 134 Drawing Complex Shapes 142 Styling the Canvas 147 Using Images 147 Fill and Stroke Styles 149 Line Styles 153 Shadows 156 Using Text 156 Transformations 158 Translations 158 Rotations 159 Scaling 159 Transforms 160 Saving and Restoring the Canvas State 160 Saving and Restoring Multiple States 162 Composites and Clipping Paths 163 Composites 163 Clipping Paths 170 The Interactive Canvas 171 Basic Animation 172 Mouse Interaction 176 Using Physics Libraries 179 3D Canvas 179 WebGL and OpenGL 179 3D Canvas Libraries 180 Canvas Inspiration 181 Games 181 Audio / Video 184 Drawing and Creation Tools 185 Math / Physics 187 Visual Effects 188 More Canvas Inspiration 191 Summary 191 Chapter 8: HTML5 Forms 193 Special Input Types 194 Number 194 Slider 196 Color and Date Pickers 197 Contextual Keyboards 198 Search Box 201 Interactive Functionality 202 Placeholder Text 202 Autofocus 202 Form Validation 203

5 Cross-Browser Support 206 Cross-Browser Support for Special Input Types 206 Cross-Browser Support for Interactive Functionality 209 Summary 211 Chapter 9: Scalable Vector Graphics 213 Advantages of Using SVG 214 Vectored Image Format 214 Total Interactivity 214 Search Engine Optimization (SEO) 214 File Size 215 Automatically Generating SVG 215 Generating SVG Files 215 SVG Libraries 215 Handcoding SVG Images 216 Including SVG Markup 217 Drawing Shapes and Lines 217 Adding Text, Links and Images 221 Adding Gradients 222 Using CSS Instead of HTML Attributes 225 JavaScript Interaction 225 Summary 227 PART IV: MOBILE WEBKIT 229 XV Chapter 10: Developing for ios and Android 231 Viewport and Orientation 232 Controlling the Viewport 232 Adjusting CSS Using Media Queries 235 Accessing Viewport, Orientation and Resolution via JavaScript 237 Detecting Mobile 238 User Agent Detection 238 Media Queries 240 Detection with JavaScript 241 No Detection 243 Styling for Mobile 244 Maximize Screen Real Estate 244 Reduce File Size 245 Miscellaneous Changes 246 Accessing Device Functionality 246 Touch Events 247 Geolocation 251 Gyroscope and Accelerometer 252 Dialing Phone Numbers 254 Text Messaging 256 Contextual Keyboards 257

6 XVI Disabling Autocorrect 258 Media Capture 259 Special Concerns for ios 259 Using HTML5 Instead of Flash 260 Other Concerns 262 Summary 263 Chapter 11: Building a Web App That Feels Like a Native ios or Android App 265 Web Apps Versus Native Apps 266 Advantages of Web Apps 266 Advantages of Native apps 268 Creating a Bookmark Icon 270 Bookmarks Versus Downloads 271 Creating a Custom Icon 271 Bookmark Script 273 Full Screen Mode 274 Enabling Full Screen Mode 274 Hiding the Browser Bar 276 Choosing a JavaScript Library 276 Sencha Touch 277 jquery Mobile 279 jqtouch 281 Zepto.js 282 Rendering the ios UI Using CSS3 283 Recreating ios Styling 284 Recreating ios UI Functionality 288 Rendering the Android UI Using CSS3 291 Going Offline 291 Determining if the App Is Offline 292 HTML5 Cache Manifest 292 Local Storage 294 Offline SQL Database 296 Building Native Apps with PhoneGap 299 Advantages of PhoneGap 299 Disadvantages of PhoneGap 302 Getting Started with PhoneGap 302 How to Use PhoneGap 302 PhoneGap APIs 303 Summary 306

7 PART V: ADVANCED WEBKIT 307 Chapter 12: WebKit Performance 309 How to Optimize 310 Keeping Perspective 310 Profiling Tools 311 Perceived Versus Actual Performance 313 Optimizing Animation 313 Using CSS Animation 314 Avoiding Reflows 314 Hardware Acceleration 316 Optimizing JavaScript 317 Loading JavaScript 317 Loops 319 The Scope Chain 322 DOM Manipulation 324 Optimizing CSS 327 Faster Selectors 327 Properties to Avoid 329 Optimizing Images 331 Save for Web 331 WebP 332 Use a Cookieless Domain 333 Web Sockets 333 Advantages of Web Sockets 333 Browser Support 334 How to Use Web Sockets 334 Summary 335 Chapter 13: The Future of WebKit 337 WebKit Nightlies 338 Getting Involved with WebKit 338 Filing Bug Reports 338 Contributing to the WebKit Core 340 Writing Documentation 341 Where Is WebKit Headed? 341 Features in Development 341 General Improvements 343 The Future of WebKit 343 XVII INDEX 345

8