In speech at the Apple WWDC, its core elements highlighted two new OS named Capitan after a rock formation in Yosemite (which has been taken by most commentators to indicate that Apple sees its next OS as a minor, rather than major, version). MacOS El Capitan and iOS 9 are ready to all Apple developers, will be released to public beta next month, finally go live in this autumn.
Among the usual statement of about Apple pay rolling out to a whole two countries (Canada and the UK) and Apple’s streaming music service, the clues about how Apple sees the Web, and Safaris role, evolving in the next few years… appear.
1) SCROLL SNAPPING
One of the considerable statements for web designers is the application of CSS scroll snapping. Scroll snapping, supported by Java Script, is an effective tool for customization the flexibility on a scroll to be put in predefined position. It just like when you scroll a single page site that slid to the next section.
It is obvious that Apple’s prediction about single page sites with sections that fill the whole viewport trend is true and Safari 9 introduces the following CSS scroll snapping properties: -webkit-scroll-snap-type, -webkit-scroll-snap-points-y, -webkit-scroll-snap-points-x, -webkit-scroll-snap-destination, and -webkit-scroll-snap-coordinate.
2) PINNED SITES
Safari 9 offers pinned sites. Pinned sites help to keep your favorite websites open in the browser for quick access, without leaving a tab open. Using this tool is very simple, just drag an open tab to the left and a small icon will be created in the bookmarks bar allowing you to quickly access the page.
Users need to get ready by creating icons: make it solid black, with a transparent background, and save it as an SVG, then link to the icon in the head of your HTML document, like so:
3) HTML5 VIDEO ENHANCEMENTS
Safari 9 introduces a couple of improvements for HTML5 video.
PiP (Picture in Picture) is a kind of video that’s applied largely on TV including playing a video in the corner of the screen while other content is viewed elsewhere.
PiP from Safari 9 is unbelievable change for anyone who likes to watch live events (like the Apple WWDC keynote) while actually working. Nevertheless, it still exists a disadvantage things is that you will see the first PiP adverts popping up in the corner of your browser in the next 6 months, but Safari 9 also provides the option to turn off all audio across all tabs with a quick click.
4) FORCE TOUCH EVENTS
Force touch events seem like useful for supplementary navigation but the technology is not just software, but also hardware, restricted. On the other hand, when you apply it as a progressive enhancement, it brings you some interesting experiences, especially in the area of gaming and experimental UI design.
5) SAFARI VIEWCONTROLLER
SFSafariViewController seems to attract app designers than web designers at the first time appearing. It enables apps to display Web content within an app using Safari’s rendering.
Designed for streamlining scenarios such as opening a native app, creating an account on a company’s web page, before returning to an app to log in with the account, the outstanding feature about SFSafariViewController is allowing web, rather than native, to be the keystone of a company’s online systems.
6) ECMASCRIPT 6
7) CSS FILTERS
The backdrop-filter CSS property has been added to Safari 9. Blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia filters are all available.
8) DEVELOPER MODE UPDATES
Responsive design mode has been included in Safari 9 as an effective tool for fast switching of layouts across different viewports. All Apple devices are installed as presets, but it’s more of a useful presentation tool for client meetings than a dev tool as best practices favor content, as opposed to viewport, breakpoints. Responsive design mode only alters the viewport, it doesn’t simulate different devices. It may be a quick useful test whenever new Apple devices are launched, before device simulators catch up.
The web inspector has been redesigned. Along with some UI tweaks to improve the UX, there’s a greater emphasis on frame rendering and performance.
9) UNPREFIXED CSS
Some updates are more welcome than others but less likely to be noticed and the dropping of browser prefixes for over 45 CSS properties is not an exceptional. While it does little in the short term with legacy browsers still in use, browsers drop should be prefixed as soon as possible.
The most significant to go prefix-free are the flex properties, the transition properties, the transform properties, and the animation properties.