Hi, everyone. Good morning. Welcome to Session 600. What's new in Safari and WebKit for Web Developers? I'm Beth Dakin and I'm an engineer on the Safari and WebKit team. So, most of you probably know that WebKit is the engine that powers Safari on all platforms. It's responsible for loading, parsing, interpreting, managing and rendering web content in Safari. But not just Safari, you may not know that WebKit is used for key parts of user interface and many of the core apps on OS X and iOS.

And of course WebKit is used in a ton of apps that are in the App Stores. Many of you are using WebKit for your website's apps and digitals books. So, it's important for you to know about the latest and greatest WebKit changes. You're probably wondering what we've been up to.

Well, WebKit is a thriving open source community where there have been over 3,000 changes since last year's WWDC. So, there is a lot to talk about. We couldn't possibly cover all of these topics in the next hour and the number of these things will be covered in sessions later this week. For this session, we have chosen a subset of these features to talk about that generally fall into three categories.

First, we'll talk about some exciting layout features that are steps towards a future where the web will be able to replicate rich magazine-like designs. Then we'll discuss some new media features that offer enhanced accessibility and better integration with other devices. And finally, I'll tell you about a bunch of smaller enhancements that I think you'll find very handy.

Before we dig in, I want to take a moment to talk about the dash WebKit prefix. This is a technique that we've been using for years to shipped experimental features and production builds as soon as possible. It's really not safe to ship a new feature without a prefix until the specification that it's in has matured and the standards group decides that it's OK. That's often long after we have a useful working implementation so using this technique, these features into your hands today. Since we're talking about new things today, you're going to see this prefix on a lot of my slides.

OK. So, again, we're going to cover new features in WebKit that generally fall into three categories, new layout models, media features and enhancements. My goal is to give you an overview of all the exciting things that are happening in WebKit but this isn't going to be a high level overview session. We're going to dig in to these technologies and you're going to leave here today ready to use them.

So, let's begin with new layout models. OK. I like to cover three topics here today. First, we'll talk about Columns and Pagination. Columns are obviously very fundamental in Print Media Designs so if you want your platform to have rich layout like Print Media then you need to support Columns.

Next, we'll talk about CSS regions. This is a cool new technology that makes it easy to create Advanced Layout templates in CSS for articles. And finally, we'll talk about Flexible Boxes. This is a new CSS layout model that makes it really easy to create layouts that have been popular for ages with many fewer lines of code.

So, we'll begin with Columns and Pagination. Columns aren't actually a brand new feature in Safari. We've been shipping an implementation for a few years, but I want to go over them briefly because we've never talk about them at WWDC before and because I think knowing about them provides some good background information for our new iOS Pagination API.

So, when I talk about Columns I'm referring to CSS multi-column layout defined in the W3C's multi-column layout specification. Having a way to create rich magazine-like designs has been a goal and the browser and web standards communities for years and this came out of some of those earlier efforts. The concept is very simple. The idea is just you can add some CSS to this document with just one line of CSS, you can make this article lay itself out into Columns. There are few reasons why this is compelling.

First as I mentioned earlier Columns are essential to mimic Print Media Design but they really do offer more than just visual interest. It's actually quite difficult to read really, really super duper long lines of text. Your eye tends to get lost. So, breaking text up into narrow or columns can make things easier to read. Of course, most web pages nowadays deal with that problem by having a single relatively narrow column for all of their text and leaving lots of white space on either side or even we're spilling up with adds, but Columns do offer an alternative design there.

So, the syntax is incredibly simple. All I have to do is to start laying out into columns is to set a column width or a column count either of those things, you know, just start laying out into columns. So, there are a bunch of other CSS properties that you can use to style columns further and really control the design. I'm not going to dig into this right now because as I mentioned I really want to focus on brand new features. There's a lot of interesting use in Columns for a paginated layout these days especially on iOS.

Magazine-like layouts and paginated apps are so popular and so effective on iOS that in iOS 7 we've decided to add, some API to UIWebView that lets you do this easily. So, I'll explain at a high level what the API does and then we'll dig in to some code. All right. So, the high level, this is a UIWebView is a really long document and of course this document is long enough that if I were looking at it on a device I have to scroll around to see the whole thing.

So, if we take this really long UIWebView and set pagination parameters on it using the new API, then the document would break itself up into section based on the exact parameters that I've set. So, obviously, this is a very simply design and something that we could easily achieve with CSS. So, let's talk about why you might want to use the API instead of using CSS.

