New Web Features in Safari
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.
Here is a brief review of what makes this release so significant.
<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, 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.
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
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.
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.
For more details, see the Displaying Dialogs section from What’s New in Safari.
Web Inspector Improvements
In the Elements tab, pseudo-elements such as
::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.
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!