Features in Safari
Now it’s possible to assign values to custom CSS variables, so you can more easily manage complex CSS systems and reduce the amount of duplicated code.
CSS Initial Letter
Initial letter CSS improves usability and creates visual interest by adding a visual marker to the beginning of new sections of content.
CSS Backdrop Filters
Backdrop filters allows webpages to easily create visual layering that adds a sense of depth, while preventing details in the content underneath, even videos, from cluttering the foreground content.
CSS Shapes and Compositing
Using CSS, websites can now easily flow text around images and geometry shapes, and perform image compositing operations on DOM elements.
Safari supports complex, magazine-like layouts for webpages. CSS Regions allow content in complex layouts to flow within different regions and still be associated.
CSS quotation marks
CSS quotation marks are now language sensitive, allowing your webpages to display the right quotation marks for your language character set.
CSS filters make it simple to create advanced filter and pixel effects such as blurs and gradients. CSS filters can vary brightness, adjust hues, invert colors, or convert elements to sepia or grayscale. Developers can combine filters and animate changes between them, while tapping into hardware acceleration for fast, smooth rendering.
CSS animation, an open standard that brings a new level of interactivity to the web, lets web designers scale, rotate, fade, and skew web elements to create cutting-edge websites. Safari was the first web browser to support CSS animation.
CSS Scroll Snapping
Scroll snapping with CSS allows web pages to smoothly end user scrolling with content elements always perfectly aligned in the view.
New CSS4 pseudo-classes make it easier than ever to apply styles to any link, based on the current language, a numbered element, or when an input placeholder is shown. Powerful new matching and not-matching pseudo-classes help simplify style code to make it easier to maintain web sites.
Pioneered by Safari, CSS effects help developers add polish to websites by stylizing images and photos with eye-catching gradients, precise masks, and stunning reflections that require only a few lines of code.
CSS3 Web Fonts
CSS3 web fonts allow web designers to create stunning websites using the fonts they prefer rather than restricting themselves to "web-safe fonts." Safari was the first web browser to automatically recognize websites that use custom fonts, downloading them as they're needed.
Safari allows developers to provide better reading experiences and text layouts with support for CSS3 auto-hyphenation.
CSS3 Vertical Text
Developers can use top-to-bottom text layouts in web pages, allowing for greater customization of websites in languages that use vertical text, such as Chinese and Japanese.
CSS3 Text Emphasis
With the text emphasis property, web pages can display emphasis marks commonly used in East Asian text.
Using CSS Canvas, web designers can position canvas elements anywhere an image can be placed using CSS. Safari was the first web browser to support CSS Canvas.
Picture-in-Picture for macOS New
Enhanced Rich Links New
Ensure all the rich website links that appear throughout macOS in Safari, Messages, Notes and more include the information you want to show them. Simply specify a title, description, URL, and image in your website’s Open Graph data.
Picture Element Support
Thanks to Picture Element Support, Safari will automatically display the appropriate image for each media query breakpoint when you provide it with multiple image resources and sizes.
HTML5 Media Support
Websites can now deliver rich, interactive media as easily as they deliver images. The first browser to support HTML5 audio and video tags, Safari helps developers create media-rich sites that don’t require additional plug-ins. The media tags also offer a rich scripting API, allowing developers to create powerful new controls as well as controls that match the style of the page.
Full Screen for HTML5 Video
You can watch video embedded with the HTML5 <video> tag in full screen. Full-screen support allows standards-based video to deliver a first-class viewing experience.
Closed Captions for HTML5 Video
Safari has support for closed captions in HTML5 video. If an HTML5 video on a web page includes closed captions, simply click the CC button in the video controls to display them.
With Safari support for HTML5 geolocation, you can choose to share your location with certain websites that use it to provide relevant information, such as maps or nearby businesses.
HTML5 Sectioning Elements
Support for article, aside, footer, header, hgroup, nav, and section elements allows developers to create advanced web designs with semantic markup.
HTML5 AJAX History
Support for HTML5 AJAX history allows web developers to build interactive AJAX applications that update dynamically but still work smoothly with the back and forward navigation buttons in Safari.
HTML5 Sandbox Attribute
With support for the sandbox attribute for iframe elements, Safari can restrict the actions of contents hosted inside an iframe. This makes iframes more secure by preventing them from running scripts or loading plug-ins that could deliver unwanted or deceptive content.
Inline Video and Autoplay on iOS New
To help users easily discover your video content, you can now autoplay videos and play them inline with other content on your webpages on all iOS devices. Safari supports autoplay on iOS devices for videos without sound, keeping down the number of distractions on the web.
Shadow DOM New
Shadow DOM makes it much easier to build large-scale web applications since developers can encapsulate elements on a webpage and define how they interact in the applications.
HTML5 Forms Validation
Safari can check the information in online forms to ensure that the format is correct before sending the information to the website’s server. If the wrong information is entered in an input field, Safari can inform you about the error right away.
Safari can display annotations alongside the main text in a web page, allowing pronunciation annotations in web pages that use Chinese, Japanese, or Korean characters.
HTML 4.01 Support
Safari supports HTML 4.01, the authoring language that defines the structure and layout of web documents.
HTML5 Offline Support
Web developers can create applications that you can use even when you don’t have access to the Internet. Thanks to HTML5 offline support, web applications that are stored on your computer are immediately accessible anytime. Along with the application, web developers can also choose to store the application’s data on your system, so you always have the information you need. Applications and data can be stored in a traditional SQL-like database serving as an application cache or in the familiar cookie format.
HTML5 Web Notifications
Websites can keep users up to date about breaking news, new messages, and other alerts. Website notifications appear in the upper-right corner of the screen with other notifications and in the new Notification Center in Mountain Lion. Extensions enabled in Safari can also send notifications.
HTML5 Draggable Attribute
Safari makes it easier for developers to create web pages with drag-and-drop user interfaces for items like photos or images.
ECMAScript 2015 (ES6) New
Web developers can use for…of loops to more easily iterate over the property values of objects.
With symbols, web developers can create unique identifier objects for protecting data attached to page elements and code objects.
With template literals, web developers can avoid complicated string concatenation, making code easier to read and maintain.
AirPlay Video JS API
Presentation Mode Support
Web Open Font Format (WOFF) 2.0 New
Web Open Font Format (WOFF) gives web designers and developers a wider range of typography options for websites. Support for WOFF 2.0 improves compression of fonts, so they take up less space and require less bandwidth to load.
Custom Toolbars in View Controllers New
You can customize the color of the toolbars when users view links in Safari View Controller from your iOS app.
Display advanced text styles and effects, such as ligatures, tabular numbers, small caps, and more, just as the font author intended them to be presented on webpages.
Support for WebGL allows developers to create immersive, 3D experiences that work natively in Safari.
Widow and orphan support
With widow and orphan support, you can specify page breaks and avoid awkward pagination in webpage text.
Kerning and Ligatures
Text in webpages automatically benefits from support for kerning and ligatures in Safari.
Sideways text orientation
With Safari support for text-orientation: sideways, Safari supports vertical text layouts that have horizontal text within them, helpful for webpages in East Asian languages.
Hardware acceleration allows Safari to tap into graphics processing units to display computing-intensive graphics, so standards like HTML5 and CSS3 can deliver rich, interactive media smoothly in the browser. Safari also accelerates plug-in content.
Graphics Acceleration for HTML5 Canvas
With Safari, HTML5 Canvas elements on web pages take advantage of hardware acceleration, allowing faster performance for interactive graphics that are rendered natively in the browser.
Thanks to the anti-aliasing algorithm in Safari, you enjoy crisp, gorgeous fonts. The algorithm preserves the subtleties of each font while rendering each character with a crispness that makes your favorite sites a pleasure to read.
Deep Color New
Take full advantage of displays that support wider color gamuts and extended dynamic ranges to bring new vitality to the images and media on your websites.
Right-to-left Scrollbars New
Safari recognizes right to left languages and automatically puts scrollbars on the left side of the window for those languages.
Color Profile Support
The only browser that color-corrects web images, Safari delivers vibrant, accurate color. Safari has supported International Color Consortium (ICC) profiles from day one, so the photos and images you see in your browser are as true to the originals as possible.
International Web Content
Safari is designed to handle web content from all regions of the world, including a broad range of alphabets, number systems, writing directions, currencies, weights and measurements, date and time formats, and time zones.
Access sites with non-English web addresses. Safari offers Internationalized Domain Name (IDN) support, which allows web developers to use URLs that contain non-English letters and characters.
Because Safari supports Unicode, the accepted international encoding standard, you can enjoy web content in any number of languages, including Arabic, English, and Japanese.
Safari supports multidirectional text rendering, allowing websites drafted in other languages to display characters from right to left.
In many fonts, letters may change their shape and spacing depending on their position in a word. For example, in languages like Arabic, a letter used in the middle of a word may be shaped differently from the same letter used at the end of a word. Safari recognizes many of these contextual letterforms when rendering different fonts and languages.
Captions for video
WebKit now supports out-of-band captioning on Mountain Lion and Lion. In-band subtitles are now supported on Mountain Lion.
High DPI for image-set
Support for high-DPI with the image-set function makes it easier to specify when to use higher-resolution images for displays with high pixel density.
HTTP strict transport security
Your website can now specify that only https should be used to connect.
Page visibility events
Safari now supports the page visibility API.
Web Speech API
Support for the Web Speech API, Safari can convert text to speech and vice versa, allowing developers to create accessible, voice-driven web apps.
Closed Captions for HTML5 Video
Safari can now deliver an accessible video experience. If a video embedded in a web page using the HTML5 <video> tag includes closed captions, click the CC button in the video controls to display them.
HTML5 Timed Text Tracks
Developers can specify the timing of any text that appears with a media element, such as captions or subtitles.
HTML5 Media Synchronization
Safari supports web pages that coordinate the playback of multiple HTML5 media elements. Website developers can overlay a sign language interpretation track on a video track and keep the two in sync.
HTML5 and Legacy Plug-ins New
To deliver faster load times, better battery life, and stronger security, Safari is optimized for HTML5, and will load this content whenever it is available. For websites that require proprietary formats, Safari supports use of plug-ins such as Flash. Users can enable these plug-ins for one session or every time they visit a specific website. And as long as they visit the website regularly, the plug-in remains enabled.
Apple Pay on the Web New
Give customers an easy and secure way to make purchases in Safari 10. Apple Pay allows customers to quickly pay without entering payment, shipping, or contact information on supported websites from their Mac, iPhone, or iPad. Because card numbers aren't used and every transaction is confirmed with a fingerprint or passcode, Apple Pay is more secure than accepting credit and debit cards.
3D Touch Behaviors for iOS New
Newer iPhone models introduced Quick Actions and Peek and Pop, giving users quickly access to several actions and interactive previews. Now you can make your own Peek and Pop events using WKWebView and 3D Touch behaviors based on how much pressure a user applies to the display.
Gesture Events for macOS
Gesture events for pinching and rotation on iOS are now available on the Mac trackpad, so you can incorporate them into websites on macOS.
Safari Push Notifications
Keep users up-to-date with news and other alerts using Apple push notifications. Once users have signed up for notifications from your website in Safari on OS X Mavericks, you can send push notifications that appear just like Mac app notifications even when Safari isn’t running. Users can click the notification to launch your website in Safari.
With sticky positioning, elements can remain fixed within the Safari window even as the user scrolls.
WebKit — the open source rendering engine introduced by Apple — powers Safari on OS X and iOS. WebKit features blazing performance and extensive standards support. And because it’s open source, developers can examine WebKit code and contribute to the community.
Web Audio API
Acid 2 Compliance
Designed by the Web Standards Project, Acid tests determine whether a web browser complies with emerging Internet standards. Acid 2 tests for compatibility with new features in the HTML, CSS, and PNG standards. Pioneering the standardization effort, Safari passed Acid 2 on October 27, 2005 — two and a half years before any other popular browser.
Acid 3 Compliance
Formatted XML Files
When developers download unstyled XML files, Safari presents the information in a clear document tree format, making it easier to read.
Safari can store audio and video data for web applications that use the HTML5 application cache, allowing for offline media playback and better media performance when an Internet connection is slow.
Standards compliant IndexedDB New
The newly improved, standard compliant implementation of IndexedDB lets developers store structured data for web applications on the client side and access it quickly.
Automated Testing with WebDriver for macOS New
WebDriver lets you automate testing of layout, usability, navigation, and more, so you can programmatically verify the behavior of your websites in Safari.
Content Security Policy 2.0 New
Content Security Policy 2.0 brings you more control over the security of assets on your webpage through security policies. You can specify the sources you trust to run remote content.
Fast-Tap on iOS
Users of Safari on iOS will experience incredibly fast response rates when tapping links and buttons on webpages at their initial scale. You can also choose to offer faster tapping in lieu of double-tap to zoom for elements on a zoomed-in webpage.
Force Touch APIs
Web developers can use the Force Touch APIs to add new dimensions of interactivity to their web pages on devices that support Force Touch.
Safari supports real-time push notifications from a server. Web applications that use EventSource can receive faster, more reliable communications from the website’s server.
With support for WebSocket, Safari has a speedy, two-way communication link with a web application’s server, so online activities like chatting are faster and require less bandwidth.
With support for Mathematical Markup Language (MathML), Safari allows developers to embed mathematical notation in a web page without using an image file.
Full-Screen Web Pages
SVG 1.1 Support
By taking advantage of the Scalable Vector Graphics (SVG) support in Safari, web developers can create fonts, graphic elements, and animations on the fly that look great no matter how large or small they are. For example, mapping sites often use SVG to draw driving directions based on your location and destination.
ICC Color Profile Support
Safari uses advanced color management technology to deliver web images with rich, accurate color. In fact, it was the first browser to support International Color Consortium (ICC) profiles and has done so from day one, so the photos and images you see in your browser stay true to the originals.
Plug-ins are add-ons that expand a browser’s capabilities. Because it supports the standard Netscape plug-in architecture, Safari works with the full range of popular Internet plug-ins, including Flash, Shockwave, and QuickTime.
With Java support in Safari, you can use web pages that incorporate Java plug-in content.
XML 1.0 Support