So, this API is for you if you want to paginate your entire UIWebView as a whole and it's also for you if you don't control the content that your app displays. And either of these situations using this API is better than injecting a Style Sheet with some CSS column properties because this way you can avoid fighting with the styles that are in the content that you're paginating. This is sort of just a nice abstraction between the overall layout of our app, something that paginates and the content that is paginating.

OK. So, this is what the new API looks like. First you opt into or out of pagination on UIWebView by setting the pagination mode parameter. This property-- excuse me, this property takes an enumeration as a value. I'm using the value that will paginate the pages from left to right.

There's also a value that will paginate from right to left which you'll probably want to use if you're content is in a right to left language, and there's a top to bottom and bottom to top. Next, I'm setting the page length. The page length corresponds to the size of the page container and the direction the content is flowing. Since I'm using a horizontal mode that means that the page length corresponds to the width of each page.

Next, I'm setting the page gap, it defaults to zero, I'm setting it to 25. And finally, I also want to set the pagination breaking mode. This is another property that takes an enumeration for a value. There are two values, page mode and column mode. If the content that you're paginating happens to use any column related CSS properties like the ones that I enumerated a few slides ago then the value of this property will determine whether those styles are honored or ignored.

So, that's-- this new API. There's also a way to fetch the total page count and note that the API does not cover a special interaction model. So, by default, you'll just be able to scroll from page to page. You may want to add a special interaction model up to you. OK. So, CSS Columns that have been around for a little while, iOS, API to paginate a UIWebView is brand new. Both of these technologies provide a straight forward way to get your content laying out into columns which is really a corner stone of magazine layouts.

OK. Let's talk about CSS Regions. These are defined in the W3C CCS Region specification and they allow you to indicate that some of your markup is defining an overall layout for your design. So, think of that is like a design template. And they also allow you to indicate that a different part of your markup is being used to define the content that you want to flow through that layout. So, think of that is like an article.

So, you'll have one part of your content where you're using block-level container elements such as DIVs, you'll arrange them and whatever overall layout you want. So, maybe you want to call them say, you'll set them up something like this, but you can get a little crazy here. Remember, I promise magazine-like layouts. So, maybe you want to design more like this where the blue block is an image and you have a few different blocks that surround the image and you want your text to flow through them.

Or maybe you want a slight variation on that design either way you have one area of your markup where you're using block containers to create a template for your design. And then you have another area of markup where you're defining your content. This is my article that I want to fit into that layout.

So, if we take this design and I use CSS to indicate that the purple boxes are meant to be regions and I also indicate that my article is the content that is meant to flow through these regions then instead of laying out just in a normal document flow like this, instead of that the article will actually flow through this regions.

So, I don't need to know in advance which bits of text will fit into which box, that's a huge part of what regions are. When one region fills up the content will just continue on in the next. So, this is really cool. I think it makes it really easy to treat your overall layout and sort of a template that you could reuse for other articles.

So, let's look at some code. So, this is what my markup looks like. This is the markup for my article and here's my design template. These are the regions within that design template and here's my image, its interleaves with the regions that's fine, the regions don't need to be contiguous in the document.

Each of the reasons was styled a little differently with different widths and heights and different positioning so I've given them a unique ID so that I can control that bit of styling with the ID. I've also given them a shared class name so that they can share the CSS that actually does turn them into regions.

So, let's take a look at what that looks like. It's just one line of CSS, I've truncated my markup here a little obviously but all I need to do to turn these boxes into regions is top set the flow from property in CSS. So, takes an identifier for a value so this is just a name, it can be any name that you choose.

I've given it a somewhat silly name here, Pizza Manifesto just to emphasize that this is a name of my own choosing. Now, I only have to do is to indicate that the article as the content that we want to flow through the regions and that is also very simple again just one line of CSS flow into property. And note that I've given it the same name that I gave to the flow from property, that's the key that ties this 2 bits together, that's what's says, this is the article that's flowing through this regions.

And that's all that I need to achieve this unique layout right in the browser. So, another really cool thing about regions as it you can style content based on which region that it's flowing through. So, for example I can make whatever content happens to fit into my second region have green text. So, this will apply style to just a fragment of the document. And the CSS for this is quite simple as well, just using the @-webkit-region rule.

And I'm supplying some style. So, our implementation of course is evolving along with this spec right now. We only support styling background color and color for a region styling but the spec does indicate more values should be supported so as things evolve I'm sure that will be picked up. So, I feel like regions really come to life when you actually interact with them. So, I would like to invite my colleague Enrica Casucci on to the stage to show you a bit more about regions.

