600.srt

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:00.506 --> 00:00:13.156 A:middle
[ Silence ]

00:00:13.656 --> 00:00:14.776 A:middle
>> Hi, everyone.

00:00:14.776 --> 00:00:15.606 A:middle
Good morning.

00:00:16.036 --> 00:00:17.636 A:middle
Welcome to Session 600.

00:00:17.746 --> 00:00:20.436 A:middle
What's new in Safari and
WebKit for Web Developers?

00:00:20.826 --> 00:00:22.566 A:middle
I'm Beth Dakin and
I'm an engineer

00:00:22.566 --> 00:00:24.106 A:middle
on the Safari and WebKit team.

00:00:24.836 --> 00:00:28.736 A:middle
So, most of you probably know
that WebKit is the engine

00:00:28.736 --> 00:00:30.956 A:middle
that powers Safari
on all platforms.

00:00:31.376 --> 00:00:35.796 A:middle
It's responsible for loading,
parsing, interpreting, managing

00:00:35.796 --> 00:00:39.086 A:middle
and rendering web
content in Safari.

00:00:39.256 --> 00:00:43.216 A:middle
But not just Safari, you may
not know that WebKit is used

00:00:43.216 --> 00:00:45.566 A:middle
for key parts of user
interface and many

00:00:45.566 --> 00:00:47.736 A:middle
of the core apps
on OS X and iOS.

00:00:49.096 --> 00:00:51.546 A:middle
And of course WebKit is
used in a ton of apps

00:00:51.856 --> 00:00:52.936 A:middle
that are in the App Stores.

00:00:53.236 --> 00:00:54.986 A:middle
Many of you are using WebKit

00:00:54.986 --> 00:00:57.266 A:middle
for your website's apps
and digitals books.

00:00:57.706 --> 00:00:59.616 A:middle
So, it's important for you
to know about the latest

00:00:59.616 --> 00:01:01.066 A:middle
and greatest WebKit changes.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:59.616 --> 00:01:01.066 A:middle
and greatest WebKit changes.

00:01:01.656 --> 00:01:06.116 A:middle
You're probably wondering
what we've been up to.

00:01:06.346 --> 00:01:08.756 A:middle
Well, WebKit is a thriving
open source community

00:01:08.756 --> 00:01:12.856 A:middle
where there have been over 3,000
changes since last year's WWDC.

00:01:13.026 --> 00:01:14.606 A:middle
So, there is a lot
to talk about.

00:01:15.056 --> 00:01:18.156 A:middle
We couldn't possibly cover all
of these topics in the next hour

00:01:18.156 --> 00:01:19.826 A:middle
and the number of these
things will be covered

00:01:19.826 --> 00:01:21.746 A:middle
in sessions later this week.

00:01:21.746 --> 00:01:24.766 A:middle
For this session, we have chosen
a subset of these features

00:01:24.766 --> 00:01:27.986 A:middle
to talk about that generally
fall into three categories.

00:01:28.786 --> 00:01:32.046 A:middle
First, we'll talk about some
exciting layout features

00:01:32.196 --> 00:01:34.706 A:middle
that are steps towards a future
where the web will be able

00:01:34.706 --> 00:01:37.316 A:middle
to replicate rich
magazine-like designs.

00:01:38.756 --> 00:01:40.746 A:middle
Then we'll discuss
some new media features

00:01:41.046 --> 00:01:42.886 A:middle
that offer enhanced
accessibility

00:01:43.076 --> 00:01:45.196 A:middle
and better integration
with other devices.

00:01:46.366 --> 00:01:49.436 A:middle
And finally, I'll tell you about
a bunch of smaller enhancements

00:01:49.496 --> 00:01:51.136 A:middle
that I think you'll
find very handy.

00:01:52.456 --> 00:01:55.166 A:middle
Before we dig in, I want
to take a moment to talk

00:01:55.166 --> 00:01:56.996 A:middle
about the dash WebKit prefix.

00:01:57.396 --> 00:01:59.786 A:middle
This is a technique that
we've been using for years

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:02:00.036 --> 00:02:01.716 A:middle
to shipped experimental features

00:02:01.716 --> 00:02:04.026 A:middle
and production builds
as soon as possible.

00:02:04.766 --> 00:02:08.626 A:middle
It's really not safe to ship
a new feature without a prefix

00:02:08.886 --> 00:02:11.386 A:middle
until the specification
that it's in has matured

00:02:11.526 --> 00:02:14.116 A:middle
and the standards group
decides that it's OK.

00:02:14.556 --> 00:02:17.966 A:middle
That's often long after we have
a useful working implementation

00:02:18.206 --> 00:02:21.936 A:middle
so using this technique, these
features into your hands today.

00:02:22.676 --> 00:02:24.746 A:middle
Since we're talking about new
things today, you're going

00:02:24.746 --> 00:02:27.216 A:middle
to see this prefix on
a lot of my slides.

00:02:27.896 --> 00:02:31.696 A:middle
OK. So, again, we're going to
cover new features in WebKit

00:02:31.956 --> 00:02:35.226 A:middle
that generally fall into three
categories, new layout models,

00:02:35.486 --> 00:02:37.556 A:middle
media features and enhancements.

00:02:37.616 --> 00:02:39.326 A:middle
My goal is to give
you an overview

00:02:39.326 --> 00:02:42.376 A:middle
of all the exciting things
that are happening in WebKit

00:02:42.376 --> 00:02:44.546 A:middle
but this isn't going to be a
high level overview session.

00:02:44.546 --> 00:02:47.076 A:middle
We're going to dig in to these
technologies and you're going

00:02:47.076 --> 00:02:48.946 A:middle
to leave here today
ready to use them.

00:02:49.496 --> 00:02:52.136 A:middle
So, let's begin with
new layout models.

00:02:52.136 --> 00:02:56.306 A:middle
OK. I like to cover
three topics here today.

00:02:56.876 --> 00:02:59.576 A:middle
First, we'll talk about
Columns and Pagination.

00:02:59.786 --> 00:03:01.736 A:middle
Columns are obviously
very fundamental

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:02:59.786 --> 00:03:01.736 A:middle
Columns are obviously
very fundamental

00:03:01.736 --> 00:03:04.286 A:middle
in Print Media Designs so
if you want your platform

00:03:04.536 --> 00:03:07.016 A:middle
to have rich layout like
Print Media then you need

00:03:07.016 --> 00:03:08.096 A:middle
to support Columns.

00:03:08.886 --> 00:03:11.356 A:middle
Next, we'll talk
about CSS regions.

00:03:11.726 --> 00:03:14.766 A:middle
This is a cool new
technology that makes it easy

00:03:14.766 --> 00:03:18.016 A:middle
to create Advanced Layout
templates in CSS for articles.

00:03:19.096 --> 00:03:21.416 A:middle
And finally, we'll talk
about Flexible Boxes.

00:03:21.766 --> 00:03:25.466 A:middle
This is a new CSS layout model
that makes it really easy

00:03:25.466 --> 00:03:27.786 A:middle
to create layouts that
have been popular for ages

00:03:27.976 --> 00:03:30.136 A:middle
with many fewer lines of code.

00:03:30.756 --> 00:03:33.116 A:middle
So, we'll begin with
Columns and Pagination.

00:03:33.906 --> 00:03:37.196 A:middle
Columns aren't actually a
brand new feature in Safari.

00:03:37.196 --> 00:03:39.496 A:middle
We've been shipping an
implementation for a few years,

00:03:39.846 --> 00:03:43.136 A:middle
but I want to go over them
briefly because we've never talk

00:03:43.136 --> 00:03:46.376 A:middle
about them at WWDC before
and because I think knowing

00:03:46.376 --> 00:03:49.086 A:middle
about them provides some
good background information

00:03:49.086 --> 00:03:51.136 A:middle
for our new iOS Pagination API.

00:03:52.636 --> 00:03:55.196 A:middle
So, when I talk about
Columns I'm referring

00:03:55.196 --> 00:03:58.346 A:middle
to CSS multi-column
layout defined

00:03:58.346 --> 00:04:01.226 A:middle
in the W3C's multi-column
layout specification.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:03:58.346 --> 00:04:01.226 A:middle
in the W3C's multi-column
layout specification.

00:04:01.926 --> 00:04:05.586 A:middle
Having a way to create rich
magazine-like designs has been a

00:04:05.586 --> 00:04:09.356 A:middle
goal and the browser and web
standards communities for years

00:04:09.356 --> 00:04:11.886 A:middle
and this came out of some
of those earlier efforts.

00:04:12.366 --> 00:04:13.916 A:middle
The concept is very simple.

00:04:14.236 --> 00:04:17.565 A:middle
The idea is just you can add
some CSS to this document

00:04:17.565 --> 00:04:18.435 A:middle
with just one line of CSS,

00:04:18.435 --> 00:04:22.055 A:middle
you can make this article
lay itself out into Columns.

00:04:22.636 --> 00:04:24.756 A:middle
There are few reasons
why this is compelling.

00:04:25.586 --> 00:04:28.766 A:middle
First as I mentioned
earlier Columns are essential

00:04:28.766 --> 00:04:31.936 A:middle
to mimic Print Media Design
but they really do offer more

00:04:31.936 --> 00:04:33.286 A:middle
than just visual interest.

00:04:33.646 --> 00:04:35.826 A:middle
It's actually quite
difficult to read really,

00:04:35.826 --> 00:04:37.756 A:middle
really super duper
long lines of text.

00:04:37.756 --> 00:04:39.326 A:middle
Your eye tends to get lost.

00:04:39.576 --> 00:04:41.616 A:middle
So, breaking text up into narrow

00:04:41.616 --> 00:04:43.786 A:middle
or columns can make
things easier to read.

00:04:44.046 --> 00:04:46.956 A:middle
Of course, most web pages
nowadays deal with that problem

00:04:46.956 --> 00:04:50.506 A:middle
by having a single relatively
narrow column for all

00:04:50.506 --> 00:04:53.016 A:middle
of their text and leaving lots
of white space on either side

00:04:53.016 --> 00:04:54.826 A:middle
or even we're spilling
up with adds,

00:04:55.116 --> 00:04:58.946 A:middle
but Columns do offer an
alternative design there.

00:04:59.316 --> 00:05:01.276 A:middle
So, the syntax is
incredibly simple.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:04:59.316 --> 00:05:01.276 A:middle
So, the syntax is
incredibly simple.

00:05:01.276 --> 00:05:03.906 A:middle
All I have to do is to start
laying out into columns is

00:05:03.906 --> 00:05:06.986 A:middle
to set a column width
or a column count either

00:05:06.986 --> 00:05:09.696 A:middle
of those things, you know, just
start laying out into columns.

00:05:10.636 --> 00:05:13.386 A:middle
So, there are a bunch of other
CSS properties that you can use

00:05:13.386 --> 00:05:16.336 A:middle
to style columns further and
really control the design.

00:05:16.636 --> 00:05:18.356 A:middle
I'm not going to dig
into this right now

00:05:18.586 --> 00:05:20.266 A:middle
because as I mentioned
I really want to focus

00:05:20.266 --> 00:05:21.596 A:middle
on brand new features.

00:05:22.106 --> 00:05:24.076 A:middle
There's a lot of
interesting use in Columns

00:05:24.336 --> 00:05:28.316 A:middle
for a paginated layout these
days especially on iOS.

00:05:28.566 --> 00:05:31.846 A:middle
Magazine-like layouts and
paginated apps are so popular

00:05:31.846 --> 00:05:36.076 A:middle
and so effective on iOS that
in iOS 7 we've decided to add,

00:05:36.076 --> 00:05:39.546 A:middle
some API to UIWebView that
lets you do this easily.

00:05:39.806 --> 00:05:42.106 A:middle
So, I'll explain at a high
level what the API does

00:05:42.446 --> 00:05:44.126 A:middle
and then we'll dig
in to some code.

00:05:44.966 --> 00:05:45.476 A:middle
All right.

00:05:45.506 --> 00:05:48.336 A:middle
So, the high level, this is
a UIWebView is a really long

00:05:48.336 --> 00:05:51.276 A:middle
document and of course this
document is long enough

00:05:51.456 --> 00:05:54.496 A:middle
that if I were looking at it
on a device I have to scroll

00:05:54.496 --> 00:05:55.756 A:middle
around to see the whole thing.

00:05:57.896 --> 00:06:00.686 A:middle
So, if we take this
really long UIWebView

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:05:57.896 --> 00:06:00.686 A:middle
So, if we take this
really long UIWebView

00:06:00.686 --> 00:06:03.486 A:middle
and set pagination parameters
on it using the new API,

00:06:04.166 --> 00:06:07.406 A:middle
then the document would break
itself up into section based

00:06:07.406 --> 00:06:08.916 A:middle
on the exact parameters
that I've set.

00:06:09.436 --> 00:06:12.126 A:middle
So, obviously, this is a very
simply design and something

00:06:12.126 --> 00:06:14.076 A:middle
that we could easily
achieve with CSS.

00:06:14.686 --> 00:06:16.226 A:middle
So, let's talk about
why you might want

00:06:16.226 --> 00:06:19.206 A:middle
to use the API instead
of using CSS.

00:06:21.136 --> 00:06:23.356 A:middle
So, this API is for
you if you want

00:06:23.356 --> 00:06:25.626 A:middle
to paginate your entire
UIWebView as a whole

00:06:25.886 --> 00:06:28.666 A:middle
and it's also for you if you
don't control the content

00:06:28.666 --> 00:06:29.986 A:middle
that your app displays.

00:06:30.346 --> 00:06:34.326 A:middle
And either of these situations
using this API is better

