Safari Reference Library

<!DOCTYPE HTML> <html lang="en-us"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://developer.apple.com:80/safari/library/navigation/index.html","20100114041210","https://web.archive.org/","web","/_static/", "1263442330"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <title>Safari Reference Library</title> <meta id="xcode-display" name="xcode-display" content="render"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link type="text/css" rel="stylesheet" href="/web/20100114041210cs_/http://developer.apple.com/safari/library/Resources/394/CSS/devpubs.css"/> <link type="text/css" rel="stylesheet" href="/web/20100114041210cs_/http://developer.apple.com/safari/library/Resources/394/CSS/reflib_styles.css"/> <link type="text/css" rel="stylesheet" href="/web/20100114041210cs_/http://developer.apple.com/safari/library/Resources/394/CSS/safari_reflib.css"/>   <script type="text/javascript" src="/web/20100114041210js_/http://developer.apple.com/safari/library/Resources/394/JavaScript/lib/prototype.js"></script> </head> <body> <a name="//apple_ref/doc/uid/TP30000943" title="Safari Reference Library"></a> <div id="allContent">  <script src="https://web.archive.org/web/20100114041210js_/http://devimages.apple.com/assets/scripts/browserdetect.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20100114041210js_/http://devimages.apple.com/assets/scripts/apple_core.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20100114041210js_/http://devimages.apple.com/assets/scripts/search_decorator.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20100114041210js_/http://devimages.apple.com/assets/scripts/adc_core.js" type="text/javascript" charset="utf-8"></script> <div id="navpageheader-ssi" style="height:104px; width:1005px" class="hideInXcode"> <a href="/web/20100114041210/http://developer.apple.com/"><img style="border:none; display:block" src="/web/20100114041210im_/http://developer.apple.com/safari/library/Resources/394/includes/reflibnav_adc_header.png" alt="Apple Developer Connection"/></a> <form id="search_menu" method="get" action="/web/20100114041210/http://developer.apple.com/safari/search/search.php" accept-charset="utf-8" style="background-image: url("/web/20100114041210im_/http://developer.apple.com/safari/library/Resources/394/includes/reflibnav_header_middle.png"); height:65px; position:relative; margin-left:15px; margin-right: 5px; min-width:700px"> <input type="hidden" name="results" value="10"/> <a href="/web/20100114041210/http://developer.apple.com/safari/library/navigation/index.html"><img style="border:none;position:absolute; left:-15px" src="/web/20100114041210im_/http://developer.apple.com/safari/library/Resources/394/includes/reflibnav_safari_header.png" height="65"/></a> <label for="gh-adcsearch">Search Safari Reference Library <input class="adcsearch prettysearch" style="position: absolute; right:25px; width: 225px; margin-top:31px" type="search" name="Search" id="gh-adcsearch" accesskey="s" results="5"/></label> <img src="/web/20100114041210im_/http://developer.apple.com/safari/library/Resources/394/includes/reflibnav_header_right.png" style="position: absolute; right: -5px;" height="65"/> </form> </div>   <div id="sidebarContent"> <ul class="contentBox" id="navigationBox"></ul> </div> <div id="mainContent"> <div id="contentBox"> <div id="contentBox_toggle"></div> <div id="currentFilter_Callout"> <div id="currentFilter_GettingStartedList"></div> <img id="currentFilter_Image" class="hidden" alt="Icon for current selection"> </div> <h2 id="currentFilter_Title"></h2> <p id="currentFilter_Description"></p> </div> <div id="frontPageTabContainer"> <div id="frontPageTabs"> <div id="frontPageTabs_toggle"></div> <ul> <li id="frontPageTab_overview" class="inactive">Overview</li> <li id="frontPageTab_gettingStarted" class="inactive">Getting Started</li> <li id="frontPageTab_featured" class="inactive">Featured</li> </ul> </div> <div id="frontPageTabContents"> <div class="frontPageTabContent" id="frontPageTabContent_overview"> <img style="margin-bottom: 0px; margin-top: 0; margin-left: 0; margin-right: 20px; float: left;" src="/web/20100114041210im_/http://developer.apple.com/safari/library/Resources/394/Images/safari/safari_icon.png" alt="Safari application icon" width="133" height="203"> <div> <h1 style="color:black"><strong>Safari</strong> Reference Library</h1> <h3 style="font-weight: normal">Explore a comprehensive collection of guides, reference, and other resources for developing web applications and content for Safari.</h3> </div> <p style="margin-top: 20px; margin-left:155px;">The Safari Reference Library provides detailed information for web developers on iPhone, iPod touch, Mac, and PC. These resources include guides and articles, API reference documents, sample code, release notes, and technical notes. Use these resources to learn about Safari's developer tools, visual effects, HTML and CSS support, JavaScript and DOM support, and other features and technologies. The library is organized by Topics and Resource Types.</p> </div> <div class="frontPageTabContent" id="frontPageTabContent_gettingStarted"> <div id="gettingStartedBody"> <p>Whether you want to familiarize yourself with the fundamentals, prefer a hands-on approach, or want to go in depth with specific task-based information, read the following documents to quickly get started developing your web applications and content:</p> <img id="gettingStartedIcons" src="/web/20100114041210im_/http://developer.apple.com/safari/library/Resources/394/Images/safari/gs_icons.png" alt="Icons for Dashcode, iPhone Simulator, and Safari Mobile" width="456" height="174"/> <p> </p> <div class="docLink"><a href="/web/20100114041210/http://developer.apple.com/safari/library/referencelibrary/GettingStarted/GS_DashboardWidget/index.html#//apple_ref/doc/uid/TP40008133" target="_top">Getting Started with Dashboard Widgets</a></div> <div class="docLink"><a href="/web/20100114041210/http://developer.apple.com/safari/library/referencelibrary/GettingStarted/GS_iPhoneWebApp/index.html#//apple_ref/doc/uid/TP40008134" target="_top">Getting Started with iPhone Web Apps</a></div> <div class="docLink"><a href="/web/20100114041210/http://developer.apple.com/safari/library/referencelibrary/GettingStarted/GS_WebApp/index.html#//apple_ref/doc/uid/TP40008135" target="_top">Getting Started with Web Apps</a></div> </div> </div> <div class="frontPageTabContent" id="frontPageTabContent_gettingStarted"> </div> <div class="frontPageTabContent" id="frontPageTabContent_featured"> <img src="/web/20100114041210im_/http://developer.apple.com/safari/library/Resources/394/Images/safari/fingertips_small.png" height="258" width="182" alt="Fingertips tutorial on iPhone" style="float: left; margin-top: 5px; margin-left: 15px;"/> <div style="margin-left: 215px; margin-top: 10px;"><div class="docLink"><a href="/web/20100114041210/http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/index.html#//apple_ref/doc/uid/TP40008032" target="_top">Safari Visual Effects Guide</a></div> <p style="margin-left: 25px;">This guide explains how to add visual effects to your web content for Safari on the desktop and iPhone OS. Learn how to:</p> <ul> <li>Use gradients in place of images, apply masks to images, and create reflections of images.</li> <li>Trigger smooth transitions when changing a CSS property value or perform more fine grained animations.</li> <li>Apply 2D and 3D transforms to elements and animate them as well.</li> <li>On iPhone OS, combine these visual effects with touch events in JavaScript to create web applications that respond like native applications. For example, allow the user to manipulate an object in 3D space with the touch of a finger.</li> </ul> </div> </div> </div> </div> <div id="documentsBox" class="RefLib"> <div id="docTableFilter"> <span id="docTableFilter_title">Documents</span> <div id="docsFound"></div> <input type="search" placeholder="Filter document list" name="documentFilter" id="documentFilter"/> <span id="documentFilter_help"> </span> <div id="documentFilter_help_bubble"> <div> <p>Find documents by keyword including title, resource type, topic, framework, and date.</p> <p>For example:</p> <ul> <li>security guide</li> <li>sample code</li> <li>quartz sample code snow leopard</li> </ul> </div> </div> </div> <div id="documentsTable_Wrapper"> <table id="documentsTable"> <tr> <td colspan="6"><img id="waitAnimation" class="hideInXcode" src="/web/20100114041210im_/http://developer.apple.com/safari/library/Resources/394/Images/waitanimation.gif" alt="Loading..."/></td> </tr> </table> </div> </div> </div> <div id="navpage_footer"> <div id="feedbackForm" style="display: block; margin-left: auto; margin-right: auto; width: 38em; margin-bottom: 15px; margin-top: 15px; font-weight: bold; color: #333333; background: #d9d9d9; padding: 5px 10px 5px 10px; height: 15px; text-align: center; -webkit-border-radius: 12px; -moz-border-radius: 12px; vertical-align: middle;"> Did this document help you? <span class="tooltip" data-abstract="<b>Yes:</b> Tell us what works for you."> <a href="/web/20100114041210/http://developer.apple.com/feedback/?v=1" class="urlLink">Yes</a> </span> <span class="tooltip" data-abstract="<b>It's good, but:</b> Report typos, inaccuracies, and so forth."> <a href="/web/20100114041210/http://developer.apple.com/feedback/?v=2" class="urlLink">It's good, but...</a> </span> <span class="tooltip" data-abstract="<b>Not helpful:</b> Tell us what would have helped."> <a href="/web/20100114041210/http://developer.apple.com/feedback/?v=3" class="urlLink">Not helpful...</a> </span> </div> <style> /* PIPED LINKS */ .piped { display: block; zoom: 1; } .piped:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .piped li { float: left; display: inline; font-size: 10px;} .piped a { border-left: 1px solid #797c80; padding: 0 0 0 0.75em; margin-left: 0.75em; } .piped a.first { border-left: 0 !important; padding-left: 0; margin-left: 0 !important; } #globalfooter * { margin: 0px; padding: 0px;} #globalfooter ul { list-style: none outside; } /*--- Global Footer (legacy) ---*/ #globalfooter .gf-buy { float: left; width: 60%; margin: 18px 0 9px; } #globalfooter .gf-links { float: right; margin: 18px 0 9px; } #globalfooter .gf-links a { padding: 0 10px; white-space: nowrap; } #globalfooter .gf-links a.last { padding-right: 0; _float: none !important; width: auto !important; } /*--- Global Footer ---*/ #globalfooter {color: #888; font-size: 10px; margin: 18px auto; padding-bottom: 36px; text-align: left !important; } #globalfooter a { color: #08c; } #globalfooter p { margin-bottom: 1em; font-size: 10px; } #globalfooter p.gf-buy { float: left; width: 52%; margin: 18px 0 9px 3px; } #globalfooter ul.piped a { padding: 0 0 0 1.5em; margin-left: 1.5em; border-left: 1px solid #d0d0d0; } #globalfooter .gf-links { float: right; margin: 18px 3px 9px 0; } #globalfooter .gf-sosumi { clear: both; width: 100%; border-top: 1px solid #ddd; padding-top: 9px; } #globalfooter .gf-sosumi a { padding: 0 10px; } #globalfooter .gf-sosumi p { float: left; margin-left: 3px; } #globalfooter form { margin: 18px 10px; } #globalfooter .search-wrapper { margin: 0 auto; } #globalfooter .search-wrapper input.prettysearch { margin-left: 10px; } #globalfooter ul.piped a.contact_us { padding-right: 1.5em; border-right: 1px solid #d0d0d0; } #globalfooter ul.piped a.choose { margin-left: 0; border: 0; } #globalfooter ul.piped a.choose img { vertical-align: middle; margin-top: -5px; position: relative; } </style> <div id="globalfooter"> <p class="gf-buy">Shop the <a href="https://web.archive.org/web/20100114041210/http://www.apple.com/store/">Apple Online Store</a> (1-800-MY-APPLE), visit an <a href="https://web.archive.org/web/20100114041210/http://www.apple.com/retail/">Apple Retail Store</a>, or find a <a href="https://web.archive.org/web/20100114041210/http://www.apple.com/buy/locator/">reseller</a>.</p> <ul class="gf-links piped"> <li><a class="first" href="https://web.archive.org/web/20100114041210/http://lists.apple.com/">Mailing Lists</a></li> <li><a href="/web/20100114041210/http://developer.apple.com/rss/">RSS Feeds</a></li> </ul> <div class="gf-sosumi"> <p>Copyright © 2009 Apple Inc. All rights reserved.</p> <ul class="piped"> <li><a href="https://web.archive.org/web/20100114041210/http://www.apple.com/legal/terms/site.html" class="first">Terms of Use</a></li> <li><a href="https://web.archive.org/web/20100114041210/http://www.apple.com/legal/privacy/">Privacy Policy</a></li> </ul> </div> </div> </div> </div> <div id="breadcrumbs" class="hideInXcode"> <a href="https://web.archive.org/web/20100114041210/http://developer.apple.com/safari">Safari Dev Center</a> </div> <div id="tooltip"></div> <script type="text/javascript"> var Book = { title: 'Safari Reference Library', isNavPage: true, resourcesURI: '../Resources/394' }, NavigationPage = { searchURI: 'https://web.archive.org/web/20100114041210/http://developer.apple.com/safari/search/search.php?results=10&Search=', isDocumentTable: true, templateName: 'safari', doesHaveFrameworks: false, doesHaveTopics: true }; </script> <script type="text/javascript" src="/web/20100114041210js_/http://developer.apple.com/safari/library/Resources/394/JavaScript/devpubs.js"></script> <script type="text/javascript" src="/web/20100114041210js_/http://developer.apple.com/safari/library/Resources/394/JavaScript/navigation_page.js"></script> </body> </html>

CINXE.COM

Safari Reference Library