Hi everyone. My name is Enrica Casucci and I'm an engineer on the Safari WebKit team. So, I prepared for you an interactive region state mode to show you how flexible and powerful CSS regions are. Of course, since the theme of the presentation is about pizza, we will continue along the same lines.

So, what we have here is a fairly simple content because I think it'll make it easier for you to focus on the flow of the content without additional visual distractions. What we have here looks like just like a page that uses columns but these are actually regions. As Beth mentioned before, columns can be considered a sort of very constrained type of regions. But these are regions as I said and they are a lot more powerful.

So, I will start by clicking on this gear icon and we'll see the outline of the three regions we have here. The numbers on each region indicate the order, the content flow into the regions which is actually the order in which the regions appear in the DOM. So, the content flows from its original element into the first region here and when that one fills up, it flows into the second one and it moves over to the third one.

As you can see clearly here at the bottom of the third region, we have more content that we can fit into these three regions. So, let's look at what happens if I click on the Add button and add a fourth region and I'm going to position it here at the bottom. As you can see, the content has flown directly into the fourth region.

So, using CSS regions allows you to create a responsive layout. You have more content, it flows into the next region, very, very simple. To make it even clearer how the content reflows from one region to another, pay attention as I resize the region number one and keep an eye on the MOG and you will see the content reflowing from region one to region two to region three and so on.

So, extremely simple. So, now that we have a feel for what we can do with regions, we'll try to create a nice layout for this page. So, let's start by removing this region and what I really want to do is add a placeholder for an image. So, I'm going to reposition this one here and I'm going to move this one off to the side and I can actually resize the top one to stretch it all the way across the width of our viewport.

And then, I can add an image placeholder where I will later position my image and stretch that over to meet the region number 2. So, what I want here at the bottom is to have like a two columns. So, I'm going to add a fourth region and resize it and position it down here and we'll try to make them roughly the same size.

OK, so that looks sort of OK. Now, we can click on the gear icon and remove the overlays and now we have our new layout very easy. So, the markup and the CSS behind this example is very simple whereas previously, you would have used CSS to position your content directly.

With regions, what you do is position the region containers and tell the content to flow into that. So, you have a very responsive layout. It's very easy to manage and as the size of the viewport changes, all you have to do is reposition your regions and you don't have to worry about repositioning your content because it will flow directly into the regions.

So, the content that appears in region you can interact with it the same way you would interact with content in any other type of element. So, for example, I can select text from the first region and extend my selection and the selection will continue in the order in which the content has flown which is dictated by the order of the regions. So, since you don't have to worry about relaying out your content, you can even do things like increase your text size and the content will reflow automatically. Very, very easy.

So, before I turn it back to Beth, I'd like to show you a page that I've prepared where I view CSS regions to create a magazine quality type of layout. Again, this is about pizza as usual. So, this is my blog about pizza. I'm very passionate about the subject and as you can see, I have a fairly sophisticated layout where I go from one column over to two.

I have images down back to one single column and then over to two, fairly rich layout. But the most amazing thing about this is actually the source HTML that I would like to show you here because this is a very, very simple markup. We have our section here that contains our entire text and the text is simply divided into paragraphs.

All the part that pertains to the actual layout of the article is in this section where we position our regions and images insert other DIVs and we achieve this way, a complete separation between the content and its presentation. I hope I was able to share my excitement for CSS regions and I really can't wait to see what you'll create with them. Thank you. [Applause]

Thank you Enrica. That was really cool. So, hopefully that gives you an idea of how powerful CSS regions are. I think they are awesome. I think they are huge step forward in creating really advanced designs really easily. OK. Let's talk about flexible boxes. Flexible boxes are defined in the W3Cs Flexible Box Layout Module. They are often just called Flexbox and this is a layout model that's more similar to layout models that you often see in Native UI. So, think springs and struts.

So, Flexbox is all about laying out elements inside a container so that they either grow or shrink to fill the available space. And there are set of properties that you can specify on each element to indicate how they should grow and shrink relative to other elements. So, I've been calling Flexbox a new feature in Safari. But those of you who have really been paying attention might know that we have been shipping an implementation since Safari 5.1.

That is true, but that syntax and that implementation is deprecated and there is a new syntax and new implementation new in the new version of Safari. So, if you're using the old stuff, I encourage you to please migrate your code to the new stuff. You should get better performance and of course, that's the version that we will be improving and maintaining going forward. But do note that it's not a simple rename. So, there is-- are some behavior differences. So, definitely, migrate your code but do migrate it carefully.