00:06:34.326 --> 00:06:37.596 A:middle
than injecting a Style Sheet
with some CSS column properties

00:06:37.596 --> 00:06:39.696 A:middle
because this way you can
avoid fighting with the styles

00:06:39.696 --> 00:06:41.966 A:middle
that are in the content
that you're paginating.

00:06:42.186 --> 00:06:43.906 A:middle
This is sort of just
a nice abstraction

00:06:43.906 --> 00:06:46.106 A:middle
between the overall
layout of our app,

00:06:46.106 --> 00:06:48.716 A:middle
something that paginates and
the content that is paginating.

00:06:49.486 --> 00:06:52.366 A:middle
OK. So, this is what
the new API looks like.

00:06:53.286 --> 00:06:56.416 A:middle
First you opt into or out
of pagination on UIWebView

00:06:56.646 --> 00:06:58.876 A:middle
by setting the pagination
mode parameter.

00:06:59.206 --> 00:07:01.026 A:middle
This property-- excuse me,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:06:59.206 --> 00:07:01.026 A:middle
This property-- excuse me,

00:07:01.646 --> 00:07:04.506 A:middle
this property takes an
enumeration as a value.

00:07:04.836 --> 00:07:07.306 A:middle
I'm using the value that
will paginate the pages

00:07:07.306 --> 00:07:08.386 A:middle
from left to right.

00:07:08.976 --> 00:07:11.766 A:middle
There's also a value that will
paginate from right to left

00:07:11.766 --> 00:07:13.846 A:middle
which you'll probably want
to use if you're content is

00:07:13.846 --> 00:07:16.186 A:middle
in a right to left
language, and there's a top

00:07:16.186 --> 00:07:18.686 A:middle
to bottom and bottom to top.

00:07:18.866 --> 00:07:20.526 A:middle
Next, I'm setting
the page length.

00:07:20.956 --> 00:07:24.536 A:middle
The page length corresponds to
the size of the page container

00:07:24.536 --> 00:07:26.626 A:middle
and the direction the
content is flowing.

00:07:26.956 --> 00:07:29.656 A:middle
Since I'm using a
horizontal mode that means

00:07:29.656 --> 00:07:33.226 A:middle
that the page length corresponds
to the width of each page.

00:07:34.126 --> 00:07:35.866 A:middle
Next, I'm setting the page gap,

00:07:36.386 --> 00:07:39.266 A:middle
it defaults to zero,
I'm setting it to 25.

00:07:40.366 --> 00:07:44.026 A:middle
And finally, I also want to set
the pagination breaking mode.

00:07:44.026 --> 00:07:45.176 A:middle
This is another property

00:07:45.176 --> 00:07:47.556 A:middle
that takes an enumeration
for a value.

00:07:47.756 --> 00:07:50.346 A:middle
There are two values,
page mode and column mode.

00:07:50.616 --> 00:07:52.686 A:middle
If the content that
you're paginating happens

00:07:52.746 --> 00:07:56.076 A:middle
to use any column related
CSS properties like the ones

00:07:56.076 --> 00:07:59.066 A:middle
that I enumerated a few
slides ago then the value

00:07:59.066 --> 00:08:03.686 A:middle
of this property will determine
whether those styles are honored

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:07:59.066 --> 00:08:03.686 A:middle
of this property will determine
whether those styles are honored

00:08:03.686 --> 00:08:04.506 A:middle
or ignored.

00:08:05.096 --> 00:08:08.156 A:middle
So, that's-- this new API.

00:08:08.396 --> 00:08:11.926 A:middle
There's also a way to fetch
the total page count and note

00:08:11.926 --> 00:08:15.146 A:middle
that the API does not cover
a special interaction model.

00:08:15.446 --> 00:08:17.646 A:middle
So, by default, you'll
just be able

00:08:17.646 --> 00:08:18.926 A:middle
to scroll from page to page.

00:08:18.926 --> 00:08:22.076 A:middle
You may want to add a special
interaction model up to you.

00:08:23.166 --> 00:08:27.296 A:middle
OK. So, CSS Columns that have
been around for a little while,

00:08:27.756 --> 00:08:31.046 A:middle
iOS, API to paginate a
UIWebView is brand new.

00:08:31.356 --> 00:08:34.436 A:middle
Both of these technologies
provide a straight forward way

00:08:34.436 --> 00:08:36.866 A:middle
to get your content
laying out into columns

00:08:37.196 --> 00:08:40.046 A:middle
which is really a corner
stone of magazine layouts.

00:08:40.706 --> 00:08:43.015 A:middle
OK. Let's talk about
CSS Regions.

00:08:43.395 --> 00:08:47.186 A:middle
These are defined in the
W3C CCS Region specification

00:08:47.516 --> 00:08:50.096 A:middle
and they allow you
to indicate that some

00:08:50.096 --> 00:08:53.466 A:middle
of your markup is defining an
overall layout for your design.

00:08:53.466 --> 00:08:55.456 A:middle
So, think of that is
like a design template.

00:08:55.816 --> 00:08:58.046 A:middle
And they also allow you to
indicate that a different part

00:08:58.046 --> 00:09:01.556 A:middle
of your markup is being used to
define the content that you want

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:08:58.046 --> 00:09:01.556 A:middle
of your markup is being used to
define the content that you want

00:09:01.556 --> 00:09:02.776 A:middle
to flow through that layout.

00:09:02.776 --> 00:09:04.326 A:middle
So, think of that
is like an article.

00:09:05.496 --> 00:09:07.766 A:middle
So, you'll have one
part of your content

00:09:07.876 --> 00:09:11.336 A:middle
where you're using block-level
container elements such as DIVs,

00:09:11.806 --> 00:09:14.756 A:middle
you'll arrange them and whatever
overall layout you want.

00:09:14.756 --> 00:09:16.496 A:middle
So, maybe you want to call
them say, you'll set them

00:09:16.496 --> 00:09:19.556 A:middle
up something like this, but you
can get a little crazy here.

00:09:19.556 --> 00:09:21.926 A:middle
Remember, I promise
magazine-like layouts.

00:09:22.056 --> 00:09:24.416 A:middle
So, maybe you want to
design more like this

00:09:24.416 --> 00:09:26.146 A:middle
where the blue block is an image

00:09:26.376 --> 00:09:28.546 A:middle
and you have a few different
blocks that surround the image

00:09:28.546 --> 00:09:30.386 A:middle
and you want your text
to flow through them.

00:09:30.976 --> 00:09:32.506 A:middle
Or maybe you want
a slight variation

00:09:32.506 --> 00:09:35.516 A:middle
on that design either way you
have one area of your markup

00:09:35.516 --> 00:09:37.256 A:middle
where you're using
block containers

00:09:37.256 --> 00:09:39.196 A:middle
to create a template
for your design.

00:09:40.046 --> 00:09:42.306 A:middle
And then you have
another area of markup

00:09:42.306 --> 00:09:43.646 A:middle
where you're defining
your content.

00:09:43.916 --> 00:09:46.706 A:middle
This is my article that I
want to fit into that layout.

00:09:47.916 --> 00:09:51.386 A:middle
So, if we take this design
and I use CSS to indicate

00:09:51.386 --> 00:09:53.936 A:middle
that the purple boxes
are meant to be regions

00:09:54.356 --> 00:09:57.376 A:middle
and I also indicate that
my article is the content

00:09:57.606 --> 00:10:00.286 A:middle
that is meant to flow through
these regions then instead

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:09:57.606 --> 00:10:00.286 A:middle
that is meant to flow through
these regions then instead

00:10:00.286 --> 00:10:03.516 A:middle
of laying out just in a normal
document flow like this,

00:10:04.166 --> 00:10:06.496 A:middle
instead of that the
article will actually flow

00:10:06.496 --> 00:10:07.466 A:middle
through this regions.

00:10:07.826 --> 00:10:09.766 A:middle
So, I don't need to know
in advance which bits

00:10:09.766 --> 00:10:12.176 A:middle
of text will fit into which box,

00:10:12.176 --> 00:10:14.336 A:middle
that's a huge part
of what regions are.

00:10:14.336 --> 00:10:15.366 A:middle
When one region fills

00:10:15.366 --> 00:10:18.466 A:middle
up the content will just
continue on in the next.

00:10:18.846 --> 00:10:20.026 A:middle
So, this is really cool.

00:10:20.126 --> 00:10:23.686 A:middle
I think it makes it really easy
to treat your overall layout

00:10:23.686 --> 00:10:26.486 A:middle
and sort of a template that you
could reuse for other articles.

00:10:26.796 --> 00:10:28.286 A:middle
So, let's look at some code.

00:10:28.286 --> 00:10:31.356 A:middle
So, this is what my
markup looks like.

00:10:31.786 --> 00:10:33.586 A:middle
This is the markup
for my article

00:10:34.286 --> 00:10:35.916 A:middle
and here's my design template.

00:10:37.166 --> 00:10:39.716 A:middle
These are the regions
within that design template

00:10:39.716 --> 00:10:41.906 A:middle
and here's my image,
its interleaves

00:10:41.906 --> 00:10:44.436 A:middle
with the regions that's
fine, the regions don't need

00:10:44.436 --> 00:10:46.026 A:middle
to be contiguous
in the document.

00:10:46.346 --> 00:10:49.736 A:middle
Each of the reasons was
styled a little differently

00:10:49.736 --> 00:10:50.996 A:middle
with different widths
and heights

00:10:50.996 --> 00:10:53.806 A:middle
and different positioning so
I've given them a unique ID

00:10:53.806 --> 00:10:57.776 A:middle
so that I can control that
bit of styling with the ID.

00:10:58.836 --> 00:11:00.846 A:middle
I've also given them
a shared class name

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:10:58.836 --> 00:11:00.846 A:middle
I've also given them
a shared class name

00:11:01.046 --> 00:11:02.186 A:middle
so that they can share the CSS

00:11:02.186 --> 00:11:04.786 A:middle
that actually does
turn them into regions.

00:11:05.436 --> 00:11:07.216 A:middle
So, let's take a look
at what that looks like.

00:11:07.216 --> 00:11:09.286 A:middle
It's just one line of CSS,

00:11:09.286 --> 00:11:12.686 A:middle
I've truncated my markup here a
little obviously but all I need

00:11:12.686 --> 00:11:14.316 A:middle
to do to turn these boxes

00:11:14.316 --> 00:11:17.866 A:middle
into regions is top set the
flow from property in CSS.

00:11:18.296 --> 00:11:21.686 A:middle
So, takes an identifier for a
value so this is just a name,

00:11:21.686 --> 00:11:23.266 A:middle
it can be any name
that you choose.

00:11:23.536 --> 00:11:26.466 A:middle
I've given it a somewhat silly
name here, Pizza Manifesto just

00:11:26.466 --> 00:11:29.296 A:middle
to emphasize that this is
a name of my own choosing.

00:11:29.296 --> 00:11:32.986 A:middle
Now, I only have to do is
to indicate that the article

00:11:32.986 --> 00:11:35.016 A:middle
as the content that we want
to flow through the regions

00:11:35.506 --> 00:11:38.166 A:middle
and that is also very
simple again just one line

00:11:38.166 --> 00:11:40.016 A:middle
of CSS flow into property.

00:11:40.286 --> 00:11:42.956 A:middle
And note that I've given it
the same name that I gave

00:11:42.956 --> 00:11:44.946 A:middle
to the flow from
property, that's the key

00:11:44.946 --> 00:11:47.116 A:middle
that ties this 2 bits
together, that's what's says,

00:11:47.356 --> 00:11:50.406 A:middle
this is the article that's
flowing through this regions.

00:11:51.136 --> 00:11:52.306 A:middle
And that's all that I need

00:11:52.306 --> 00:11:54.896 A:middle
to achieve this unique
layout right in the browser.

00:11:55.376 --> 00:11:57.176 A:middle
So, another really cool
thing about regions

00:11:57.416 --> 00:12:00.116 A:middle
as it you can style content
based on which region

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:11:57.416 --> 00:12:00.116 A:middle
as it you can style content
based on which region

00:12:00.116 --> 00:12:01.196 A:middle
that it's flowing through.

00:12:01.616 --> 00:12:05.036 A:middle
So, for example I can make
whatever content happens to fit

00:12:05.036 --> 00:12:07.366 A:middle
into my second region
have green text.

00:12:07.906 --> 00:12:11.786 A:middle
So, this will apply style to
just a fragment of the document.

00:12:11.786 --> 00:12:14.346 A:middle
And the CSS for this is
quite simple as well,

00:12:14.516 --> 00:12:16.916 A:middle
just using the @-webkit-region
rule.

00:12:17.406 --> 00:12:19.266 A:middle
And I'm supplying some style.

00:12:19.796 --> 00:12:22.086 A:middle
So, our implementation of
course is evolving along

00:12:22.086 --> 00:12:23.216 A:middle
with this spec right now.

00:12:23.536 --> 00:12:26.896 A:middle
We only support styling
background color and color

00:12:26.896 --> 00:12:30.716 A:middle
for a region styling but the
spec does indicate more values

00:12:30.716 --> 00:12:33.156 A:middle
should be supported so
as things evolve I'm sure

00:12:33.156 --> 00:12:34.686 A:middle
that will be picked up.

00:12:35.066 --> 00:12:37.026 A:middle
So, I feel like regions
really come to life

00:12:37.026 --> 00:12:38.736 A:middle
when you actually
interact with them.

00:12:38.986 --> 00:12:41.756 A:middle
So, I would like to invite
my colleague Enrica Casucci

