Safari Development Essential Videos - Session 204 - Building Compatible Websites Using Emerging Web Technologies

Safari pushes the web forward by implementing the latest, most innovative HTML and CSS technologies. Adopt these technologies without creating multiple versions of your website to stay compatible with other browsers. Discover how to use object detection …

Talks about

1. Common Coding Pitfalls
2. Fallback Techniques
3. CSS Effects
4. HTML 5 Media Elements
5. HTML 5 Offline Data

Common Coding Pitfalls

Feature Detection

if ('XMLHttpRequest' in window) { ... }
if ('openDatabase' in window) { ... }
if ('innerHTML' in document.body) { ... }
if ('contentEditable') in document.body { ... }
if ('webkitTransition' in document.body.style) { // transitions exist }

HTML 5 Media Elements

Media Queries
http://www.w3.org/TR/css3-mediaqueries/

HTML 5 Offline Data

Key/value storage
if ('localStorage' in window) { ... }
if ('sessionStorage' in window) { ... }

SQL API for structured data storage
if ('openDatabase' in window) { ... }

Offline application cache
if ('applicationCache' in window) { ... }