So, I think that this app is a great example of Flexbox in action. This app should look familiar to you. It's the Mac App Store. And all of the apps in this grid here, this little AppGrid are implemented with Flexbox so that at any window size, this layout looks really nice and clean.

Now, of course from a design perspective, this layout isn't new. Layouts like this have been around for awhile. But actually, achieving a layout like this without Flexbox requires a whole lot of code to sort of manipulate the block layout and inline layout models to like mashing together in a way they don't really want to. It actually gets quite complicated. So, let's analyze this design so that we can discuss why this is difficult without Flexbox.

All right, first of all at the smaller window size, we can clearly see that there are three boxes in each row of the AppGrid. And this hero image at the top is sized to be about the same size as the AppGrid. It's aligned on the left. It's actually a little bit bigger. On the right, it goes up to this right hand column.

All right, at this bigger window size, we can see that now there are four boxes in each row of the AppGrid. Here our image is still sized relatively the same to how it was with the AppGrid before aligned on the left, a little bit bigger, it goes up to the right hand column on the right and then the right-hand column stayed the same size.

And if we go back to that smaller window size and look at a window size that's only slightly bigger, we can clearly see that each box in the AppGrid has grown to fairly available space even though there is not yet enough room to add a fourth box into each row of the grid. So, all of this, it's always filling the available space, reflowing when possible, and doing all of that up until a certain point at which time it's reached some maximum width in any additional space just creates a margin on either side of the window.

So, if you're going to do this without Flexbox, you would probably use CSS float left for most of the boxes in the AppGrid and then you'd have like a whole bunch of JavaScript to compute the width of everything. But that math would actually get quite complicated as it interact with the fact that you're floating things because the exact math depends on whether there are three or four boxes in each row of the grid. It would get very complicated. It would be a whole lot of code, it would probably require more than a few hacks. But Flexbox was invented to solve this problem. This is what Flexbox does. This is its bread and butter.

So, let's look at the code. So, as I mentioned, Flexbox is all about elements growing and shrinking inside of container to fill the available space. So, these are the CSS properties that you want to set on the container itself. So first, you definitely want to set the display property to either flex or inline flex. And now, it will indicate that this is a container that will contain flexing children.

You can also indicate the flex-direction. Here I'm using the row direction. This will cause my elements in this case to layout from left to right horizontally. There is also row reverse for right to left layout. And if you want the vertical layout, instead you would use a column or reverse column for bottom to top layout.

So, those are the two properties that you want to specify on the container. But the flexing magic really happens with the children. So, let's look at properties that you want to specify on the children. So, there are three properties that you can specify there. First, you can specify the flex basis. This is the initial size of the element before any free space is distributed.

So, in this case, since we're laying out in the row direction, that will correspond to the initial width. If we were laying out in the column direction, it would correspond to the initial height. And in fact, in this case, if I didn't specify a basis at all, then the basis would default to be whatever the width was. So, sort of think of it as your size property.

So, in this case, let's say that this container is 600 pixels wide. So, given the basis that I have assigned to my triplets here and the basis I assigned to my big element, once you include their margins, this fits perfectly inside this container right now. There's no growing or shrinking.

When extra space does become available, how the elements change their size will be based on the flex grow property. So, this is used to determine how the elements should grow when there is extra space available. So, it's kind of like a ratio and bigger numbers here mean that the element wants to grow more.

So, in this case, I have specified a grow value of zero from my triplets which means that I don't want them to grow at all and I have specified a value of one from my big element which means that I wanted to share extra space evenly with other growing elements.

But in this example, there are no other growing elements so we'll take all of the space for itself. And when there is not a lot of space to go around and things need to shrink down to fit, how they do that will be determined by the flex shrink value property. So here, this is also of sort of like a ratio, like flex-grow. But with flex-grow bigger numbers mean that the elements want to grow more. Here, bigger numbers mean the elements will shrink more.

So, I've given a shrink value of one to my triplets so they'll shrink evenly and a shrink value of zero to my big element because I don't want it to shrink it all. So, this is a really quick overview of how flexing works in Flexbox. I can also simplify this code using a Shorthand. These values in the Shorthand are ordered grow shrink basis in that order. But before we do move on to Flexbox to other things, I want to mention one more thing that Flexbox is really great for.

So, it's 2013 and CSS has finally provided an easy way to center something. As I'm sure you all know [applause]-- I'm sure you all know it's been shockingly difficult up until now to center something in CSS especially if you want to center it vertically. But Flexbox actually makes that incredibly easy.