00:12:41.756 --> 00:12:44.886 A:middle
on to the stage to show you
a bit more about regions.

00:12:45.516 --> 00:12:50.076 A:middle
[ Applause ]

00:12:50.576 --> 00:12:51.606 A:middle
>> Hi everyone.

00:12:51.856 --> 00:12:54.866 A:middle
My name is Enrica Casucci
and I'm an engineer

00:12:54.906 --> 00:12:57.516 A:middle
on the Safari WebKit team.

00:12:58.716 --> 00:13:02.856 A:middle
So, I prepared for you an
interactive region state mode

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:12:58.716 --> 00:13:02.856 A:middle
So, I prepared for you an
interactive region state mode

00:13:02.926 --> 00:13:06.726 A:middle
to show you how flexible and
powerful CSS regions are.

00:13:07.136 --> 00:13:10.486 A:middle
Of course, since the theme of
the presentation is about pizza,

00:13:10.516 --> 00:13:12.496 A:middle
we will continue
along the same lines.

00:13:13.426 --> 00:13:18.106 A:middle
So, what we have here is
a fairly simple content

00:13:18.106 --> 00:13:21.586 A:middle
because I think it'll make
it easier for you to focus

00:13:21.586 --> 00:13:23.086 A:middle
on the flow of the content

00:13:23.126 --> 00:13:27.446 A:middle
without additional
visual distractions.

00:13:27.446 --> 00:13:31.006 A:middle
What we have here looks
like just like a page

00:13:31.006 --> 00:13:35.056 A:middle
that uses columns but
these are actually regions.

00:13:35.616 --> 00:13:41.386 A:middle
As Beth mentioned before,
columns can be considered a sort

00:13:41.386 --> 00:13:43.686 A:middle
of very constrained
type of regions.

00:13:44.086 --> 00:13:45.546 A:middle
But these are regions as I said

00:13:45.546 --> 00:13:48.216 A:middle
and they are a lot
more powerful.

00:13:48.876 --> 00:13:53.536 A:middle
So, I will start by
clicking on this gear icon

00:13:53.906 --> 00:13:57.546 A:middle
and we'll see the outline of
the three regions we have here.

00:13:58.086 --> 00:14:02.666 A:middle
The numbers on each
region indicate the order,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:13:58.086 --> 00:14:02.666 A:middle
The numbers on each
region indicate the order,

00:14:02.666 --> 00:14:04.926 A:middle
the content flow
into the regions

00:14:05.056 --> 00:14:07.546 A:middle
which is actually the order

00:14:07.546 --> 00:14:09.976 A:middle
in which the regions
appear in the DOM.

00:14:10.546 --> 00:14:14.936 A:middle
So, the content flows
from its original element

00:14:14.936 --> 00:14:19.076 A:middle
into the first region here
and when that one fills up,

00:14:19.426 --> 00:14:23.486 A:middle
it flows into the second one and
it moves over to the third one.

00:14:24.246 --> 00:14:27.776 A:middle
As you can see clearly here at
the bottom of the third region,

00:14:28.066 --> 00:14:33.056 A:middle
we have more content that we can
fit into these three regions.

00:14:33.056 --> 00:14:36.726 A:middle
So, let's look at what happens
if I click on the Add button

00:14:37.036 --> 00:14:39.646 A:middle
and add a fourth
region and I'm going

00:14:39.646 --> 00:14:41.866 A:middle
to position it here
at the bottom.

00:14:41.976 --> 00:14:46.986 A:middle
As you can see, the
content has flown directly

00:14:47.026 --> 00:14:48.496 A:middle
into the fourth region.

00:14:49.076 --> 00:14:53.876 A:middle
So, using CSS regions allows you
to create a responsive layout.

00:14:54.296 --> 00:14:56.616 A:middle
You have more content, it flows

00:14:56.616 --> 00:14:59.046 A:middle
into the next region,
very, very simple.

00:14:59.516 --> 00:15:03.866 A:middle
To make it even clearer how the
content reflows from one region

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:14:59.516 --> 00:15:03.866 A:middle
To make it even clearer how the
content reflows from one region

00:15:03.866 --> 00:15:08.326 A:middle
to another, pay attention as
I resize the region number one

00:15:08.616 --> 00:15:10.446 A:middle
and keep an eye on the MOG

00:15:10.446 --> 00:15:14.076 A:middle
and you will see the content
reflowing from region one

00:15:14.176 --> 00:15:17.666 A:middle
to region two to
region three and so on.

00:15:17.806 --> 00:15:19.026 A:middle
So, extremely simple.

00:15:19.776 --> 00:15:22.846 A:middle
So, now that we have a feel for
what we can do with regions,

00:15:23.376 --> 00:15:26.576 A:middle
we'll try to create a
nice layout for this page.

00:15:26.776 --> 00:15:31.216 A:middle
So, let's start by removing this
region and what I really want

00:15:31.216 --> 00:15:34.206 A:middle
to do is add a placeholder
for an image.

00:15:34.206 --> 00:15:38.426 A:middle
So, I'm going to reposition
this one here and I'm going

00:15:38.426 --> 00:15:40.586 A:middle
to move this one off to the side

00:15:41.386 --> 00:15:44.966 A:middle
and I can actually
resize the top one

00:15:45.086 --> 00:15:48.846 A:middle
to stretch it all the way across
the width of our viewport.

00:15:49.476 --> 00:15:52.156 A:middle
And then, I can add
an image placeholder

00:15:52.386 --> 00:15:57.186 A:middle
where I will later position
my image and stretch that over

00:15:57.286 --> 00:15:59.686 A:middle
to meet the region number 2.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:16:00.216 --> 00:16:02.516 A:middle
So, what I want here
at the bottom is

00:16:02.586 --> 00:16:05.156 A:middle
to have like a two columns.

00:16:05.476 --> 00:16:10.446 A:middle
So, I'm going to add a
fourth region and resize it

00:16:11.036 --> 00:16:13.886 A:middle
and position it down
here and we'll try

00:16:13.886 --> 00:16:16.666 A:middle
to make them roughly
the same size.

00:16:18.236 --> 00:16:22.446 A:middle
OK, so that looks sort of OK.

00:16:23.266 --> 00:16:28.496 A:middle
Now, we can click on the gear
icon and remove the overlays

00:16:28.496 --> 00:16:33.626 A:middle
and now we have our
new layout very easy.

00:16:35.026 --> 00:16:39.156 A:middle
So, the markup and the CSS
behind this example is very

00:16:39.246 --> 00:16:42.926 A:middle
simple whereas previously,
you would have used CSS

00:16:43.356 --> 00:16:45.386 A:middle
to position your
content directly.

00:16:45.816 --> 00:16:49.676 A:middle
With regions, what you do is
position the region containers

00:16:50.036 --> 00:16:52.846 A:middle
and tell the content
to flow into that.

00:16:53.516 --> 00:16:56.626 A:middle
So, you have a very
responsive layout.

00:16:56.996 --> 00:17:00.926 A:middle
It's very easy to
manage and as the size

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:16:56.996 --> 00:17:00.926 A:middle
It's very easy to
manage and as the size

00:17:00.926 --> 00:17:03.186 A:middle
of the viewport changes,
all you have

00:17:03.246 --> 00:17:06.425 A:middle
to do is reposition your regions
and you don't have to worry

00:17:06.425 --> 00:17:07.945 A:middle
about repositioning your content

00:17:08.336 --> 00:17:11.506 A:middle
because it will flow
directly into the regions.

00:17:12.435 --> 00:17:18.586 A:middle
So, the content that appears
in region you can interact

00:17:18.626 --> 00:17:21.746 A:middle
with it the same way you
would interact with content

00:17:21.746 --> 00:17:23.856 A:middle
in any other type of element.

00:17:23.986 --> 00:17:29.576 A:middle
So, for example, I can select
text from the first region

00:17:29.836 --> 00:17:34.166 A:middle
and extend my selection and
the selection will continue

00:17:34.376 --> 00:17:37.186 A:middle
in the order in which
the content has flown

00:17:38.116 --> 00:17:41.866 A:middle
which is dictated by the
order of the regions.

00:17:42.356 --> 00:17:46.906 A:middle
So, since you don't have
to worry about relaying

00:17:46.906 --> 00:17:49.996 A:middle
out your content, you
can even do things

00:17:49.996 --> 00:17:52.326 A:middle
like increase your text size

00:17:52.606 --> 00:17:54.806 A:middle
and the content will
reflow automatically.

00:17:55.736 --> 00:17:57.786 A:middle
Very, very easy.

00:17:58.076 --> 00:18:01.536 A:middle
So, before I turn
it back to Beth,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:17:58.076 --> 00:18:01.536 A:middle
So, before I turn
it back to Beth,

00:18:02.146 --> 00:18:06.196 A:middle
I'd like to show you a
page that I've prepared

00:18:06.196 --> 00:18:08.196 A:middle
where I view CSS regions

00:18:08.606 --> 00:18:13.126 A:middle
to create a magazine
quality type of layout.

00:18:14.416 --> 00:18:17.766 A:middle
Again, this is about
pizza as usual.

00:18:17.916 --> 00:18:20.076 A:middle
So, this is my blog about pizza.

00:18:20.226 --> 00:18:24.096 A:middle
I'm very passionate about the
subject and as you can see,

00:18:24.096 --> 00:18:28.296 A:middle
I have a fairly sophisticated
layout where I go

00:18:28.576 --> 00:18:31.166 A:middle
from one column over to two.

00:18:31.166 --> 00:18:37.796 A:middle
I have images down back to
one single column and then

00:18:37.796 --> 00:18:41.246 A:middle
over to two, fairly rich layout.

00:18:41.956 --> 00:18:47.566 A:middle
But the most amazing thing about
this is actually the source HTML

00:18:47.736 --> 00:18:50.156 A:middle
that I would like
to show you here

00:18:51.436 --> 00:18:54.246 A:middle
because this is a very,
very simple markup.

00:18:54.756 --> 00:19:01.276 A:middle
We have our section here
that contains our entire text

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:18:54.756 --> 00:19:01.276 A:middle
We have our section here
that contains our entire text

00:19:01.576 --> 00:19:04.726 A:middle
and the text is simply
divided into paragraphs.

00:19:05.626 --> 00:19:08.576 A:middle
All the part that pertains
to the actual layout

00:19:08.576 --> 00:19:10.526 A:middle
of the article is
in this section

00:19:10.796 --> 00:19:17.226 A:middle
where we position our regions
and images insert other DIVs

00:19:17.916 --> 00:19:21.986 A:middle
and we achieve this way,
a complete separation

00:19:21.986 --> 00:19:25.046 A:middle
between the content
and its presentation.

00:19:25.766 --> 00:19:30.936 A:middle
I hope I was able to share
my excitement for CSS regions

00:19:31.296 --> 00:19:34.346 A:middle
and I really can't wait to see
what you'll create with them.

00:19:34.816 --> 00:19:35.256 A:middle
Thank you.

00:19:36.516 --> 00:19:40.816 A:middle
[Applause]

00:19:41.316 --> 00:19:42.036 A:middle
>> Thank you Enrica.

00:19:42.516 --> 00:19:43.586 A:middle
That was really cool.

00:19:43.766 --> 00:19:46.606 A:middle
So, hopefully that
gives you an idea

00:19:46.606 --> 00:19:48.816 A:middle
of how powerful CSS regions are.

00:19:48.816 --> 00:19:49.956 A:middle
I think they are awesome.

00:19:49.956 --> 00:19:52.146 A:middle
I think they are
huge step forward

00:19:52.456 --> 00:19:55.336 A:middle
in creating really advanced
designs really easily.

00:19:56.266 --> 00:19:58.356 A:middle
OK. Let's talk about
flexible boxes.

00:19:58.946 --> 00:20:00.526 A:middle
Flexible boxes are defined

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:19:58.946 --> 00:20:00.526 A:middle
Flexible boxes are defined

00:20:00.526 --> 00:20:03.906 A:middle
in the W3Cs Flexible
Box Layout Module.

00:20:04.116 --> 00:20:06.006 A:middle
They are often just
called Flexbox

00:20:06.856 --> 00:20:09.856 A:middle
and this is a layout
model that's more similar

00:20:09.856 --> 00:20:12.006 A:middle
to layout models that you
often see in Native UI.

00:20:12.286 --> 00:20:14.326 A:middle
So, think springs and struts.

00:20:15.206 --> 00:20:19.256 A:middle
So, Flexbox is all about laying
out elements inside a container

00:20:19.526 --> 00:20:21.256 A:middle
so that they either
grow or shrink

00:20:21.316 --> 00:20:22.666 A:middle
to fill the available space.

00:20:22.666 --> 00:20:25.546 A:middle
And there are set of
properties that you can specify

00:20:25.826 --> 00:20:28.116 A:middle
on each element to indicate
how they should grow

00:20:28.116 --> 00:20:30.286 A:middle
and shrink relative
to other elements.

00:20:31.136 --> 00:20:34.286 A:middle
So, I've been calling Flexbox
a new feature in Safari.

00:20:34.596 --> 00:20:37.516 A:middle
But those of you who have really
been paying attention might know

00:20:37.516 --> 00:20:41.326 A:middle
that we have been shipping an
implementation since Safari 5.1.

00:20:41.926 --> 00:20:43.816 A:middle
That is true, but that syntax

00:20:43.816 --> 00:20:46.036 A:middle
and that implementation
is deprecated

00:20:46.386 --> 00:20:49.556 A:middle
and there is a new syntax
and new implementation new

00:20:49.556 --> 00:20:52.166 A:middle
in the new version of Safari.

