Developing Web Content for Safari
Safari is a full-featured Web browser for macOS and iOS. You don't need to add any Safari-specific tweaks to make your website work with Safari or to make your website work on iOS-based devices. If you design your website using W3C standards for HTML, CSS, and JavaScript, and don't rely on third-party plug-ins, users can view and interact with your website using Safari on all supported platforms.
Making websites work with Safari is just a first step, however. It should be your goal to optimize websites to create the best experience for all users, including people using Safari on handheld devices with touch screens. Use CSS with responsive design techniques to change the layout of your website for multiple viewport screen sizes and multitasking split-screen, add touch and gesture support, animate changes in CSS properties, and so on.
At a Glance
There are three main areas to focus on when creating web content for Safari:
Make sure your website is compatible with Safari.
Enhance the user experience in Safari, particularly on mobile devices.
Make the best use of dynamically changing network bandwidth to deliver content.
Making It Work
Safari has an array of built-in tools for quickly spotting incompatibilities and debugging problems. If you have a website up and running, and are getting complaints that the site doesn't work with Safari, it is usually because of one of the following problems:
The site includes media compressed in a format that Safari doesn't support.
The site relies on plug-ins to handle audio, video, or animation.
Use the Web Inspector to identify errors and warnings, making them easy to correct.
There are Safari-compatible media formats and embedding techniques for every job. Safari supports audio media in AAC, MP3, AIFF, and WAVE formats on all platforms. Safari supports video media encoded using H.264 compression, commonly used in MPEG-4 format, on all platforms. Handheld devices support a somewhat more limited set of MPEG-4 profiles than desktop devices.
Use the HTML5 <audio> and <video> tags to embed audio and video files in supported formats, with fallback to a plug-in for older browsers on the desktop. Safari on iOS does not support plug-ins. Therefore, to make your website accessible using handheld devices, do not rely on plug-ins to display content. Safari on the desktop does support plug-ins. and there are Safari-compatible versions of all common plug-ins, including QuickTime, Flash, and SilverLight. When possible, avoid plug-ins and use CSS or Canvas to embed animation and create special effects.
Enhancing the User Experience
Enhance the user's experience with responsive design to provide different page layouts for varying viewport sizes on handheld and desktop devices. Responsive design can handle CSS and JavaScript detection as well as select the appropriate CSS layout for a device. Responsive design can react to portrait and landscape orientation and multitasking split-screen, automatically switching between layouts with CSS and JavaScript syntax.
It's easy to add touch and gesture support by adding a few event handlers to your site. Make navigation easier for touchscreen users by making links large enough to reliably hit with a finger, and by surrounding links with enough whitespace to avoid accidentally hitting the wrong link. Leave a blank gutter or border on the page as well, so the user can easily scroll the screen with a finger without touching a link.
iOS-specific enhancements can turn your website into a web app that behaves like a native iOS app. Optimize websites for iOS by providing an icon for the user's home screen, by making your website into a fullscreen web app, and by including links that dial a phone number, open the Maps app, or open other built-in iOS apps.
Use caching and client-side storage to make your website work even when the user is offline or the user’s device loses network connectivity. Safari supports HTML5 client-side storage and caching, "lazy" caching for offline reading, and techniques for allowing web-based games to work offline.
Prerequisites
You need a solid understanding of HTML, familiarity with JavaScript, and a basic understanding of CSS in order to make the best use of this document.
See Also
Safari Web Inspector Guide—How to use Safari’s built-in tools for debugging and optimization.
Safari HTML5 Audio and Video Guide—How to embed audio and video without using plug-ins, or by using a plug-in as a fallback.
Safari HTML5 Canvas Guide—How to add sophisticated animation and interactive games to a website without using plug-ins.
Safari CSS Visual Effects Guide—How to enhance websites using WebKit extensions for masks, gradients, reflections, CSS animation, and 3D transformations.
Safari Client-Side Storage and Offline Applications Programming Guide—How to create websites that work when the user is offline, or that contain HTML5 client-side databases.
HTTP Live Streaming Overview—How to optimize network bandwidth for streaming audio and video from a standard web server.
Safari HTML Reference—HTML elements and attributes supported in Safari.
Safari CSS Reference—CSS properties and classes supported in Safari.
Safari DOM Additions Reference—Events and other DOM additions supported in Safari.
Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-12-12