So, here in this example, I wanted to center my darker gray box inside the bigger light gray box. So, all I had to do was indicate that the bigger box is a flex container and give my smaller thing that I want to center margin auto and that will truly in all cases actually for real center this box.

So, that's an overview of how Flexbox works. It really just scratches the surface. We could have an entire section about flexible boxes. There is a ton of stuff there. So, I really encourage you to go out and learn more. I mean, even just speaking of centering, there are to Flexbox specific CSS properties that would also allow you to center but can also be used to just have much finer grain control over how things are positioned, aligned items in justified content. There is just a ton of stuff in that spec. It's really great.

So, with these technologies I really feel like WebKits made huge strides towards the future where it will be able to replicate really rich designs. I'm really excited about this stuff. We're definitely still working on all of these things. So, I encourage you to play with them, see if they work for you. File bugs if you find any.

Let's move on to talking about media features. So, we'll cover two topics here today. First, we'll talk about the iOS AirPlay API. And then we'll talk about styling captions. We'll begin with the AirPlay API. So, we've been shipping the HTML5 audio and video elements for a few years now. They have been widely adopted especially for content targeting iOS.

And in sessions at past WWDCs, we've talked extensively about the many things that you can do with these elements including how you can use JavaScript to create custom controls. So here, I'm showing that the default controls on iOS 7. But there are some great examples out there of custom controls like this HTML5 showcase video that's playing inside a really cool sublime video player made by the folks of Jillian [phonetic]. Their video players are really great. They are fully HTML5, fully integrated with iOS, all retina ready.

They're really, really cool. But there is one thing that's been missing from videos with custom controls. If we go back to our default controls, you'll see it, it's the AirPlay button. Up until now, if you chose to create custom controls for your video, you had to miss out on AirPlay. That is until now in iOS 7.

I'm really excited for all of you with videos that have custom controls to adopt this. This is going to be great. So, this is some really simple markup for a video with custom controls. The video element itself is lacking the control's attribute and so that's how you know that we intend to provide customer controls.

And here I have some controls for our Play and Pause button. Custom controls are really powerful. You can have way more than just a Play and Pause button I encourage you to look at past WWDC sessions if you want to learn more about custom controls. But right now, we're just going to focus on AirPlay so we're keeping it simple. And the first step to supporting AirPlay here is to actually add an element for the AirPlay button.

Note that I've hidden it by default because I want my custom AirPlay button to match the behavior of the defaults AirPlay button which means that the button will only show when AirPlay is available. And for that matter, I only want it to show when the AirPlay API is available. So, here's some code that will make it show at the right time.

Here's my feature detection. This will make sure that API is available. And here, I am using some of this new API. This is a new event that you can listen for on the video element. It's called WebKit Playback Target Availability Changed. This will be called whenever AirPlay availability has changed. So, whenever a new Apple TV has come on to the network or when one has left the network.

And it's also guaranteed-- this event is also guaranteed to fire soon after you register for listening for it. So, you don't have to worry. This code will run when you're just setting everything up too. So, this is the function that I want to run whenever this event fires, very straight forward. Whenever AirPlay is available, I want to show and enable that button. And whenever it's not available, I want to hide and disable it.

So, there are some battery power considerations with listening to AirPlay availability. So, you want to be a good battery power citizen on the system. So, you should stop listening for this event when you no longer care about it. So, maybe when the video stopped playing, you can stop listening for the event.

So, that's all we have to do to get our custom AirPlay button showing up. Always at the right time too. But we haven't made it do anything yet. So, here's some code to make it do something. First, I'm starting with my feature detection. Then down here, I'm adding an EventListener for the click event on that button.

And whenever that button is clicked, I'm calling another new piece of API on the video element. This is WebKit Show Playback Target Picker and this will make the native AirPlay, a root picker actually show up. So, that's all we have to do to get our AirPlay root picker to show up.

There is one more part to this API. If we go back to the video of custom controls, you can see that when this video is playing over AirPlay, that AirPlay button is actually styled a little differently. So, this last piece of the API will let you emulate that behavior with your custom controls.

OK, here is the code for that. This is another new event that we can listen for called WebKit Current Playback Target is Wireless Changed. So, this will be-- this event will fire whenever a video has started or stopped playing over AirPlay. And I'm just updating some styles whenever that changes.

OK, so that summarizes the new AirPlay API available on iOS. Let's talk about styling captions. So, providing captions with your video is a great way to widen your audience. Captions are essential for hearing impaired users and they are great for users who don't understand the language that your video is spoken in as well.

