-
Notifications
You must be signed in to change notification settings - Fork 48
/
600.srt
4487 lines (3293 loc) · 98.2 KB
/
600.srt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
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