00:20:52.296 --> 00:20:55.066 A:middle
So, if you're using the
old stuff, I encourage you

00:20:55.066 --> 00:20:57.096 A:middle
to please migrate your
code to the new stuff.

00:20:57.096 --> 00:20:59.776 A:middle
You should get better
performance and of course,

00:20:59.816 --> 00:21:02.306 A:middle
that's the version that
we will be improving

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:20:59.816 --> 00:21:02.306 A:middle
that's the version that
we will be improving

00:21:02.306 --> 00:21:03.796 A:middle
and maintaining going forward.

00:21:04.096 --> 00:21:07.816 A:middle
But do note that it's
not a simple rename.

00:21:07.936 --> 00:21:10.266 A:middle
So, there is-- are some
behavior differences.

00:21:10.266 --> 00:21:12.316 A:middle
So, definitely, migrate
your code

00:21:12.576 --> 00:21:14.096 A:middle
but do migrate it carefully.

00:21:14.766 --> 00:21:17.256 A:middle
So, I think that this
app is a great example

00:21:17.256 --> 00:21:18.916 A:middle
of Flexbox in action.

00:21:19.176 --> 00:21:20.986 A:middle
This app should look
familiar to you.

00:21:20.986 --> 00:21:22.116 A:middle
It's the Mac App Store.

00:21:22.426 --> 00:21:24.786 A:middle
And all of the apps
in this grid here,

00:21:24.786 --> 00:21:28.186 A:middle
this little AppGrid are
implemented with Flexbox so that

00:21:28.186 --> 00:21:31.896 A:middle
at any window size, this layout
looks really nice and clean.

00:21:32.416 --> 00:21:35.446 A:middle
Now, of course from
a design perspective,

00:21:35.656 --> 00:21:36.856 A:middle
this layout isn't new.

00:21:36.856 --> 00:21:38.826 A:middle
Layouts like this have
been around for awhile.

00:21:39.116 --> 00:21:40.906 A:middle
But actually, achieving
a layout like this

00:21:40.906 --> 00:21:44.346 A:middle
without Flexbox requires a
whole lot of code to sort

00:21:44.346 --> 00:21:47.446 A:middle
of manipulate the block layout
and inline layout models

00:21:47.446 --> 00:21:50.706 A:middle
to like mashing together in a
way they don't really want to.

00:21:50.996 --> 00:21:52.576 A:middle
It actually gets
quite complicated.

00:21:52.616 --> 00:21:54.226 A:middle
So, let's analyze this design

00:21:54.226 --> 00:21:58.036 A:middle
so that we can discuss why this
is difficult without Flexbox.

00:21:58.456 --> 00:22:00.766 A:middle
All right, first of all at
the smaller window size,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:21:58.456 --> 00:22:00.766 A:middle
All right, first of all at
the smaller window size,

00:22:00.766 --> 00:22:03.386 A:middle
we can clearly see that
there are three boxes

00:22:03.386 --> 00:22:05.236 A:middle
in each row of the AppGrid.

00:22:05.236 --> 00:22:08.946 A:middle
And this hero image at
the top is sized to be

00:22:09.096 --> 00:22:10.736 A:middle
about the same size
as the AppGrid.

00:22:10.736 --> 00:22:11.986 A:middle
It's aligned on the left.

00:22:11.986 --> 00:22:13.246 A:middle
It's actually a little
bit bigger.

00:22:13.476 --> 00:22:16.636 A:middle
On the right, it goes up
to this right hand column.

00:22:17.176 --> 00:22:21.326 A:middle
All right, at this
bigger window size,

00:22:21.356 --> 00:22:23.986 A:middle
we can see that now
there are four boxes

00:22:23.986 --> 00:22:25.136 A:middle
in each row of the AppGrid.

00:22:25.706 --> 00:22:28.666 A:middle
Here our image is still
sized relatively the same

00:22:28.666 --> 00:22:31.356 A:middle
to how it was with the AppGrid
before aligned on the left,

00:22:31.356 --> 00:22:33.776 A:middle
a little bit bigger, it goes
up to the right hand column

00:22:34.086 --> 00:22:36.096 A:middle
on the right and then the
right-hand column stayed the

00:22:36.096 --> 00:22:36.766 A:middle
same size.

00:22:37.326 --> 00:22:40.596 A:middle
And if we go back to that
smaller window size and look

00:22:40.596 --> 00:22:42.686 A:middle
at a window size that's
only slightly bigger,

00:22:43.196 --> 00:22:47.026 A:middle
we can clearly see that each
box in the AppGrid has grown

00:22:47.026 --> 00:22:49.256 A:middle
to fairly available space
even though there is not

00:22:49.256 --> 00:22:53.106 A:middle
yet enough room to add a fourth
box into each row of the grid.

00:22:53.386 --> 00:22:55.866 A:middle
So, all of this, it's always
filling the available space,

00:22:55.866 --> 00:22:58.796 A:middle
reflowing when possible,
and doing all of that

00:22:59.176 --> 00:23:00.496 A:middle
up until a certain point

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:22:59.176 --> 00:23:00.496 A:middle
up until a certain point

00:23:00.696 --> 00:23:03.266 A:middle
at which time it's
reached some maximum width

00:23:03.266 --> 00:23:06.336 A:middle
in any additional space
just creates a margin

00:23:06.466 --> 00:23:08.136 A:middle
on either side of the window.

00:23:08.916 --> 00:23:11.276 A:middle
So, if you're going to
do this without Flexbox,

00:23:11.276 --> 00:23:15.136 A:middle
you would probably use CSS
float left for most of the boxes

00:23:15.136 --> 00:23:17.786 A:middle
in the AppGrid and then
you'd have like a whole bunch

00:23:17.786 --> 00:23:19.856 A:middle
of JavaScript to compute
the width of everything.

00:23:20.156 --> 00:23:23.346 A:middle
But that math would actually get
quite complicated as it interact

00:23:23.346 --> 00:23:24.816 A:middle
with the fact that
you're floating things

00:23:24.816 --> 00:23:27.736 A:middle
because the exact math depends
on whether there are three

00:23:27.736 --> 00:23:29.956 A:middle
or four boxes in
each row of the grid.

00:23:30.106 --> 00:23:31.926 A:middle
It would get very complicated.

00:23:31.926 --> 00:23:33.286 A:middle
It would be a whole lot of code,

00:23:33.286 --> 00:23:35.616 A:middle
it would probably require
more than a few hacks.

00:23:36.046 --> 00:23:38.766 A:middle
But Flexbox was invented
to solve this problem.

00:23:38.766 --> 00:23:40.406 A:middle
This is what Flexbox does.

00:23:40.406 --> 00:23:41.736 A:middle
This is its bread and butter.

00:23:42.746 --> 00:23:44.506 A:middle
So, let's look at the code.

00:23:44.846 --> 00:23:48.726 A:middle
So, as I mentioned, Flexbox
is all about elements growing

00:23:48.726 --> 00:23:50.196 A:middle
and shrinking inside
of container

00:23:50.196 --> 00:23:51.616 A:middle
to fill the available space.

00:23:51.896 --> 00:23:54.496 A:middle
So, these are the CSS
properties that you want to set

00:23:54.806 --> 00:23:56.376 A:middle
on the container itself.

00:23:56.766 --> 00:23:59.366 A:middle
So first, you definitely want
to set the display property

00:23:59.366 --> 00:24:00.986 A:middle
to either flex or inline flex.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:23:59.366 --> 00:24:00.986 A:middle
to either flex or inline flex.

00:24:01.436 --> 00:24:03.586 A:middle
And now, it will indicate
that this is a container

00:24:03.586 --> 00:24:05.906 A:middle
that will contain
flexing children.

00:24:06.926 --> 00:24:09.386 A:middle
You can also indicate
the flex-direction.

00:24:09.606 --> 00:24:11.416 A:middle
Here I'm using the
row direction.

00:24:11.416 --> 00:24:15.006 A:middle
This will cause my elements in
this case to layout from left

00:24:15.006 --> 00:24:16.226 A:middle
to right horizontally.

00:24:16.496 --> 00:24:19.556 A:middle
There is also row reverse
for right to left layout.

00:24:19.556 --> 00:24:20.776 A:middle
And if you want the
vertical layout,

00:24:20.776 --> 00:24:23.496 A:middle
instead you would use a
column or reverse column

00:24:23.816 --> 00:24:25.096 A:middle
for bottom to top layout.

00:24:25.616 --> 00:24:28.466 A:middle
So, those are the two
properties that you want

00:24:28.466 --> 00:24:30.146 A:middle
to specify on the container.

00:24:30.476 --> 00:24:32.986 A:middle
But the flexing magic really
happens with the children.

00:24:32.986 --> 00:24:35.176 A:middle
So, let's look at
properties that you want

00:24:35.176 --> 00:24:36.436 A:middle
to specify on the children.

00:24:36.436 --> 00:24:39.306 A:middle
So, there are three properties
that you can specify there.

00:24:40.486 --> 00:24:42.606 A:middle
First, you can specify
the flex basis.

00:24:42.976 --> 00:24:44.486 A:middle
This is the initial size

00:24:44.486 --> 00:24:47.406 A:middle
of the element before any
free space is distributed.

00:24:47.836 --> 00:24:51.026 A:middle
So, in this case, since we're
laying out in the row direction,

00:24:51.186 --> 00:24:53.066 A:middle
that will correspond
to the initial width.

00:24:53.206 --> 00:24:54.906 A:middle
If we were laying out
in the column direction,

00:24:54.906 --> 00:24:56.236 A:middle
it would correspond
to the initial height.

00:24:56.236 --> 00:24:59.956 A:middle
And in fact, in this case, if I
didn't specify a basis at all,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:25:00.206 --> 00:25:02.766 A:middle
then the basis would default
to be whatever the width was.

00:25:02.766 --> 00:25:06.436 A:middle
So, sort of think of it
as your size property.

00:25:07.296 --> 00:25:09.096 A:middle
So, in this case, let's say

00:25:09.096 --> 00:25:12.006 A:middle
that this container
is 600 pixels wide.

00:25:12.006 --> 00:25:15.466 A:middle
So, given the basis that I have
assigned to my triplets here

00:25:15.466 --> 00:25:17.496 A:middle
and the basis I assigned
to my big element,

00:25:17.496 --> 00:25:18.736 A:middle
once you include their margins,

00:25:18.986 --> 00:25:21.336 A:middle
this fits perfectly inside
this container right now.

00:25:21.336 --> 00:25:23.086 A:middle
There's no growing or shrinking.

00:25:24.216 --> 00:25:26.346 A:middle
When extra space does
become available,

00:25:26.556 --> 00:25:29.246 A:middle
how the elements change
their size will be based

00:25:29.246 --> 00:25:31.406 A:middle
on the flex grow property.

00:25:31.846 --> 00:25:35.486 A:middle
So, this is used to determine
how the elements should grow

00:25:35.486 --> 00:25:37.286 A:middle
when there is extra
space available.

00:25:37.476 --> 00:25:40.816 A:middle
So, it's kind of like a ratio
and bigger numbers here mean

00:25:40.816 --> 00:25:42.596 A:middle
that the element
wants to grow more.

00:25:43.966 --> 00:25:47.646 A:middle
So, in this case, I have
specified a grow value of zero

00:25:47.646 --> 00:25:50.706 A:middle
from my triplets which means
that I don't want them to grow

00:25:50.706 --> 00:25:54.936 A:middle
at all and I have specified a
value of one from my big element

00:25:55.106 --> 00:25:57.696 A:middle
which means that I wanted
to share extra space evenly

00:25:57.956 --> 00:25:59.076 A:middle
with other growing elements.

00:25:59.106 --> 00:26:01.556 A:middle
But in this example, there
are no other growing elements

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:25:59.106 --> 00:26:01.556 A:middle
But in this example, there
are no other growing elements

00:26:01.556 --> 00:26:05.806 A:middle
so we'll take all of
the space for itself.

00:26:05.806 --> 00:26:08.126 A:middle
And when there is not a
lot of space to go around

00:26:08.126 --> 00:26:09.816 A:middle
and things need to
shrink down to fit,

00:26:10.156 --> 00:26:11.526 A:middle
how they do that
will be determined

00:26:11.526 --> 00:26:14.126 A:middle
by the flex shrink
value property.

00:26:14.926 --> 00:26:19.266 A:middle
So here, this is also of sort
of like a ratio, like flex-grow.

00:26:19.516 --> 00:26:21.296 A:middle
But with flex-grow
bigger numbers mean

00:26:21.296 --> 00:26:22.576 A:middle
that the elements
want to grow more.

00:26:22.846 --> 00:26:25.606 A:middle
Here, bigger numbers mean the
elements will shrink more.

00:26:27.216 --> 00:26:29.866 A:middle
So, I've given a shrink
value of one to my triplets

00:26:29.866 --> 00:26:32.556 A:middle
so they'll shrink evenly
and a shrink value of zero

00:26:32.556 --> 00:26:35.676 A:middle
to my big element because I
don't want it to shrink it all.

00:26:36.266 --> 00:26:38.126 A:middle
So, this is a really
quick overview

00:26:38.126 --> 00:26:39.976 A:middle
of how flexing works in Flexbox.

00:26:40.216 --> 00:26:42.796 A:middle
I can also simplify this
code using a Shorthand.

00:26:43.096 --> 00:26:46.296 A:middle
These values in the Shorthand
are ordered grow shrink basis

00:26:46.496 --> 00:26:47.156 A:middle
in that order.

00:26:47.716 --> 00:26:49.996 A:middle
But before we do move on
to Flexbox to other things,