WebVTT is a file format for captions defined in the W3Cs WebVTT specification. We added support for WebVTT captions in our last release. And there's another session happening this week that digs into the topic of captions and general including HTML captions. And if you're really interested in this topic, I encourage you to attend that session and learn even more.

So, there are few things that we nearly support with captions in this release. First of all, we'll support WebVTT that's embedded in the movie file itself. In the last release, we only supported captions that were in their own file. And we've support styling captions with the Cue Sudo element. There are a limited set of CSS properties that you can use to style captions. But I think you'll find they still offer a lot of flexibility. And I would like to invite Enrica back to show you how to style the captions. [Applause]

Thank you Beth. OK, here I have a video for you that I'm going to play.

Many of you probably do not understand what I'm saying since I'm speaking Italian. So, for this reason, I'm going to turn on the captions here so that you can follow the lesson on the croissant making. Oops-- yes. [laughs] OK. This video actually has support for multiple languages. In fact, I can click on the caption button and switch the text to French and I also have captions in Italian. The system will remember the language that I choose here as my preferred language. So, that next time, I play a video that has caption will try to provide caption in that language if they're available.

So, I would like to show you how easy it is to add captions in another language. My friend Anders [phonetic] has kindly provided me with a text in Swedish for this video. So, we're going to add Swedish to this video here. So, let me bring up the source for this page.

In here we have the video element that contains currently a three track elements one for each of the languages that we currently support. If I want to add another one all I have to do is add another track element have the source attribute point to the VTT file that contains a text in that language and the source length attribute indicate what language that is. So, I'm going to save this one and reload my page and we can play the video. And now, we'll have captions in Swedish as well. Extremely simple.

As Beth mentioned in order to have captions that we need to embed them in the video stream. And what we have to do is author a VTT file. Authoring captions can be a fairly a time consuming task but the format of the file for VTT is very simple and intuitive.

In fact, the VTT file is a plain text file that you can author with your favorite text editor and its format is very simple. Each entry of the VTT file is one corresponds to one line of the caption and for each one-- you specify, the start time and the end time. Extremely easy.

With the new version of Safari, we have added the ability to style the captions. In order to do that we can use styles we added to our CSS to style the Cue Sudo element. So, let's go back to our source here and add a rule for the cue. We want to change the color of the text to be yellow. We want to use a different font and a larger one, and we want to add a shadow to the text.

So, once we have done this. We save, and we reload our page, and we start playing. And now, the caption have a different look and feel, extremely simple but this is not all. You can also style separately individual elements of the captions by defining rules that you applied directly to the VTT file. So, let's imagine we want to emphasize. For example, some words in our caption stream. So, what I'm going to do, I'm going to add an emphasis rule where the text is going to be shown with the color red.

And then, I'll go back to my VTT file. And what I want to do is highlight for example the word dough sheeter [phonetic] here. So, here is what I'm going to do. I'll add the rule right to the VTT file. I will now save it and reload our movie and when I start playing it the word should show up in the second caption and it should be red. Very easy. [Applause] So, this is all for our demo. I'll give it back to Beth to continue the rest of our session.

That was awesome. Isn't that video mesmerizing? I could watch it all day. OK. So, those are two cool new media features that we've added to WebKit this year for a better integration with the iOS platform and AairPlay devices. And for an improved accessibility experience. OK. So, we've added a bunch of other things to WebKit this year that are smaller little enhancements.

I think that these things will be great tools that you can add to your toolbox. So, we'll cover some enhancements in four categories here. First, we'll talk about some font enhancements. We'll talk about a few smaller CSS things. We'll talk about graphics. And finally, I want to tell you about a few changes that might affect you. So, will start with fonts.

So, one of the many exciting new aspects to the new iOS 7 look and feel is the beautiful extremely readable dynamic type which comes in all of this different variants depending on what you're using the text for. And of course there's a system wide setting where the user can control what size of the font is comfortable to them and that will be reflected in all of the apps that are using dynamic type.

Well, I'm delighted to tell you that you can opt into using dynamic type in WebKit on iOS. So, that you're app and or your websites can reflect all of those settings that the user has selected and it will really mix in with the look and feel of iOS 7.

So, we've added a bunch of new values to the CSS Font Property. They can reflect all of these different types of-- all of these different variants of the dynamic type. And so here I'm showing them in the larger font size but if the user selects the medium size or small size, the WebView will honor that setting and it will update dynamically whenever the user changes the setting. So, this is a nice little way to integrate with iOS 7, if that's a goal for your content.

