New Web Features in Safari 9.1
Last week, a new version of Safari shipped with the release of iOS 9.3 and OS X El Capitan 10.11.4. Safari on iOS 9.3 and Safari 9.1 on OS X are significant releases that incorporate a lot of exciting web features from WebKit. These are web features that were considered ready to go, and we simply couldn’t wait to share them with users and developers alike.
On top of new web features, this release improves the way people experience the web with more responsiveness on iOS, new gestures on OS X, and safer JavaScript dialogs. Developers will appreciate the extra polish, performance and new tools available in Web Inspector.
Here is a brief review of what makes this release so significant.
Web Features
Picture Element
The <picture> element is a container that is used to group different <source> versions of the same image. It offers a fallback approach so the browser can choose the right image depending on device capabilities, like pixel density and screen size. This comes in handy for using new image formats with built-in graceful degradation to well-supported image formats. The ability to specify media queries in the media attribute on the <source> elements brings art direction of images to responsive web design.
For more on the <picture> element, take a look at the HTML 5.1 spec.
CSS Variables
CSS variables, known formally as CSS Custom Properties, let developers reduce code duplication, code complexity and make maintenance of CSS much easier. Recently we talked about how Web Inspector took advantage of CSS variables, to reduce code duplication and shed many CSS rules.
You can read more about CSS Variables in WebKit.
Font Features
CSS font features allow you to use special text styles and effects available in fonts like ligatures and small caps. These aren’t faux representations manufactured by the browser, but the intended styles designed by the font author.
For more information, read the CSS Font Features blog post.
Will Change Property
The CSS will-change property lets you tell the browser ahead of time about changes that are likely to happen on an element. The hint gives browsers a heads-up so that they can make engine optimizations to deliver smooth performance.
Read more about will-change in the CSS Will Change Module Level 1 spec.
Gesture Events for OS X
Already available in WebKit for iOS, gesture events are supported on OS X with Safari 9.1. Gesture events are used to detect pinching and rotation on trackpads.
See the GestureEvent Class Reference for more details.
Browsing Improvements
Fast-Tap on iOS
WebKit for iOS has a 350 millisecond delay to allow detecting double-tapping to zoom content that appears too small on mobile devices. With the release of Safari 9.1, WebKit on iOS removes the delay for web content that is designed for the mobile viewport size.
Read about More Responsive Tapping on iOS for details on how to ensure web pages can get this fast-tap behavior.
JavaScript Dialogs
To protect users from bad actors using JavaScript dialogs in unscrupulous ways, the dialogs in Safari 9.1 were redesigned to look and work more like web content. The new behavior means that dialogs no longer prevent a user from navigating away or closing the page. Instead users can more clearly understand the dialogs come from the web page they are viewing and easily dismiss them.
For more details, see the Displaying Dialogs section from What’s New in Safari.
Web Inspector Improvements
Web developers will enjoy several new noteworthy enhancements to debugging and styling with Web Inspector. Faster performance in timelines means debugging complex pages and web apps is easier than ever. The new Watch Expressions section in the Scope Chain sidebar helps a developer to see the data flowing through the JavaScript environment.
In the Elements tab, pseudo-elements such as ::before and ::after are accessible from the DOM tree to make it straightforward to inspect and style them.
Web Inspector also added a Visual Styles sidebar that adds visual tools for modifying webpage styles without requiring memorization of all of the properties and elements of CSS. It makes styling a web page more accessible to designers and developers alike, allowing them to get involved in exploring different styles.
Learn more about how it works in Editing CSS with the Visual Styles Sidebar.
Feedback
That is a lot of enhancements and refinements for a dot-release. Along with OS X El Capitan, Safari 9.1 is also available on OS X Yosemite and OS X Mavericks — bringing all of these improvements to even more users. We’d love to hear about your favorite new feature. Please send your tweets to @webkit or @jonathandavis and let us know!