00:26:49.996 --> 00:26:52.116 A:middle
I want to mention one more thing

00:26:52.116 --> 00:26:54.506 A:middle
that Flexbox is really
great for.

00:26:55.446 --> 00:26:59.506 A:middle
So, it's 2013 and CSS has
finally provided an easy way

00:26:59.506 --> 00:27:00.436 A:middle
to center something.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:26:59.506 --> 00:27:00.436 A:middle
to center something.

00:27:00.996 --> 00:27:02.386 A:middle
As I'm sure you all
know [applause]--

00:27:06.526 --> 00:27:08.856 A:middle
I'm sure you all know it's
been shockingly difficult

00:27:08.856 --> 00:27:12.246 A:middle
up until now to center something
in CSS especially if you want

00:27:12.246 --> 00:27:13.386 A:middle
to center it vertically.

00:27:13.766 --> 00:27:17.016 A:middle
But Flexbox actually makes
that incredibly easy.

00:27:17.016 --> 00:27:18.496 A:middle
So, here in this example,

00:27:18.696 --> 00:27:22.206 A:middle
I wanted to center my darker
gray box inside the bigger light

00:27:22.206 --> 00:27:22.766 A:middle
gray box.

00:27:23.096 --> 00:27:25.016 A:middle
So, all I had to do was indicate

00:27:25.016 --> 00:27:26.866 A:middle
that the bigger box
is a flex container

00:27:27.126 --> 00:27:31.266 A:middle
and give my smaller thing that
I want to center margin auto

00:27:31.516 --> 00:27:34.006 A:middle
and that will truly
in all cases actually

00:27:34.006 --> 00:27:35.706 A:middle
for real center this box.

00:27:37.576 --> 00:27:40.386 A:middle
So, that's an overview
of how Flexbox works.

00:27:40.386 --> 00:27:42.216 A:middle
It really just scratches
the surface.

00:27:42.216 --> 00:27:45.266 A:middle
We could have an entire
section about flexible boxes.

00:27:45.266 --> 00:27:46.836 A:middle
There is a ton of stuff there.

00:27:47.146 --> 00:27:49.626 A:middle
So, I really encourage you
to go out and learn more.

00:27:49.876 --> 00:27:51.656 A:middle
I mean, even just
speaking of centering,

00:27:51.656 --> 00:27:54.536 A:middle
there are to Flexbox
specific CSS properties

00:27:54.806 --> 00:27:57.596 A:middle
that would also allow you to
center but can also be used

00:27:57.596 --> 00:27:59.766 A:middle
to just have much
finer grain control

00:27:59.966 --> 00:28:02.276 A:middle
over how things are positioned,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:27:59.966 --> 00:28:02.276 A:middle
over how things are positioned,

00:28:02.686 --> 00:28:04.446 A:middle
aligned items in
justified content.

00:28:04.446 --> 00:28:07.916 A:middle
There is just a ton of stuff in
that spec. It's really great.

00:28:08.556 --> 00:28:11.236 A:middle
So, with these technologies
I really feel

00:28:11.236 --> 00:28:13.966 A:middle
like WebKits made huge
strides towards the future

00:28:14.346 --> 00:28:17.746 A:middle
where it will be able to
replicate really rich designs.

00:28:17.976 --> 00:28:20.036 A:middle
I'm really excited
about this stuff.

00:28:20.276 --> 00:28:22.526 A:middle
We're definitely still
working on all of these things.

00:28:22.526 --> 00:28:25.936 A:middle
So, I encourage you to play with
them, see if they work for you.

00:28:25.976 --> 00:28:27.696 A:middle
File bugs if you find any.

00:28:28.246 --> 00:28:31.746 A:middle
Let's move on to talking
about media features.

00:28:32.666 --> 00:28:34.946 A:middle
So, we'll cover two
topics here today.

00:28:35.396 --> 00:28:37.646 A:middle
First, we'll talk about
the iOS AirPlay API.

00:28:37.646 --> 00:28:40.916 A:middle
And then we'll talk
about styling captions.

00:28:41.826 --> 00:28:45.896 A:middle
We'll begin with
the AirPlay API.

00:28:46.176 --> 00:28:48.286 A:middle
So, we've been shipping
the HTML5 audio

00:28:48.286 --> 00:28:50.266 A:middle
and video elements
for a few years now.

00:28:50.576 --> 00:28:52.446 A:middle
They have been widely
adopted especially

00:28:52.446 --> 00:28:53.866 A:middle
for content targeting iOS.

00:28:54.536 --> 00:28:58.306 A:middle
And in sessions at past WWDCs,
we've talked extensively

00:28:58.306 --> 00:28:59.866 A:middle
about the many things
that you can do

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:29:00.086 --> 00:29:02.716 A:middle
with these elements including
how you can use JavaScript

00:29:03.056 --> 00:29:04.486 A:middle
to create custom controls.

00:29:04.846 --> 00:29:07.746 A:middle
So here, I'm showing that the
default controls on iOS 7.

00:29:08.336 --> 00:29:10.216 A:middle
But there are some
great examples out there

00:29:10.216 --> 00:29:13.706 A:middle
of custom controls like this
HTML5 showcase video that's

00:29:13.706 --> 00:29:17.226 A:middle
playing inside a really cool
sublime video player made

00:29:17.226 --> 00:29:18.346 A:middle
by the folks of Jillian
[phonetic].

00:29:18.576 --> 00:29:19.976 A:middle
Their video players
are really great.

00:29:19.976 --> 00:29:22.726 A:middle
They are fully HTML5,
fully integrated

00:29:22.726 --> 00:29:24.316 A:middle
with iOS, all retina ready.

00:29:24.606 --> 00:29:25.866 A:middle
They're really, really cool.

00:29:26.246 --> 00:29:27.886 A:middle
But there is one thing
that's been missing

00:29:27.886 --> 00:29:29.596 A:middle
from videos with
custom controls.

00:29:29.676 --> 00:29:32.596 A:middle
If we go back to our default
controls, you'll see it,

00:29:32.596 --> 00:29:33.986 A:middle
it's the AirPlay button.

00:29:34.306 --> 00:29:36.746 A:middle
Up until now, if you chose
to create custom controls

00:29:36.746 --> 00:29:39.366 A:middle
for your video, you had
to miss out on AirPlay.

00:29:39.726 --> 00:29:41.656 A:middle
That is until now in iOS 7.

00:29:42.386 --> 00:29:44.936 A:middle
I'm really excited for
all of you with videos

00:29:44.936 --> 00:29:46.546 A:middle
that have custom
controls to adopt this.

00:29:46.966 --> 00:29:48.006 A:middle
This is going to be great.

00:29:48.446 --> 00:29:50.126 A:middle
So, this is some
really simple markup

00:29:50.126 --> 00:29:52.046 A:middle
for a video with
custom controls.

00:29:52.476 --> 00:29:55.846 A:middle
The video element itself is
lacking the control's attribute

00:29:55.846 --> 00:29:57.576 A:middle
and so that's how you
know that we intend

00:29:57.786 --> 00:29:59.196 A:middle
to provide customer controls.

00:29:59.746 --> 00:30:02.416 A:middle
And here I have some controls
for our Play and Pause button.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:29:59.746 --> 00:30:02.416 A:middle
And here I have some controls
for our Play and Pause button.

00:30:02.416 --> 00:30:03.976 A:middle
Custom controls are
really powerful.

00:30:04.076 --> 00:30:06.436 A:middle
You can have way
more than just a Play

00:30:06.436 --> 00:30:10.186 A:middle
and Pause button I encourage you
to look at past WWDC sessions

00:30:10.476 --> 00:30:12.786 A:middle
if you want to learn more
about custom controls.

00:30:13.106 --> 00:30:14.956 A:middle
But right now, we're just
going to focus on AirPlay

00:30:15.046 --> 00:30:16.326 A:middle
so we're keeping it simple.

00:30:16.326 --> 00:30:18.716 A:middle
And the first step to
supporting AirPlay here is

00:30:18.716 --> 00:30:20.946 A:middle
to actually add an element
for the AirPlay button.

00:30:20.946 --> 00:30:23.126 A:middle
Note that I've hidden
it by default

00:30:23.516 --> 00:30:26.876 A:middle
because I want my custom AirPlay
button to match the behavior

00:30:26.876 --> 00:30:29.096 A:middle
of the defaults AirPlay
button which means

00:30:29.096 --> 00:30:32.746 A:middle
that the button will only show
when AirPlay is available.

00:30:32.746 --> 00:30:34.756 A:middle
And for that matter,
I only want it to show

00:30:35.076 --> 00:30:36.856 A:middle
when the AirPlay
API is available.

00:30:37.256 --> 00:30:40.266 A:middle
So, here's some code that will
make it show at the right time.

00:30:40.706 --> 00:30:41.906 A:middle
Here's my feature detection.

00:30:41.906 --> 00:30:43.826 A:middle
This will make sure
that API is available.

00:30:43.826 --> 00:30:46.766 A:middle
And here, I am using
some of this new API.

00:30:46.926 --> 00:30:49.906 A:middle
This is a new event that you can
listen for on the video element.

00:30:50.226 --> 00:30:53.376 A:middle
It's called WebKit Playback
Target Availability Changed.

00:30:53.376 --> 00:30:56.346 A:middle
This will be called
whenever AirPlay availability

00:30:56.406 --> 00:30:57.066 A:middle
has changed.

00:30:57.066 --> 00:30:59.896 A:middle
So, whenever a new Apple TV
has come on to the network

00:30:59.896 --> 00:31:02.016 A:middle
or when one has left
the network.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:30:59.896 --> 00:31:02.016 A:middle
or when one has left
the network.

00:31:02.366 --> 00:31:05.116 A:middle
And it's also guaranteed--
this event is also guaranteed

00:31:05.116 --> 00:31:07.996 A:middle
to fire soon after you
register for listening for it.

00:31:07.996 --> 00:31:09.306 A:middle
So, you don't have to worry.

00:31:09.546 --> 00:31:12.046 A:middle
This code will run when you're
just setting everything up too.

00:31:12.316 --> 00:31:13.966 A:middle
So, this is the function
that I want

00:31:13.966 --> 00:31:16.956 A:middle
to run whenever this event
fires, very straight forward.

00:31:17.186 --> 00:31:19.346 A:middle
Whenever AirPlay is
available, I want to show

00:31:19.346 --> 00:31:20.496 A:middle
and enable that button.

00:31:20.986 --> 00:31:24.966 A:middle
And whenever it's not available,
I want to hide and disable it.

00:31:25.776 --> 00:31:29.156 A:middle
So, there are some battery power
considerations with listening

00:31:29.156 --> 00:31:30.516 A:middle
to AirPlay availability.

00:31:30.916 --> 00:31:33.506 A:middle
So, you want to be a good
battery power citizen

00:31:33.736 --> 00:31:34.436 A:middle
on the system.

00:31:34.436 --> 00:31:36.496 A:middle
So, you should stop
listening for this event

00:31:36.786 --> 00:31:38.106 A:middle
when you no longer
care about it.

00:31:38.196 --> 00:31:40.166 A:middle
So, maybe when the
video stopped playing,

00:31:40.376 --> 00:31:41.916 A:middle
you can stop listening
for the event.

00:31:43.066 --> 00:31:44.476 A:middle
So, that's all we have to do

00:31:44.476 --> 00:31:47.826 A:middle
to get our custom
AirPlay button showing up.

00:31:47.826 --> 00:31:49.406 A:middle
Always at the right time too.

00:31:49.736 --> 00:31:51.036 A:middle
But we haven't made
it do anything yet.

00:31:51.236 --> 00:31:53.546 A:middle
So, here's some code to
make it do something.

00:31:54.226 --> 00:31:56.306 A:middle
First, I'm starting with
my feature detection.

00:31:56.886 --> 00:31:59.046 A:middle
Then down here, I'm
adding an EventListener

00:31:59.046 --> 00:32:00.536 A:middle
for the click event
on that button.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:31:59.046 --> 00:32:00.536 A:middle
for the click event
on that button.

00:32:00.886 --> 00:32:02.326 A:middle
And whenever that
button is clicked,

00:32:02.326 --> 00:32:05.546 A:middle
I'm calling another new piece
of API on the video element.

00:32:05.616 --> 00:32:08.076 A:middle
This is WebKit Show
Playback Target Picker

00:32:08.366 --> 00:32:10.816 A:middle
and this will make
the native AirPlay,

00:32:10.886 --> 00:32:12.746 A:middle
a root picker actually show up.

00:32:13.396 --> 00:32:14.876 A:middle
So, that's all we have to do

00:32:15.146 --> 00:32:17.986 A:middle
to get our AirPlay
root picker to show up.

00:32:18.546 --> 00:32:20.506 A:middle
There is one more
part to this API.

00:32:21.226 --> 00:32:24.226 A:middle
If we go back to the
video of custom controls,

00:32:24.516 --> 00:32:27.386 A:middle
you can see that when this
video is playing over AirPlay,

00:32:27.676 --> 00:32:30.196 A:middle
that AirPlay button is actually
styled a little differently.

00:32:30.566 --> 00:32:33.206 A:middle
So, this last piece of the
API will let you emulate

00:32:33.206 --> 00:32:35.216 A:middle
that behavior with
your custom controls.

00:32:35.696 --> 00:32:38.076 A:middle
OK, here is the code for that.

00:32:38.076 --> 00:32:40.376 A:middle
This is another new
event that we can listen

00:32:40.376 --> 00:32:43.306 A:middle
for called WebKit
Current Playback Target is