So, if you had a chance to browse the web with Safari 7 yet, you may have noticed the text on websites looks more beautiful and more readable than ever before and that's because we've enabled kerning and ligatures by default. So, you don't have to do anything to opt into this. This is on automatically for all websites.

If you're not familiar with these technologies, these are two different technologies that make text more readable by adjusting the amount of space between characters. So, kerning will actually programmatically adjust the amount of space between glyphs. So, here's a series of glyphs with no kerning and this is what the same text that looks like with kerning applied. You can see that glyphs are much closer together. It's much easier to tell that they're meant to be a part of the same admittedly made up word.

Ligatures on the other hand are actually specially glyphs in the font itself that combine two or more characters into a single glyph. So, FI is a classic example here on the left to have F and I as two separate glyphs and on the right is a glyph for a ligature that combines F and I.

That's a really common ligature if a font contains any ligatures at all. It usually contains one for FI, but some fonts contain lots of other ligatures too lobster is a great example of a font with lots of interesting ligatures. If you look at the FIX and fixing-- oh, and the top row there has no kerning and no ligatures.

Bottom row has both. So, we can see the FIX and fixing the transition between those letters and the bottom row is just so much smoother, it's using that ligature instead and the EX an example is another great example or the transition between those letters is just so much smoother using the ligature, so much less jarring.

So, over the most part we think that this change is going to be a huge win for you and your content. Everything should just look more beautiful but as you can see on these slides sometimes when kerning and ligatures are enabled, text will take up less space. So, if you were expecting your text in your app or your website to be some exact size it may be different now that kerning and ligatures are on by default. And if that's a problem for you that you want to fix as soon as possible, you can disable them using the WebKit Font-Kerning CSS Property and the WebKit Font-Variant-Ligature CSS Property.

So, those are two nice little font enhancements. I think both are huge when it is for readability. Let's talk about some new CSS things. So, Safari 7 now supports the CSS Calc Function from the CSS-- the W3C CSS Values and Units specification. So, this is an incredibly useful new feature and we know that web developers have been clamoring for it for years. This will allow you to define any numerical CSS value in terms of a mathematical equation. So, you can use addition, subtraction, multiplication, division, and you can even mix units like I'm doing here or I'm setting something to be 100 percent minus 80 pixels.

Our clients at Apple have already started using this and they've come back to us just so excited about how much calc has simplified their lives that's-- let people get rid of lots of complicated JavaScripts that had to run on resize much easier code to follow and they've been telling us they're getting better performance out of it as well.

Another cool new CSS Property's WebKit Clip-Path from the W3C CSS Masking Module. It allows you to clip an element to a path. So, for example, in my Pizza Manifesto I could clip that image to a shape. The syntax is really simple. It takes a shape as a parameter defined in the CSS Shapes Module. The first two numbers here are the X and Y coordinates for the origin of the circle and the third number is the radius. And there are few other shapes that we support right now, rectangle, ellipse and polygon.

OK. So, those are two cool new CSS features. There are so many more I wish that I had time to tell you about. One of my personal favorite CSS enhancements that's not in this slides is that they've added a new value for the position property called WebKit Sticky. It's really, really cool and super useful. My colleague Simon Fraser will be covering it tomorrow in his session about power and performance in Safari. So, I strongly encourage you to go to that session and learn about sticky position.

All right. Let's talk about graphics. So, we've also added a few new JavaScript API's for the HTML Canvas Element that I'd like to tell you about. We now support name blending modes for compositing colors. So, if one really simple line of JavaScript, I can composite these colors. I just want to set the global composite operation to a named mode. Here I'm using multiply, there are number of other name mode as well.

Another super cool new canvas API is the path object. So, this is a great new API that will let you store paths as variables up until now if you were creating paths and canvas you could only have one at a time. If you wanted to create a new path then you would lose your old one entirely.

So, this is a really trivial example or I'm just creating two paths upfront and drawing them later. Another great part of this API is that they're-- is going to really simply hit testing with the path object you can just ask it, is point in path that's a function, that's prior to API to hit jus that path up until now, if you wanted to do hit testing which I'm sure a lot of you are doing for your canvas games and your canvas interactive widgets. You'd have to actually rebuild every path that might be hit. And then see if the point was in that path, throw it away, rebuild your next path. It's just a whole bunch of code. I anticipate this, simplifying a lot of things.

OK. I also want to take a moment to talk about canvas on retina, if you were at WWDC last year, then you may have seen a session that we gave all about higher resolution web content creating web content for high resolution displays. In that session we talked a lot about canvas and that's because if you want to have a beautiful sharp canvas on a retina display. You actually need to give that canvas a backing store that is what we call doubled. So, twice the width, twice the height actually four times the number of pixels.

