Hello and welcome to WWDC Hello I'm Jon Davis, Web Technologies evangelist for the Safari and WebKit teams.
I'm so excited to get to tell you about all of the new features and improvements for web developers this year. If you develop websites, web apps save to the home screen, or Web content used in apps, and want to learn about all of the latest technologies available in Safari and WebKit, this session is for you. In this session. I'll give you a tour of the new features and enhancements in WebKit and shipping in Safari 13.1 for macOS, Safari on iOS and iPadOS 13.4 and coming to Safari 14 on macOS, iOS an iPadOS. But first, there's some really great news I want to share up front. We made a really big effort this year to improve Safari's interoperability with other browsers. One way to measure that is web platform tests. It's a set of tests used by browser makers to ensure interoperability, so your web content operates the way you expect across browsers. So I'm pleased to announce improved interoperability for service workers, XHR + Fetch, pointer events, CSS, SVG, web assembly, and many more areas. Safari passes a hundred and forty thousand new interoperability test cases this year.
All of these improvements help users and developers have a faster browsing experience in Safari. And there's performance improvements for developers too. CPU usage while scrolling is three times less. It's buttery smooth with 0 dropped frames. IndexedDB operations are up to 10 times faster. Reduced overhead makes for-of loops of the five times faster based on micro benchmarks.
Safari and WebKit are faster than ever. But now I'm going to show you the new Web API added in WebKit and available in Safari. First up, is the Web Animations API. It's long awaited and new in Safari 13.1.
And Web Inspectors Graphics tab now shows you the animation instances.
My colleagues on the WebKit team love discussing their pets, so I've been maintaining an internal website where they can share pictures and comment on them. And of course it uses responsive design so that when you resize the window and things start to get a little cramped, the control shrink to just show the icon and save space. But some folks said they wanted a flexible editor because they like having the extra space while commenting.
Let's check it out. With the code in place, the resizing the editor causes the buttons to hide the labels and resize the way you'd expect.
That's ResizeObserver. If you want to learn more, there's a blog post on the WebKit blog with more details.
Another feature I need to get working on the Webkitten's website is the paste button, and I've got just the thing. The async clipboard API. It's also new this year and available in Safari 13.1. You can read data from the system clipboard for paste operations or write data to the clipboard for copying. It's asynchronous to avoid blocking the page while you're accessing the clipboard. And there's no need to fake a selection or have element focus to copy data into it. It supports multiple items and item types like images and rich formatted text but, needs a secure context over https and calls must be invoked in response to user interaction.
Now if you're working with just plain text it has shortcut methods to make it even easier. Copying plain text is as easy as using the clipboard right text method to write a string of text. And pasting plain text, uses of the clipboard read text method. But for the WebKittens website the team wants rich HTML formatted text when pasting. Inside the click handler the clipboard read method is called asynchronously to get an array of clipboard items back. The clipboard items are iterated to find the HTML data.
The data gets returned as a blob object. Then file reader is used to get the HTML data back which is collected and appended to the editor.
I copied a comment from another post earlier to test with so I'll click the paste button and post it. And there you have it, a functional paste button that handles rich text. The async clipboard API is powerful and this just scratched the surface. You can learn more about it on the WebKit blog.
Now if you're a developer of a library or framework, this next news is for you.
Safari 13.1 now supports the EventTarget constructor. EventTarget is used by objects that can receive events. For example, Dom elements extend the EventTarget. But now your own objects can too without all the extra element behaviors. Library authors can use native event functionality to create their own object interface for dispatching custom events for non-dom objects. While we're talking about library developers a lot of libraries are simply providing a custom component for web authors to implement.
So that leads us to an update on web components.
We've had support for web components in Safari for a long while now and they keep becoming more and more powerful. It's actually another feature I took advantage of on the WebKitten's website.
The ID attribute value is repurposed to serve as the custom element hook.
Our custom element class extends a generic HTML element and in the constructor clones the template content to modify the template fragment with our text label and icon. And then appends our modified DOM fragment to the shadow root of the custom element. Then the page markup can create those elements using the custom elements registered name as the tag name.
Each of the format buttons can be customized for bold, italic, underline, and so on. Now as a component author you provide a generic component that can get used in many ways so you want to give the page authors some control over how these elements are style. In this case as a component author we don't know what kind of button each one will end up being. In the example, component styling handles the layout of a larger text icon to the left of the button label. But in order to give the bold buttons B icon a bold style and an italic style for the I icon the page author who knows what kind of button they're implementing needs to be able to customize that part of the component.
With Safari 13.1 released this spring they can, using CSS shadow parts. It allows web component authors to specifically expose parts of their components to content authors to style with their own CSS. You don't need to know all of the underlying markup structure of the component to style it, just the parts of the component the author exposed through the part attribute. Component layout is protected and content authors can customize the components to fit the use case or better match the style of their website.
Looking back at our example, this was the original template markup. By adding the part attribute to the elements inside the component they're now exposed to the pages CSS. Now the page author that's implementing the buttons can use the part pseudo element selector and easily decorate the buttons to provide an extra visual hint about their function. So this, turns into this. And that's CSS shadow parts for web components. Speaking of visual hints, WebKit added support for another visual hint. The HTML enter key hint attribute it supported on Safari on iOS 13.4 and iPadOS. It allows you to declare an action label for the enter key on virtual keyboards of a touchscreen device. You can set the label to give your users a hint about what action the enter key will take. Instead of just enter it could be done or go or send, for example. Before I wrap up the new Web API, there's one more API to mention, the web authentication API.
It supports logging into websites beyond usernames and passwords, and it was introduced in Safari 13 and Safari on iOS 13.3 with support for hardware security keys. And with the latest Safari, WebKit has added support for Touch ID and Face ID in Safari on macOS iOS and iPadOS. You can learn all about the security and convenience of implementing it for your users by watching the Face ID and Touch ID on the web session in the Developer app.
And that's a look at the new Web API in Safari this year: web animations ResizeObserver, the async clipboard API, The EventTarget Constructor,CSS Shadow Parts, HTML. Enter Key Hints and web authentication. I can't wait to see what you do with these new capabilities. But we're not done yet.
Let's take a look at several CSS improvements that give content authors more fine grained control over styles and layout.
This year WebKit added support for system font families. They work in WebKit across all of Apple's platforms. They each map to a system appropriate font.
The system UI font family is a generic alias for UI sans serif and on the system it maps to San Francisco. UI serif uses the New York font family.
UI monospace uses SF Mono. And UI rounded uses SF rounded. They're useful when developing a web app that you want to make feel more familiar to the system and the different font families allow you to create an easily identifiable difference between content and user interface, such as on the WebKit website. It uses UI serif for the content areas And UI sans serif for the user interface when adding a comment. So beautiful new font families for your web apps. Another CSS feature that can help your content layout is support for line break anywhere. It breaks to a new line at any opportunity before the content overflows. This can be particularly helpful with long words that can overflow narrow containers, especially technical jargon like code where hyphenation might change the intended meaning of the word. And it can protect your content from unexpected layout issues.
The simplest way to understand it is to see the behavior of the default line break rule. WebKit uses a default line break heuristic that's based on language specific rules while taking into account other CSS that might apply. With Roman-based written languages, the line break heuristic hyphenates the text when it can, but take a look at the first word on this page from the web inspector command line API reference. The long query instances syntax doesn't break at all. It's breaking right before the long word making a blank line after the bullet. Then it still overflows the container and the viewport. Line break anywhere makes it possible to fix this.
With line break anywhere, it breaks T the character just before the overflow making it possible to see all of the content without breaking the layout.
Now it's possible to see the entire line. Next up is another powerful CSS tool, the is pseudo-selector. It's newly supported in Safari 14.
It matches a list of selectors just like the matches pseudo-selector. In fact is aliases our matches pseudo- selector behavior that's been part of Safari for years. The matching element gets the specificity of the most specific selector. It's really useful for avoiding repetitive selectors.
Here's an example. Here a 3em top margin is added to all the headings.
Then this rule removes the top margin when a heading is immediately followed by a heading of the next level down. But, of course, if this is used in a content management system, page authors may not adhere to strict rules of an h1 followed by an h2. They're not technically prevented from using an h1 followed by an h3, so this isn't enough to cover all of those cases.
To do that you'd need a really repetitive selector like this. That's pretty awful looking. But with is we can simplify writing all of that out and it becomes this. That's so much nicer. To go along with is WebKit also supports the where pseudo-selector. It works the same way as is in that it matches a list of selectors, but the big difference is that the CSS specificity of any matching element is always zero. So it can act as a kind of specificity reset. Here's another example. And I'll start by comparing is first. Looking at this example the is selects an intro class, pull quote, or element with the hero ID and styles the paragraph tag that immediately follows it, to use uppercase text and give it an eye-grabbing look. Later in the styles the page author is trying to specifically override the heading levels two through six followed by a paragraph to use normal text. Seems like they only want this to work for paragraphs following level 1 headings.
But using is means that it won't work as expected. This is where the where pseudo-selector comes in. Using where instead makes this possible. Now, the elements matched by where a reset to a specificity level of zero making the follow up rules able to override as expected.
From CSS we move on to media. But included in media is a fair number of image updates as well. And I'm pleased to announce support for an entirely new image format webP images.
WebP is an open source image format that provides smaller file sizes and lots of advance bells and whistles. It supports a lossy format comparable to JPEG and a lossless format like PDG. It even supports transparency and animation across both. In your markup you can use the picture elements to add webP images with a fallback and on the server side you can look at the accept header. But a big reason web developers are excited for this format is the file size savings. This sample JPEG encoded at 80 percent quality is 5.1 megabytes but the webP lossy encoding of the same quality settings gives us a 41 percent file savings with visual quality that's nearly the same as a JPEG. This high resolution PNG weighs in at eight hundred and seventeen kilobytes but the lossless webP encoding preserves the transparency and saves us 33 percent. WebP image support is available in Safari 14 and Safari for iOS 14. While we're talking about images there are a couple of new default image behaviors in WebKit. The first is a change that will improve the way your web pages load. We've all seen what happens when we load a web page where the images load in and cause the layout to jump around.
I'm going to show you how easy it is to fix this with WebKits new behavior for calculating the default image aspect ratio. In Safari 13.1 and in Safari on iOS 13.4, WebKit now calculates the image aspect ratio from an image tags width and height attributes.
All you have to do is make sure to add the width and height attributes to your image tags. Let's see what happens when the attributes are added.
There's no jumping around at all. The space is reserved for the image and it just loads right in. Beautiful. The other new default behavior is for image orientation. We've supported respecting EXIF image orientation on iOS for a long time. This update aligns our support on iOS and macOS through the standard image orientation from image value. The from image value tell Safari to respect the image orientation flag encoded into images that support EXIF data. This JPEG image is encoded with an EXIF orientation flag of 6 meaning the camera was rotated 90 degrees counterclockwise. And now you can override this default by setting image orientation value to none to display the image directly as encoded without rotation correction. From images we move on to video. With system support for high dynamic range videos in web content with Safari 14 on macOS.
You can use media queries to detect high dynamic range display support.
When selected the video is sent to that device. Supporting the remote playback API gives your users the flexibility to enjoy media on all of their devices.
And another way to help users enjoy your media is the picture in picture API.
Adding a picture in picture control to your web player allows users to play videos in a pop-out window while they continue doing other tasks. Like remote playback, WebKit has supported picture in picture for a while but the standards based picture in picture API is now available and it works across iOS, iPadOS and macOS. Similar to using the remote playback API you set up a custom control element and call the video elements request picture in picture method in response to user interaction. That's it. Then your users can enjoy videos in picture in picture mode on their device while doing other tasks. In other news related to video, Safari 14 include support for timed metadata in HLS. It's new in Safari 14. And this is metadata synchronized to the media timestamps in the video stream. It can be used to provide program information like episode details or live sports data like inning boundaries or scores. There are two approaches supported, The HLS EXT daterange tag is available in the data queue and carries the metadata to the HLS media playlists themselves. The advantages of using these tags is their immediacy and scope. All metadata in media playlists is available to the video player as soon as it's loaded. It doesn't require waiting for the specific segment to load or for the playhead to pass over it.
And event message boxes are now available in fragmented MP4s. These are compatible with ID3 storage and other formats like MPEG-2 transport streams to carry the same metadata in a fragmented MP4 containers. This is especially important for codecs like HEVC and Dolby Atmos which Apple platforms only recognize inside fragmented MP4s. The last update is an enhancement for developers of video sites that provide subtitles and captioning.
This is a short but sweet update. It's an enhancement to text track you that allows you to use your own captions format but use native caption rendering.
And be aware that when using the division operator, BigInts will drop any decimal values. That's BinInts available in Safari 14. But WebKit also supports some powerful new operators to help with null and undefined values.
The nullish coalescing operator works like other logical operators but it checks for existence. Let's look at a quick example.
So I have a person class where the constructor takes a first name, last name, and age argument. The nullish coalescing operator is used to check if an argument's value is provided. If it's null or undefined, the result of the right-hand side of the operator is used instead.
Here without any arguments the right-hand side defaults as I like to think of them, are used. But passing boolean values, regardless of what they are, pass the existence check and are set as the properties and the person object.
Here, we add a name property to include both the first and last name. And when a person is registered we want to see the first name. This is how you might typically add some guards to make sure you can access the first name property.
Passing no arguments to the person when calling register gives us an undefined result.
And passing strings for the first name and last name gives us the expected first name, but with optional chaining, we can replace this approach with new syntax that uses the optional chaining operator. And it works in the exact same way. It also works with indexes like checking for the first entry in an array of a person's children. Using optional chaining here avoids the type error and it even works for methods. Trying to call an undeclared method triggers an error but with optional chaining you can avoid the error. So that's optional chaining. Sticking with the operators theme they're even more newly available operators in Safari 14, Logical assignment operators. And they come in three flavors: logical and assignment, logical or assignment, plus a knowledge assignment operator. Logical assignment operators are nice in that they only evaluate the left-hand side expression once and it isn't as destructive in that it doesn't always reassign. Take this example using the nullish coalescing operator where it always reassigns inner HTML. With a knowledge assignment operator, it only destructively assigns inner HTML if it is null or undefined. Switching gears back to objects for a moment, WebKit in Safari 14 include support for public class fields. Public class fields are new syntax to declare member properties that are part of the object, regardless of them being set up in the constructor. Looking at the person example earlier they could be set up like this. Now, children, for example, will still be available when a new person object is created, even though it isn't set in the constructor.
You'd have to iterate over the words in the string or use a global regular expression.
And finally I'm going to share a few exciting platform integration capabilities new this year.
First up is AR quick look on iOS. These are experiences launched from Safari that can be customized with Web technologies. And new with iOS 13.3, these experiences can include a banner for users to buy products.
You can customize individual elements of the banner or provide a completely custom banner with a simple HTML page. To learn more I encourage you to check out the Shop Online with AR Quick Look session in the Developer app.
Another platform technology in Safari updated this year is Apple Pay.
Apple Pay on the web has been updated to add new button types with custom rounded corners and the ability to request redacted billing details.
This is great for merchants that calculate tax based on a customer's location but have no use for the shipping address. To learn more see the What's New in Wallet and Apple Pay session in the Developer app. Finally another experience new this year is app clips. It gives users a focused, fast, and frictionless experience without waiting for downloading and installing an entire app. On your website you can let users know that an app clip interaction is available by adding the Apple iTunes meta tag to your websites HTML and include your App Store ID and the new app clip bundle ID parameter to add a banner to your website. You can learn more about app clips by watching the Explore App Clips session in the Developer app.
That wraps up our platform integration with customizable AR quick look, Apple Pay updates, and the all new app clips experience. And it also wraps up our tour of the new features and improvements of Safari and WebKit.
There's a whole lot new in Safari this year powered by changes in WebKit and I encourage you to try these features out and share your feedback.
It's a separate version of Safari that works right alongside of Safari and it's shipped every two weeks with a sneak peek of new and experimental features as well as new web inspector tools. So as a web developer you can be using the latest developer tools every two weeks. You can also stay informed by keeping tabs on the WebKit website at webkit.org. It features blog posts, safari technology preview, release notes, and a fantastic library of reference guides for using web inspector. You can also follow WebKit on Twitter for new announcements about the WebKit project along with tips and tricks for web inspector.
And check out the links related to this session including Safari Web Extensions.
What's New in Web Inspector and more web technologies. Thanks for joining
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.