00:32:43.306 --> 00:32:44.416 A:middle
Wireless Changed.

00:32:44.836 --> 00:32:48.616 A:middle
So, this will be-- this event
will fire whenever a video has

00:32:48.616 --> 00:32:50.896 A:middle
started or stopped
playing over AirPlay.

00:32:51.176 --> 00:32:54.116 A:middle
And I'm just updating some
styles whenever that changes.

00:32:55.546 --> 00:32:59.486 A:middle
OK, so that summarizes the new
AirPlay API available on iOS.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:33:00.186 --> 00:33:03.006 A:middle
Let's talk about
styling captions.

00:33:03.776 --> 00:33:06.376 A:middle
So, providing captions with
your video is a great way

00:33:06.376 --> 00:33:07.776 A:middle
to widen your audience.

00:33:08.196 --> 00:33:10.516 A:middle
Captions are essential
for hearing impaired users

00:33:10.756 --> 00:33:13.806 A:middle
and they are great for users who
don't understand the language

00:33:13.806 --> 00:33:15.436 A:middle
that your video is
spoken in as well.

00:33:16.146 --> 00:33:19.876 A:middle
WebVTT is a file format
for captions defined

00:33:19.876 --> 00:33:22.676 A:middle
in the W3Cs WebVTT
specification.

00:33:23.126 --> 00:33:26.876 A:middle
We added support for WebVTT
captions in our last release.

00:33:26.966 --> 00:33:29.756 A:middle
And there's another session
happening this week that digs

00:33:30.046 --> 00:33:33.816 A:middle
into the topic of captions and
general including HTML captions.

00:33:33.816 --> 00:33:37.136 A:middle
And if you're really interested
in this topic, I encourage you

00:33:37.226 --> 00:33:39.066 A:middle
to attend that session
and learn even more.

00:33:39.776 --> 00:33:42.266 A:middle
So, there are few things
that we nearly support

00:33:42.266 --> 00:33:43.426 A:middle
with captions in this release.

00:33:43.866 --> 00:33:47.716 A:middle
First of all, we'll support
WebVTT that's embedded

00:33:47.716 --> 00:33:49.356 A:middle
in the movie file itself.

00:33:49.596 --> 00:33:51.986 A:middle
In the last release, we
only supported captions

00:33:51.986 --> 00:33:53.526 A:middle
that were in their own file.

00:33:54.756 --> 00:33:56.576 A:middle
And we've support
styling captions

00:33:56.576 --> 00:33:57.916 A:middle
with the Cue Sudo element.

00:33:58.756 --> 00:34:00.686 A:middle
There are a limited
set of CSS properties

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:33:58.756 --> 00:34:00.686 A:middle
There are a limited
set of CSS properties

00:34:00.686 --> 00:34:02.386 A:middle
that you can use
to style captions.

00:34:02.646 --> 00:34:04.486 A:middle
But I think you'll find
they still offer a lot

00:34:04.486 --> 00:34:05.366 A:middle
of flexibility.

00:34:06.136 --> 00:34:09.436 A:middle
And I would like to invite
Enrica back to show you how

00:34:09.436 --> 00:34:12.146 A:middle
to style the captions.

00:34:12.646 --> 00:34:14.775 A:middle
[Applause]

00:34:15.275 --> 00:34:17.346 A:middle
>> Thank you Beth.

00:34:17.706 --> 00:34:20.926 A:middle
OK, here I have a video for
you that I'm going to play.

00:34:21.516 --> 00:34:31.545 A:middle
[ Foreign Language ]

00:34:32.045 --> 00:34:36.386 A:middle
Many of you probably do not
understand what I'm saying

00:34:36.386 --> 00:34:37.856 A:middle
since I'm speaking Italian.

00:34:37.856 --> 00:34:41.656 A:middle
So, for this reason, I'm going
to turn on the captions here

00:34:42.025 --> 00:34:46.065 A:middle
so that you can follow the
lesson on the croissant making.

00:34:46.576 --> 00:34:47.996 A:middle
Oops-- yes.

00:34:48.036 --> 00:34:48.446 A:middle
[laughs] OK.

00:34:49.206 --> 00:34:53.295 A:middle
This video actually has
support for multiple languages.

00:34:53.666 --> 00:34:56.136 A:middle
In fact, I can click
on the caption button

00:34:56.386 --> 00:34:58.876 A:middle
and switch the text to French

00:34:59.656 --> 00:35:04.086 A:middle
and I also have captions
in Italian.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:34:59.656 --> 00:35:04.086 A:middle
and I also have captions
in Italian.

00:35:04.086 --> 00:35:08.086 A:middle
The system will remember the
language that I choose here

00:35:08.086 --> 00:35:09.496 A:middle
as my preferred language.

00:35:09.496 --> 00:35:13.986 A:middle
So, that next time, I play a
video that has caption will try

00:35:14.056 --> 00:35:17.726 A:middle
to provide caption in that
language if they're available.

00:35:18.616 --> 00:35:24.756 A:middle
So, I would like to
show you how easy it is

00:35:24.756 --> 00:35:27.856 A:middle
to add captions in
another language.

00:35:28.296 --> 00:35:31.806 A:middle
My friend Anders [phonetic] has
kindly provided me with a text

00:35:32.086 --> 00:35:34.086 A:middle
in Swedish for this video.

00:35:34.416 --> 00:35:38.336 A:middle
So, we're going to add
Swedish to this video here.

00:35:38.896 --> 00:35:41.786 A:middle
So, let me bring up the
source for this page.

00:35:43.246 --> 00:35:45.426 A:middle
In here we have the
video element

00:35:45.716 --> 00:35:50.366 A:middle
that contains currently a three
track elements one for each

00:35:50.366 --> 00:35:52.346 A:middle
of the languages that
we currently support.

00:35:52.936 --> 00:35:55.856 A:middle
If I want to add
another one all I have

00:35:55.906 --> 00:35:59.836 A:middle
to do is add another track
element have the source

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:36:00.386 --> 00:36:03.886 A:middle
attribute point to the VTT
file that contains a text

00:36:03.886 --> 00:36:07.776 A:middle
in that language and the source
length attribute indicate what

00:36:07.776 --> 00:36:08.956 A:middle
language that is.

00:36:09.276 --> 00:36:13.076 A:middle
So, I'm going to save this
one and reload my page

00:36:14.096 --> 00:36:16.366 A:middle
and we can play the video.

00:36:16.366 --> 00:36:20.936 A:middle
And now, we'll have
captions in Swedish as well.

00:36:21.516 --> 00:36:22.406 A:middle
Extremely simple.

00:36:22.816 --> 00:36:27.726 A:middle
As Beth mentioned in order
to have captions that we need

00:36:27.726 --> 00:36:30.006 A:middle
to embed them in
the video stream.

00:36:30.756 --> 00:36:35.086 A:middle
And what we have to do
is author a VTT file.

00:36:35.516 --> 00:36:41.006 A:middle
Authoring captions can be a
fairly a time consuming task

00:36:41.106 --> 00:36:44.466 A:middle
but the format of the file

00:36:44.466 --> 00:36:47.196 A:middle
for VTT is very simple
and intuitive.

00:36:47.566 --> 00:36:52.656 A:middle
In fact, the VTT file is a plain
text file that you can author

00:36:52.846 --> 00:36:57.476 A:middle
with your favorite text editor
and its format is very simple.

00:36:58.056 --> 00:37:03.306 A:middle
Each entry of the VTT file is
one corresponds to one line

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:36:58.056 --> 00:37:03.306 A:middle
Each entry of the VTT file is
one corresponds to one line

00:37:03.306 --> 00:37:05.296 A:middle
of the caption and
for each one--

00:37:05.296 --> 00:37:08.276 A:middle
you specify, the start
time and the end time.

00:37:08.276 --> 00:37:09.686 A:middle
Extremely easy.

00:37:10.486 --> 00:37:16.036 A:middle
With the new version of Safari,
we have added the ability

00:37:16.036 --> 00:37:17.926 A:middle
to style the captions.

00:37:18.696 --> 00:37:23.786 A:middle
In order to do that we can
use styles we added to our CSS

00:37:24.516 --> 00:37:27.516 A:middle
to style the Cue Sudo element.

00:37:28.046 --> 00:37:35.466 A:middle
So, let's go back to our source
here and add a rule for the cue.

00:37:35.466 --> 00:37:38.586 A:middle
We want to change the color
of the text to be yellow.

00:37:38.836 --> 00:37:41.286 A:middle
We want to use a different
font and a larger one,

00:37:41.516 --> 00:37:44.136 A:middle
and we want to add a
shadow to the text.

00:37:44.916 --> 00:37:46.206 A:middle
So, once we have done this.

00:37:46.736 --> 00:37:51.876 A:middle
We save, and we reload our
page, and we start playing.

00:37:52.436 --> 00:37:55.436 A:middle
And now, the caption have
a different look and feel,

00:37:55.866 --> 00:37:59.446 A:middle
extremely simple
but this is not all.

00:37:59.446 --> 00:38:03.376 A:middle
You can also style
separately individual elements

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:37:59.446 --> 00:38:03.376 A:middle
You can also style
separately individual elements

00:38:03.376 --> 00:38:05.416 A:middle
of the captions by
defining rules

00:38:05.726 --> 00:38:08.606 A:middle
that you applied
directly to the VTT file.

00:38:09.176 --> 00:38:12.936 A:middle
So, let's imagine we
want to emphasize.

00:38:12.936 --> 00:38:16.536 A:middle
For example, some words
in our caption stream.

00:38:16.906 --> 00:38:21.466 A:middle
So, what I'm going to do, I'm
going to add an emphasis rule

00:38:21.466 --> 00:38:24.576 A:middle
where the text is going to
be shown with the color red.

00:38:25.476 --> 00:38:28.326 A:middle
And then, I'll go
back to my VTT file.

00:38:28.816 --> 00:38:31.326 A:middle
And what I want to
do is highlight

00:38:31.326 --> 00:38:33.976 A:middle
for example the word dough
sheeter [phonetic] here.

00:38:34.206 --> 00:38:35.736 A:middle
So, here is what
I'm going to do.

00:38:35.736 --> 00:38:38.796 A:middle
I'll add the rule
right to the VTT file.

00:38:38.796 --> 00:38:44.226 A:middle
I will now save it
and reload our movie

00:38:44.226 --> 00:38:47.756 A:middle
and when I start playing
it the word should show

00:38:47.756 --> 00:38:51.526 A:middle
up in the second caption
and it should be red.

00:38:52.546 --> 00:38:53.956 A:middle
Very easy.

00:38:54.546 --> 00:38:56.586 A:middle
[Applause] So, this
is all for our demo.

00:38:56.586 --> 00:38:57.966 A:middle
I'll give it back to Beth

00:38:58.286 --> 00:38:59.796 A:middle
to continue the rest
of our session.

<HTML><HEAD>
<TITLE>Request Timeout</TITLE>
</HEAD><BODY>
<H1>Request Timeout</H1>
The server timed out while waiting for the browser's request.<P>
Reference&#32;&#35;2&#46;c6524817&#46;1373787861&#46;0
</BODY></HTML>
WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:39:59.376 --> 00:40:01.976 A:middle
which comes in all of this
different variants depending

00:40:02.186 --> 00:40:04.976 A:middle
on what you're using
the text for.

00:40:05.326 --> 00:40:07.076 A:middle
And of course there's
a system wide setting

00:40:07.076 --> 00:40:10.806 A:middle
where the user can control what
size of the font is comfortable

00:40:10.806 --> 00:40:13.016 A:middle
to them and that will be
reflected in all of the apps

00:40:13.106 --> 00:40:14.436 A:middle
that are using dynamic type.

00:40:15.046 --> 00:40:17.066 A:middle
Well, I'm delighted to
tell you that you can opt

00:40:17.066 --> 00:40:21.026 A:middle
into using dynamic
type in WebKit on iOS.

00:40:21.116 --> 00:40:25.136 A:middle
So, that you're app and or
your websites can reflect all

00:40:25.136 --> 00:40:26.846 A:middle
of those settings that
the user has selected

00:40:26.846 --> 00:40:30.616 A:middle
and it will really mix in with
the look and feel of iOS 7.

00:40:31.216 --> 00:40:35.116 A:middle
So, we've added a bunch of new
values to the CSS Font Property.

00:40:35.366 --> 00:40:38.186 A:middle
They can reflect all of
these different types of--

00:40:38.336 --> 00:40:41.156 A:middle
all of these different
variants of the dynamic type.

00:40:41.526 --> 00:40:43.936 A:middle
And so here I'm showing
them in the larger font size

00:40:44.226 --> 00:40:47.176 A:middle
but if the user selects the
medium size or small size,

00:40:47.556 --> 00:40:50.096 A:middle
the WebView will
honor that setting

00:40:50.096 --> 00:40:53.136 A:middle
and it will update dynamically
whenever the user changes

00:40:53.136 --> 00:40:53.686 A:middle
the setting.

00:40:53.686 --> 00:40:56.816 A:middle
So, this is a nice little
way to integrate with iOS 7,

00:40:56.816 --> 00:40:58.786 A:middle
if that's a goal
for your content.

00:40:59.256 --> 00:41:03.696 A:middle
So, if you had a
chance to browse the web

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:40:59.256 --> 00:41:03.696 A:middle
So, if you had a
chance to browse the web

00:41:03.696 --> 00:41:06.476 A:middle
with Safari 7 yet, you
may have noticed the text

00:41:06.476 --> 00:41:09.036 A:middle
on websites looks more
beautiful and more readable