So, if you want a beautiful sharp canvas on a retina device. You need what we call a 2X backing store. So, if you were here last year you also would have learned that Safari 6 was going to auto double to ensure this. This means that we are automatically creating a backing store with twice the width and twice the height that you are asking for when it was rendering on a retina display. We also told you that iOS would not auto double because there are more memory constraints on that platform, it might be a problem that we were automatically requesting so much more space.

Well, people got confused and sad and that was definitely not our goal. Our goal is to have beautiful canvases, canvi [phonetic] on retina displays for all of you. And so, we've decided in Safari 7 that we will no longer auto double. So, Safari 7 will match what iOS is been doing all along and no auto doubling will happen will give you a backing store of exactly the size that you request.

The good news is that if you followed our instructions last year about how to create a canvas that would be the right size on a none retina display and on a retina display that advice all still totally works and still will do the right thing on all platforms. So, I still encourage you to look at that session if you want to know how to create a high resolution canvas element.

OK. So, that covers graphics enhancements, I think there is some new API's that will be super useful for those of you using canvas and I think that hopefully we've cleared up some confusion by getting rid of the auto doubling that you were doing on OS X. OK. So, we at Apple and we in the WebKit Open Source Project consider compatibility to be among the most important of our goals.

So, we never want to intentionally introduce that compatibility problem but sometimes to make a cake, you have to break a few eggs. So, here's a summary of changes that we made for good reasons that we think will be awesome for your most of the time but they do run the risk of running into some problems for you.

So, we've covered the first couple of this already. First is that canvas no longer auto doubles on the Mac, if you did not follow our advice from last year and you're depending on Safari to automatically create a bigger backing store for you, then you might have some blurry canvi on retina these days. Another thing to make note of is that kerning and ligatures are on by default. Again, we've talked about this, so now text might take up less space than it used to. So, just something to be on the lookout for if you were depending on a specific size.

Another change that we made is that the CSS background shorthand will now overwrite earlier settings. So, this is a change that we made to match the specification and it was a change that was added to the spec because the CSS Community really wanted it. So, this is again something that we think you'll really like.

So, it solving this problem where people wanted at some later point in their cascade to be able to say background none and to have it reset all background values. But it didn't actually do that. This background size would not have been reset in prior versions of Safari. Now, it will be. So, that's the great news.

If you were writing code like this though, you may have expected that background size to be honored, but it won't be honored anymore. So, that's a little bit of a gotcha to be on the lookout for here, but for the most part we think that you're going to really like this. This is something that a lot of people wanted. I'm delighted to tell you that we've unprefixed transition as we call it. The transition specification has reached a level of maturity that we can ship a version of transition without the WebKit prefix.

So, I think this is-- again, another thing that it's going to be great for you. It should simplify some of your CSS. The only gotcha here is that there is some code, out in the wild that assumes that if transition is on prefix then CSS animation is also on prefix which is not a safe assumption and it's not the case in Safari 7. So, that's just a little something to be on the lookout for. OK. So, that covers the enhancements that we have time for today. There are so many other things that I wish that I had time to tell you about.

But there are many other sessions this week that will cover a lot of them. So, there are three things that I would like you to leave here today with. First, rich magazine-like layouts are coming to the web, this is something that it's very important to us something that we're working on a lot.

We're always looking to have better integration with our platform and our devices. I think that the AirPlay API and our support for dynamic type are two great examples of that. And finally, there's tons of new stuff in WebKit all the time. There's so many things-- we talked about so many things or so many more things I wish we had time for, if you're interested in keeping up with our activity and WebKit, we've actually been doing a pretty good job lately of summarizing the most exciting changes each week on our blog webkit.org/blog. I encourage you to check it out. If you have more questions there are a lot of resources available to you. And I mentioned several times many other sessions this week.

Right after this session, in a different room, there are going to be two fantastic sessions about the improvements that we've made to our developer tools this year. I really encourage you to go to them up in Russian Hill tomorrow morning on the session about power and performance. I referenced this earlier or you'll learn about position Sticky in this session and lots of other really great tips and tricks for having a really fast responsive website.

If you want to learn more about captions there's the session about preparing and presenting media for accessibility. And on Friday, we have two more great sessions you can learn all about how to make push notifications for your websites which was shown in the keynote yesterday and you can learn all about our new objectives, see JavaScript API. That's it. Thank you all for coming. Thank you for listening. [Applause]