1
00:00:00,000 --> 00:00:05,343
[MUSIC]

2
00:00:05,343 --> 00:00:07,195
You've come a long way in this course.

3
00:00:07,195 --> 00:00:10,807
You've learned the parts
of the CSS box model and

4
00:00:10,807 --> 00:00:15,222
worked to control layout and
positioning of your content.

5
00:00:15,222 --> 00:00:19,123
One thing we haven't looked at yet,
however,

6
00:00:19,123 --> 00:00:23,522
is the variety of ways that
web content can be viewed.

7
00:00:23,522 --> 00:00:28,359
As users, we look at websites and
applications every day on

8
00:00:28,359 --> 00:00:33,307
a variety of screens, from laptops,
to tablets to phones.

9
00:00:33,307 --> 00:00:38,105
How do developers keep their
web content legible in

10
00:00:38,105 --> 00:00:42,578
such a broad variety of
viewing environments?

11
00:00:42,578 --> 00:00:48,020
The answer is complicated and some of it
goes beyond the scope of this course.

12
00:00:48,020 --> 00:00:53,577
But in this video, you'll learn one
very important step in optimizing

13
00:00:53,577 --> 00:00:58,963
your content for different platforms,
writing CSS media queries.

14
00:00:58,963 --> 00:01:04,165
A CSS Media Query detects
information about

15
00:01:04,165 --> 00:01:08,671
the way your web page is being viewed.

16
00:01:08,671 --> 00:01:13,652
The CSS rules written within
your media query will only be

17
00:01:13,652 --> 00:01:17,189
applied if certain conditions are met.

18
00:01:17,189 --> 00:01:20,542
Think of all the different
ways you can view a webpage.

19
00:01:20,542 --> 00:01:26,761
You might use a desktop computer,
a laptop, a tablet, or a phone.

20
00:01:26,761 --> 00:01:32,053
If your device is mobile,
you might hold it in either portrait or

21
00:01:32,053 --> 00:01:37,347
landscape orientation,
your screen might be low resolution.

22
00:01:37,347 --> 00:01:42,002
But, newer devices often have
high resolution screens,

23
00:01:42,002 --> 00:01:47,712
with extra pixels per square inch. Or,
you might not use the screen at all.

24
00:01:47,712 --> 00:01:50,022
If you're reading a long article,

25
00:01:50,022 --> 00:01:53,569
perhaps you'll decide to
print the web page instead.

26
00:01:53,569 --> 00:01:59,560
CSS media queries allow
developers to customize colors,

27
00:01:59,560 --> 00:02:04,694
fonts, images, layouts,
and more depending on

28
00:02:04,694 --> 00:02:11,188
the characteristics of the device
being used to view the page.

29
00:02:11,188 --> 00:02:16,410
You might think of the styles you've
written so far as the base styles for

30
00:02:16,410 --> 00:02:21,726
your webpage, these styles haven't
been written inside a media query.

31
00:02:21,726 --> 00:02:25,081
So they'll apply to every
device that views your site.

32
00:02:25,081 --> 00:02:29,918
CSS media queries target more
specific viewing scenarios.

33
00:02:29,918 --> 00:02:34,698
I mentioned that CSS media
queries can be used to

34
00:02:34,698 --> 00:02:39,607
control what your page
looks like when printed.

35
00:02:39,607 --> 00:02:43,711
We haven't looked yet at how developer
Diane's blog post looks for print.

36
00:02:43,711 --> 00:02:48,778
So let's check that out,
I'm pressing command p in my browser and

37
00:02:48,778 --> 00:02:51,774
scrolling through the print preview.

38
00:02:54,532 --> 00:02:59,530
Other than the fact that background
colors don't work on the printed

39
00:02:59,530 --> 00:03:02,460
page to keep printers from wasting ink,

40
00:03:02,460 --> 00:03:07,299
I don't see anything terribly
surprising in my printer preview.

41
00:03:07,299 --> 00:03:12,033
I am noticing a chance to
save a bit of paper, however.

42
00:03:14,394 --> 00:03:19,202
When we were learning about
viewport units, we set our section

43
00:03:19,202 --> 00:03:24,020
elements to be at least 100%
of the height of the viewport.

44
00:03:24,020 --> 00:03:27,090
Which is an interesting
effect on the screen, but

45
00:03:27,090 --> 00:03:29,802
not really beneficial on the printed page.

46
00:03:29,802 --> 00:03:35,756
Let's see if we can override this
effect when the page is printed.

47
00:03:35,756 --> 00:03:42,506
A media query begins with an @
symbol followed by the word media,

48
00:03:42,506 --> 00:03:46,690
notice that there's no space in there.

49
00:03:46,690 --> 00:03:53,530
And the name of the media type and
then curly braces.

50
00:03:53,530 --> 00:03:58,604
You'll notice that I'm writing this
at the bottom of my style sheet,

51
00:03:58,604 --> 00:04:03,251
which is where developers most
often keep their media queries.

52
00:04:03,251 --> 00:04:06,119
Within our media query curly braces,

53
00:04:06,119 --> 00:04:10,879
we can write CSS rules that apply
only to the given conditions.

54
00:04:10,879 --> 00:04:14,077
In this case,
only when the page is being printed.

55
00:04:20,261 --> 00:04:24,401
But auto value means let the browser
determine the minimum height for

56
00:04:24,401 --> 00:04:25,834
the selected element.

57
00:04:28,673 --> 00:04:31,882
Let's try the print preview again and

58
00:04:31,882 --> 00:04:36,904
now our section elements are only
as tall as they need to be.

59
00:04:40,819 --> 00:04:43,380
I noticed a couple of issues
when previewing just now.

60
00:04:43,380 --> 00:04:48,403
One, is that the z-index seems
a little off on the figure

61
00:04:48,403 --> 00:04:53,009
element containing developer
Diane's photo, and

62
00:04:53,009 --> 00:04:56,056
it's covering our fixed header.

63
00:04:56,056 --> 00:05:00,604
This is a good opportunity
to practice z-index a bit.

64
00:05:00,604 --> 00:05:07,345
We'll assign the figure
element a z-index of 1,

65
00:05:07,345 --> 00:05:11,746
the header gets a z-index of 2.

66
00:05:11,746 --> 00:05:17,511
And the interesting banner should be
on top and receive a z-index of 3.

67
00:05:22,250 --> 00:05:23,644
And that fixes our stacking issue.

68
00:05:23,644 --> 00:05:28,603
You'll notice that the interesting
banner becomes unstuck

69
00:05:28,603 --> 00:05:32,294
once we scroll down to
the end of the article,

70
00:05:32,294 --> 00:05:37,168
which has to do with some of
the limits of position: sticky.

71
00:05:37,168 --> 00:05:39,139
I'm fine with how it is, but

72
00:05:39,139 --> 00:05:44,234
I've included an article in the teachers
notes if you'd like to read more

73
00:05:44,234 --> 00:05:49,263
about how position: sticky relates
to the height of the parent element.

74
00:05:49,263 --> 00:05:54,036
I am concerned that the CSS
wizard banner looks a little

75
00:05:54,036 --> 00:05:56,642
strange on the printed page.

76
00:05:56,642 --> 00:06:03,311
So maybe we'll also use our print
media query to hide the banner.

77
00:06:21,786 --> 00:06:25,926
Feel free to continue making
changes to our print stylesheet by

78
00:06:25,926 --> 00:06:28,748
writing new rules within our media query.

79
00:06:28,748 --> 00:06:32,948
In the next video,
we'll learn to target media features

80
00:06:32,948 --> 00:06:36,235
to make our media queries
even more powerful.