00:41:09.036 --> 00:41:12.186 A:middle
than ever before and that's
because we've enabled kerning

00:41:12.186 --> 00:41:13.566 A:middle
and ligatures by default.

00:41:14.056 --> 00:41:16.116 A:middle
So, you don't have to do
anything to opt into this.

00:41:16.116 --> 00:41:19.106 A:middle
This is on automatically
for all websites.

00:41:20.056 --> 00:41:22.296 A:middle
If you're not familiar
with these technologies,

00:41:22.296 --> 00:41:23.876 A:middle
these are two different
technologies

00:41:24.206 --> 00:41:27.476 A:middle
that make text more readable
by adjusting the amount

00:41:27.476 --> 00:41:29.286 A:middle
of space between characters.

00:41:29.656 --> 00:41:32.326 A:middle
So, kerning will actually
programmatically adjust the

00:41:32.326 --> 00:41:34.026 A:middle
amount of space between glyphs.

00:41:34.026 --> 00:41:36.426 A:middle
So, here's a series of
glyphs with no kerning

00:41:36.426 --> 00:41:38.876 A:middle
and this is what the
same text that looks

00:41:38.876 --> 00:41:40.296 A:middle
like with kerning applied.

00:41:40.626 --> 00:41:42.746 A:middle
You can see that glyphs
are much closer together.

00:41:42.996 --> 00:41:45.596 A:middle
It's much easier to tell that
they're meant to be a part

00:41:45.596 --> 00:41:47.806 A:middle
of the same admittedly
made up word.

00:41:49.396 --> 00:41:52.256 A:middle
Ligatures on the other hand
are actually specially glyphs

00:41:52.256 --> 00:41:54.736 A:middle
in the font itself
that combine two

00:41:54.736 --> 00:41:57.456 A:middle
or more characters
into a single glyph.

00:41:57.676 --> 00:42:01.746 A:middle
So, FI is a classic example
here on the left to have F and I

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:41:57.676 --> 00:42:01.746 A:middle
So, FI is a classic example
here on the left to have F and I

00:42:01.746 --> 00:42:04.616 A:middle
as two separate glyphs and
on the right is a glyph

00:42:04.616 --> 00:42:06.976 A:middle
for a ligature that
combines F and I.

00:42:07.216 --> 00:42:09.106 A:middle
That's a really common ligature

00:42:09.106 --> 00:42:11.336 A:middle
if a font contains
any ligatures at all.

00:42:11.336 --> 00:42:15.036 A:middle
It usually contains one for
FI, but some fonts contain lots

00:42:15.036 --> 00:42:18.306 A:middle
of other ligatures too lobster
is a great example of a font

00:42:18.306 --> 00:42:19.876 A:middle
with lots of interesting
ligatures.

00:42:19.876 --> 00:42:22.996 A:middle
If you look at the
FIX and fixing--

00:42:23.116 --> 00:42:26.256 A:middle
oh, and the top row there has
no kerning and no ligatures.

00:42:26.526 --> 00:42:27.836 A:middle
Bottom row has both.

00:42:27.836 --> 00:42:31.226 A:middle
So, we can see the FIX
and fixing the transition

00:42:31.226 --> 00:42:33.016 A:middle
between those letters and
the bottom row is just

00:42:33.016 --> 00:42:35.846 A:middle
so much smoother, it's
using that ligature instead

00:42:36.136 --> 00:42:39.936 A:middle
and the EX an example is another
great example or the transition

00:42:39.936 --> 00:42:40.996 A:middle
between those letters is just

00:42:40.996 --> 00:42:44.286 A:middle
so much smoother using the
ligature, so much less jarring.

00:42:45.086 --> 00:42:47.966 A:middle
So, over the most part we
think that this change is going

00:42:47.966 --> 00:42:49.926 A:middle
to be a huge win for
you and your content.

00:42:49.926 --> 00:42:53.176 A:middle
Everything should just look more
beautiful but as you can see

00:42:53.286 --> 00:42:56.356 A:middle
on these slides sometimes
when kerning

00:42:56.396 --> 00:43:01.026 A:middle
and ligatures are enabled,
text will take up less space.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:42:56.396 --> 00:43:01.026 A:middle
and ligatures are enabled,
text will take up less space.

00:43:01.026 --> 00:43:04.836 A:middle
So, if you were expecting your
text in your app or your website

00:43:04.836 --> 00:43:08.186 A:middle
to be some exact size it may
be different now that kerning

00:43:08.186 --> 00:43:09.606 A:middle
and ligatures are on by default.

00:43:09.846 --> 00:43:12.236 A:middle
And if that's a problem for you
that you want to fix as soon

00:43:12.236 --> 00:43:15.646 A:middle
as possible, you can
disable them using the WebKit

00:43:15.646 --> 00:43:17.566 A:middle
Font-Kerning CSS Property

00:43:17.816 --> 00:43:19.626 A:middle
and the WebKit
Font-Variant-Ligature

00:43:19.626 --> 00:43:20.686 A:middle
CSS Property.

00:43:21.166 --> 00:43:24.656 A:middle
So, those are two nice
little font enhancements.

00:43:24.656 --> 00:43:26.926 A:middle
I think both are huge when
it is for readability.

00:43:27.486 --> 00:43:29.766 A:middle
Let's talk about
some new CSS things.

00:43:30.316 --> 00:43:36.196 A:middle
So, Safari 7 now supports the
CSS Calc Function from the CSS--

00:43:36.736 --> 00:43:40.056 A:middle
the W3C CSS Values and
Units specification.

00:43:40.296 --> 00:43:43.096 A:middle
So, this is an incredibly
useful new feature and we know

00:43:43.096 --> 00:43:45.916 A:middle
that web developers have been
clamoring for it for years.

00:43:46.226 --> 00:43:50.506 A:middle
This will allow you to define
any numerical CSS value in terms

00:43:50.556 --> 00:43:52.296 A:middle
of a mathematical equation.

00:43:52.296 --> 00:43:55.226 A:middle
So, you can use addition,
subtraction, multiplication,

00:43:55.226 --> 00:43:58.486 A:middle
division, and you can even
mix units like I'm doing here

00:43:58.486 --> 00:44:02.246 A:middle
or I'm setting something to be
100 percent minus 80 pixels.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:43:58.486 --> 00:44:02.246 A:middle
or I'm setting something to be
100 percent minus 80 pixels.

00:44:02.696 --> 00:44:05.486 A:middle
Our clients at Apple have
already started using this

00:44:05.486 --> 00:44:07.506 A:middle
and they've come back
to us just so excited

00:44:07.806 --> 00:44:10.846 A:middle
about how much calc has
simplified their lives that's--

00:44:11.166 --> 00:44:14.186 A:middle
let people get rid of lots of
complicated JavaScripts that had

00:44:14.186 --> 00:44:17.376 A:middle
to run on resize much
easier code to follow

00:44:17.376 --> 00:44:19.496 A:middle
and they've been telling
us they're getting better

00:44:19.496 --> 00:44:20.836 A:middle
performance out of it as well.

00:44:21.286 --> 00:44:25.946 A:middle
Another cool new CSS
Property's WebKit Clip-Path

00:44:25.946 --> 00:44:28.296 A:middle
from the W3C CSS Masking Module.

00:44:28.786 --> 00:44:31.486 A:middle
It allows you to clip
an element to a path.

00:44:31.486 --> 00:44:34.496 A:middle
So, for example, in my
Pizza Manifesto I could clip

00:44:34.496 --> 00:44:35.886 A:middle
that image to a shape.

00:44:36.486 --> 00:44:38.026 A:middle
The syntax is really simple.

00:44:38.026 --> 00:44:40.656 A:middle
It takes a shape as
a parameter defined

00:44:40.726 --> 00:44:42.196 A:middle
in the CSS Shapes Module.

00:44:42.196 --> 00:44:46.526 A:middle
The first two numbers here
are the X and Y coordinates

00:44:46.526 --> 00:44:50.346 A:middle
for the origin of the circle and
the third number is the radius.

00:44:50.616 --> 00:44:52.876 A:middle
And there are few other shapes
that we support right now,

00:44:52.876 --> 00:44:54.946 A:middle
rectangle, ellipse and polygon.

00:44:55.516 --> 00:45:00.566 A:middle
OK. So, those are two
cool new CSS features.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:44:55.516 --> 00:45:00.566 A:middle
OK. So, those are two
cool new CSS features.

00:45:00.566 --> 00:45:02.036 A:middle
There are so many more I wish

00:45:02.086 --> 00:45:03.456 A:middle
that I had time to
tell you about.

00:45:03.716 --> 00:45:07.356 A:middle
One of my personal favorite
CSS enhancements that's not

00:45:07.356 --> 00:45:10.706 A:middle
in this slides is that
they've added a new value

00:45:10.706 --> 00:45:13.136 A:middle
for the position property
called WebKit Sticky.

00:45:13.376 --> 00:45:15.436 A:middle
It's really, really
cool and super useful.

00:45:15.646 --> 00:45:18.296 A:middle
My colleague Simon Fraser
will be covering it tomorrow

00:45:18.536 --> 00:45:21.206 A:middle
in his session about power
and performance in Safari.

00:45:21.506 --> 00:45:24.526 A:middle
So, I strongly encourage you
to go to that session and learn

00:45:24.616 --> 00:45:26.006 A:middle
about sticky position.

00:45:27.226 --> 00:45:28.186 A:middle
All right.

00:45:28.186 --> 00:45:29.206 A:middle
Let's talk about graphics.

00:45:29.206 --> 00:45:31.846 A:middle
So, we've also added a
few new JavaScript API's

00:45:31.936 --> 00:45:35.316 A:middle
for the HTML Canvas Element
that I'd like to tell you about.

00:45:36.546 --> 00:45:40.016 A:middle
We now support name blending
modes for compositing colors.

00:45:40.406 --> 00:45:42.566 A:middle
So, if one really simple
line of JavaScript,

00:45:42.566 --> 00:45:44.506 A:middle
I can composite these colors.

00:45:44.816 --> 00:45:48.226 A:middle
I just want to set the
global composite operation

00:45:48.226 --> 00:45:49.086 A:middle
to a named mode.

00:45:49.086 --> 00:45:51.226 A:middle
Here I'm using multiply,
there are number

00:45:51.226 --> 00:45:52.866 A:middle
of other name mode as well.

00:45:54.296 --> 00:45:58.366 A:middle
Another super cool new canvas
API is the path object.

00:45:58.766 --> 00:46:02.786 A:middle
So, this is a great new API
that will let you store paths

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:45:58.766 --> 00:46:02.786 A:middle
So, this is a great new API
that will let you store paths

00:46:02.786 --> 00:46:05.466 A:middle
as variables up until now
if you were creating paths

00:46:05.726 --> 00:46:07.816 A:middle
and canvas you could
only have one at a time.

00:46:08.116 --> 00:46:11.336 A:middle
If you wanted to create a new
path then you would lose your

00:46:11.336 --> 00:46:12.356 A:middle
old one entirely.

00:46:13.066 --> 00:46:14.666 A:middle
So, this is a really
trivial example

00:46:14.666 --> 00:46:18.036 A:middle
or I'm just creating two paths
upfront and drawing them later.

00:46:18.316 --> 00:46:21.566 A:middle
Another great part of
this API is that they're--

00:46:21.566 --> 00:46:24.146 A:middle
is going to really
simply hit testing

00:46:24.146 --> 00:46:26.246 A:middle
with the path object
you can just ask it,

00:46:26.246 --> 00:46:28.786 A:middle
is point in path that's a
function, that's prior to API

00:46:29.326 --> 00:46:32.106 A:middle
to hit jus that path up
until now, if you wanted

00:46:32.106 --> 00:46:34.276 A:middle
to do hit testing which I'm
sure a lot of you are doing

00:46:34.276 --> 00:46:37.996 A:middle
for your canvas games and your
canvas interactive widgets.

00:46:38.446 --> 00:46:42.196 A:middle
You'd have to actually rebuild
every path that might be hit.

00:46:42.546 --> 00:46:45.706 A:middle
And then see if the point was
in that path, throw it away,

00:46:45.886 --> 00:46:46.836 A:middle
rebuild your next path.

00:46:47.186 --> 00:46:48.256 A:middle
It's just a whole bunch of code.

00:46:48.256 --> 00:46:51.316 A:middle
I anticipate this,
simplifying a lot of things.

00:46:53.146 --> 00:46:56.326 A:middle
OK. I also want to take a moment
to talk about canvas on retina,

00:46:57.076 --> 00:47:00.736 A:middle
if you were at WWDC last year,
then you may have seen a session

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:46:57.076 --> 00:47:00.736 A:middle
if you were at WWDC last year,
then you may have seen a session

00:47:00.986 --> 00:47:05.196 A:middle
that we gave all about higher
resolution web content creating

00:47:05.196 --> 00:47:07.366 A:middle
web content for high
resolution displays.

00:47:07.686 --> 00:47:10.516 A:middle
In that session we talked a
lot about canvas and that's

00:47:10.516 --> 00:47:13.356 A:middle
because if you want to have
a beautiful sharp canvas

00:47:13.606 --> 00:47:14.686 A:middle
on a retina display.

00:47:14.896 --> 00:47:17.376 A:middle
You actually need to give
that canvas a backing store

00:47:17.766 --> 00:47:19.346 A:middle
that is what we call doubled.

00:47:19.346 --> 00:47:21.936 A:middle
So, twice the width, twice the
height actually four times the

00:47:21.936 --> 00:47:22.916 A:middle
number of pixels.

