Start Here

To develop a great web app or web content for Safari on any platform, you should:

• Make sure your web content is compatible with Safari

• Optimize your web content for Safari on specific platforms, such as Safari on iPhone

• Customize your web content to make the most of platform-specific features, especially if you’re developing a web app

If you’re developing web content for a Dashboard widget, you can get more specific help in Getting Started with Dashboard Widgets. If you’re developing a web app for iPhone, see Getting Started with iOS Web Apps for more targeted resources.

Choose next how you want to get started—by reading about the basics, getting your hands on some code, or diving into specific technologies.

Want to get familiar with the fundamentals?

• Creating Compatible Web Content emphasizes compatibility with Safari on iPhone, but covers techniques you can use to improve your web content compatibility with Safari on any platform.

• Optimizing Web Content describes how to create different layouts for different platforms and how to detect those platforms, using the Safari on iPhone platform as an example.

• Customizing Style Sheets summarizes how to use CSS properties to customize your web content for Safari on iPhone and contains links to more general CSS information.

Prefer to learn by example?

• HTML Video Example is a sample project that shows how to provide video in web content using the HTML 5 video element if it’s available and the QuickTime plug-in if it’s not.

• iPodNanos is a sample project that demonstrates how to use the HTML 5 video element with custom playback controls.

• PhotoToss: CSS Transforms, Transitions, and Web Fonts is a sample project that demonstrates how to use CSS transforms and transitions to position and animate elements of a webpage. It also shows how to use CSS 3 web fonts.

Want to find out how Safari supports the web technologies you know?

• Safari HTML Reference and Safari CSS Reference cover the HTML and CSS elements you can use with Safari on any platform.

• Safari DOM Extensions Reference describes the DOM extensions Safari supports.

• WebKit DOM Programming Topics and WebKit DOM Reference describe how to use JavaScript to access the DOM.

Go In Depth

Sometimes you need task-focused information or answers to specific questions to get started. Browse the popular tasks described below for a more targeted way to start developing your web app or web content.

• Use visual effects to add excitement and interaction to your web app or web content. Safari CSS Visual Effects Guide describes how to use transitions, animations, and transforms to implement stunning visual effects using CSS properties and JavaScript.

• Store data locally on the client side. Safari Client-Side Storage and Offline Applications Programming Guide describes how to take advantage of the JavaScript database support introduced in HTML 5.

• Use the canvas object to define a custom drawing region in your web content. Using the Canvas describes how to define the canvas object and use it to provide custom content.

• Test and debug your web content in Safari. Safari Web Inspector Guide describes the developer tools built into Safari for analyzing, testing, and debugging your web content.

Ready for More?

The Safari Reference Library holds plenty more resources that make your job easier. To narrow the list of resources, you can set filters to focus on specific resource types (such as guides or sample code) or on specific topics (such as user experience or data management).