00:47:24.376 --> 00:47:29.266 A:middle
So, if you want a beautiful
sharp canvas on a retina device.

00:47:29.266 --> 00:47:31.176 A:middle
You need what we call
a 2X backing store.

00:47:31.506 --> 00:47:34.116 A:middle
So, if you were here last year
you also would have learned

00:47:34.406 --> 00:47:37.556 A:middle
that Safari 6 was going to
auto double to ensure this.

00:47:37.876 --> 00:47:40.876 A:middle
This means that we are
automatically creating a backing

00:47:40.876 --> 00:47:42.746 A:middle
store with twice the
width and twice the height

00:47:42.986 --> 00:47:45.156 A:middle
that you are asking for
when it was rendering

00:47:45.156 --> 00:47:46.406 A:middle
on a retina display.

00:47:47.786 --> 00:47:50.376 A:middle
We also told you that
iOS would not auto double

00:47:50.666 --> 00:47:53.816 A:middle
because there are more memory
constraints on that platform,

00:47:54.006 --> 00:47:56.526 A:middle
it might be a problem that we
were automatically requesting

00:47:56.796 --> 00:47:58.016 A:middle
so much more space.

00:47:58.366 --> 00:48:02.416 A:middle
Well, people got
confused and sad

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:47:58.366 --> 00:48:02.416 A:middle
Well, people got
confused and sad

00:48:02.776 --> 00:48:05.126 A:middle
and that was definitely
not our goal.

00:48:05.356 --> 00:48:08.626 A:middle
Our goal is to have beautiful
canvases, canvi [phonetic]

00:48:09.126 --> 00:48:11.236 A:middle
on retina displays
for all of you.

00:48:12.306 --> 00:48:14.266 A:middle
And so, we've decided
in Safari 7

00:48:14.266 --> 00:48:15.736 A:middle
that we will no longer
auto double.

00:48:15.736 --> 00:48:19.286 A:middle
So, Safari 7 will match what
iOS is been doing all along

00:48:19.656 --> 00:48:23.116 A:middle
and no auto doubling will happen
will give you a backing store

00:48:23.116 --> 00:48:24.806 A:middle
of exactly the size
that you request.

00:48:25.586 --> 00:48:29.036 A:middle
The good news is that if you
followed our instructions last

00:48:29.036 --> 00:48:31.646 A:middle
year about how to
create a canvas

00:48:31.646 --> 00:48:34.876 A:middle
that would be the right size
on a none retina display

00:48:34.876 --> 00:48:38.536 A:middle
and on a retina display that
advice all still totally works

00:48:38.536 --> 00:48:41.426 A:middle
and still will do the right
thing on all platforms.

00:48:41.426 --> 00:48:44.446 A:middle
So, I still encourage you to
look at that session if you want

00:48:44.446 --> 00:48:48.336 A:middle
to know how to create a high
resolution canvas element.

00:48:50.046 --> 00:48:53.866 A:middle
OK. So, that covers
graphics enhancements,

00:48:53.866 --> 00:48:56.566 A:middle
I think there is some new
API's that will be super useful

00:48:56.566 --> 00:48:59.486 A:middle
for those of you using
canvas and I think

00:48:59.486 --> 00:49:01.976 A:middle
that hopefully we've cleared up
some confusion by getting rid

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:48:59.486 --> 00:49:01.976 A:middle
that hopefully we've cleared up
some confusion by getting rid

00:49:01.976 --> 00:49:06.486 A:middle
of the auto doubling that
you were doing on OS X.

00:49:06.566 --> 00:49:08.396 A:middle
OK. So, we at Apple and we

00:49:08.396 --> 00:49:11.726 A:middle
in the WebKit Open Source
Project consider compatibility

00:49:11.726 --> 00:49:13.876 A:middle
to be among the most
important of our goals.

00:49:13.926 --> 00:49:16.536 A:middle
So, we never want to
intentionally introduce

00:49:16.536 --> 00:49:19.996 A:middle
that compatibility problem
but sometimes to make a cake,

00:49:19.996 --> 00:49:21.396 A:middle
you have to break a few eggs.

00:49:21.696 --> 00:49:24.316 A:middle
So, here's a summary of changes
that we made for good reasons

00:49:24.616 --> 00:49:27.066 A:middle
that we think will be awesome
for your most of the time

00:49:27.066 --> 00:49:29.056 A:middle
but they do run the
risk of running

00:49:29.056 --> 00:49:30.456 A:middle
into some problems for you.

00:49:31.206 --> 00:49:33.406 A:middle
So, we've covered the first
couple of this already.

00:49:33.676 --> 00:49:36.786 A:middle
First is that canvas no longer
auto doubles on the Mac,

00:49:36.786 --> 00:49:39.246 A:middle
if you did not follow
our advice from last year

00:49:39.246 --> 00:49:41.506 A:middle
and you're depending on Safari

00:49:41.506 --> 00:49:44.196 A:middle
to automatically create a
bigger backing store for you,

00:49:44.436 --> 00:49:49.366 A:middle
then you might have some blurry
canvi on retina these days.

00:49:49.516 --> 00:49:51.356 A:middle
Another thing to make
note of is that kerning

00:49:51.356 --> 00:49:52.556 A:middle
and ligatures are on by default.

00:49:52.556 --> 00:49:55.276 A:middle
Again, we've talked about
this, so now text might take

00:49:55.276 --> 00:49:56.826 A:middle
up less space than it used to.

00:49:57.066 --> 00:49:58.916 A:middle
So, just something
to be on the lookout

00:49:58.916 --> 00:50:01.976 A:middle
for if you were depending
on a specific size.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:49:58.916 --> 00:50:01.976 A:middle
for if you were depending
on a specific size.

00:50:02.446 --> 00:50:05.446 A:middle
Another change that we made is

00:50:05.446 --> 00:50:08.666 A:middle
that the CSS background
shorthand will now overwrite

00:50:08.666 --> 00:50:09.636 A:middle
earlier settings.

00:50:09.926 --> 00:50:12.936 A:middle
So, this is a change that we
made to match the specification

00:50:13.276 --> 00:50:15.186 A:middle
and it was a change that
was added to the spec

00:50:15.186 --> 00:50:17.476 A:middle
because the CSS Community
really wanted it.

00:50:17.566 --> 00:50:20.266 A:middle
So, this is again something that
we think you'll really like.

00:50:20.356 --> 00:50:24.306 A:middle
So, it solving this
problem where people wanted

00:50:24.306 --> 00:50:26.356 A:middle
at some later point in
their cascade to be able

00:50:26.356 --> 00:50:27.426 A:middle
to say background none

00:50:27.706 --> 00:50:30.246 A:middle
and to have it reset
all background values.

00:50:30.516 --> 00:50:31.986 A:middle
But it didn't actually do that.

00:50:31.986 --> 00:50:34.726 A:middle
This background size
would not have been reset

00:50:35.156 --> 00:50:37.046 A:middle
in prior versions of Safari.

00:50:37.046 --> 00:50:38.876 A:middle
Now, it will be.

00:50:39.156 --> 00:50:40.236 A:middle
So, that's the great news.

00:50:41.026 --> 00:50:42.506 A:middle
If you were writing
code like this though,

00:50:42.506 --> 00:50:45.336 A:middle
you may have expected that
background size to be honored,

00:50:45.686 --> 00:50:47.146 A:middle
but it won't be honored anymore.

00:50:47.146 --> 00:50:49.206 A:middle
So, that's a little bit of a
gotcha to be on the lookout

00:50:49.206 --> 00:50:51.376 A:middle
for here, but for the
most part we think

00:50:51.376 --> 00:50:52.626 A:middle
that you're going
to really like this.

00:50:52.626 --> 00:50:56.976 A:middle
This is something that
a lot of people wanted.

00:50:56.976 --> 00:50:58.496 A:middle
I'm delighted to tell you

00:50:58.496 --> 00:51:02.576 A:middle
that we've unprefixed
transition as we call it.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:50:58.496 --> 00:51:02.576 A:middle
that we've unprefixed
transition as we call it.

00:51:02.576 --> 00:51:05.666 A:middle
The transition specification
has reached a level of maturity

00:51:05.666 --> 00:51:07.736 A:middle
that we can ship a
version of transition

00:51:07.976 --> 00:51:09.536 A:middle
without the WebKit prefix.

00:51:09.886 --> 00:51:10.936 A:middle
So, I think this is--

00:51:10.936 --> 00:51:13.246 A:middle
again, another thing that it's
going to be great for you.

00:51:13.246 --> 00:51:14.826 A:middle
It should simplify
some of your CSS.

00:51:14.826 --> 00:51:17.666 A:middle
The only gotcha here is
that there is some code,

00:51:17.876 --> 00:51:20.466 A:middle
out in the wild that
assumes that if transition is

00:51:20.466 --> 00:51:23.836 A:middle
on prefix then CSS
animation is also on prefix

00:51:24.026 --> 00:51:25.396 A:middle
which is not a safe assumption

00:51:25.646 --> 00:51:27.506 A:middle
and it's not the
case in Safari 7.

00:51:27.556 --> 00:51:29.426 A:middle
So, that's just a
little something

00:51:29.426 --> 00:51:30.316 A:middle
to be on the lookout for.

00:51:30.316 --> 00:51:35.086 A:middle
OK. So, that covers
the enhancements

00:51:35.086 --> 00:51:36.776 A:middle
that we have time for today.

00:51:36.776 --> 00:51:38.616 A:middle
There are so many other
things that I wish

00:51:38.856 --> 00:51:40.166 A:middle
that I had time to
tell you about.

00:51:40.446 --> 00:51:42.396 A:middle
But there are many
other sessions this week

00:51:42.396 --> 00:51:44.066 A:middle
that will cover a lot of them.

00:51:44.926 --> 00:51:46.826 A:middle
So, there are three things
that I would like you

00:51:46.826 --> 00:51:48.196 A:middle
to leave here today with.

00:51:48.316 --> 00:51:51.626 A:middle
First, rich magazine-like
layouts are coming to the web,

00:51:51.626 --> 00:51:54.156 A:middle
this is something that it's
very important to us something

00:51:54.156 --> 00:51:55.696 A:middle
that we're working on a lot.

00:51:57.136 --> 00:51:59.366 A:middle
We're always looking to
have better integration

00:51:59.366 --> 00:52:01.076 A:middle
with our platform
and our devices.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:51:59.366 --> 00:52:01.076 A:middle
with our platform
and our devices.

00:52:01.076 --> 00:52:03.726 A:middle
I think that the AirPlay
API and our support

00:52:03.726 --> 00:52:06.656 A:middle
for dynamic type are two
great examples of that.

00:52:06.656 --> 00:52:10.676 A:middle
And finally, there's tons of new
stuff in WebKit all the time.

00:52:10.676 --> 00:52:13.316 A:middle
There's so many things-- we
talked about so many things

00:52:13.316 --> 00:52:15.396 A:middle
or so many more things
I wish we had time for,

00:52:15.706 --> 00:52:19.226 A:middle
if you're interested in keeping
up with our activity and WebKit,

00:52:19.396 --> 00:52:21.986 A:middle
we've actually been doing
a pretty good job lately

00:52:21.986 --> 00:52:24.526 A:middle
of summarizing the most
exciting changes each week

00:52:24.526 --> 00:52:27.606 A:middle
on our blog webkit.org/blog.

00:52:27.606 --> 00:52:30.076 A:middle
I encourage you to check it out.

00:52:30.076 --> 00:52:32.276 A:middle
If you have more
questions there are a lot

00:52:32.276 --> 00:52:34.156 A:middle
of resources available to you.

00:52:35.976 --> 00:52:39.136 A:middle
And I mentioned several times
many other sessions this week.

00:52:39.346 --> 00:52:42.116 A:middle
Right after this session, in a
different room, there are going

00:52:42.116 --> 00:52:45.126 A:middle
to be two fantastic sessions
about the improvements

00:52:45.126 --> 00:52:47.546 A:middle
that we've made to our
developer tools this year.

00:52:47.756 --> 00:52:49.386 A:middle
I really encourage
you to go to them

00:52:49.726 --> 00:52:52.786 A:middle
up in Russian Hill tomorrow
morning on the session

00:52:52.786 --> 00:52:53.806 A:middle
about power and performance.

00:52:53.806 --> 00:52:55.456 A:middle
I referenced this
earlier or you'll learn

00:52:55.456 --> 00:52:58.376 A:middle
about position Sticky
in this session and lots

00:52:58.376 --> 00:53:00.526 A:middle
of other really great
tips and tricks

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:52:58.376 --> 00:53:00.526 A:middle
of other really great
tips and tricks

00:53:00.566 --> 00:53:03.186 A:middle
for having a really
fast responsive website.

00:53:03.566 --> 00:53:06.296 A:middle
If you want to learn more about
captions there's the session

00:53:06.386 --> 00:53:09.366 A:middle
about preparing and presenting
media for accessibility.

00:53:09.366 --> 00:53:12.886 A:middle
And on Friday, we have two more
great sessions you can learn all

00:53:12.886 --> 00:53:15.216 A:middle
about how to make push
notifications for your websites

00:53:15.216 --> 00:53:18.266 A:middle
which was shown in the keynote
yesterday and you can learn all

00:53:18.266 --> 00:53:20.246 A:middle
about our new objectives,
see JavaScript API.

00:53:21.206 --> 00:53:21.646 A:middle
That's it.

00:53:21.646 --> 00:53:22.856 A:middle
Thank you all for coming.

00:53:22.856 --> 00:53:27.236 A:middle
Thank you for listening.

00:53:27.603 --> 00:53:29.603 A:middle
[Applause]