1
00:00:00,000 --> 00:00:04,990
One of the great benefits of using HTML and CSS to separate presentation

2
00:00:05,000 --> 00:00:08,990
and structure is the ability to present the same content in different ways

3
00:00:09,000 --> 00:00:10,990
to different devices.

4
00:00:11,000 --> 00:00:14,990
CSS allows us to do that through the use of media types.

5
00:00:15,000 --> 00:00:18,990
In this movie, I want to take a closer look at media types and their recent

6
00:00:19,000 --> 00:00:20,990
extension, media queries.

7
00:00:21,000 --> 00:00:25,990
Media types allow you to control which styles are served to a user agent, based

8
00:00:26,000 --> 00:00:27,990
on that user agent's device type.

9
00:00:28,000 --> 00:00:31,990
This means that you can send one set of styles to screen devices, another

10
00:00:32,000 --> 00:00:35,990
set to a printer, and yet another set to a screen reader.

11
00:00:36,000 --> 00:00:39,990
This ability allows you to change the design of your site based on the context

12
00:00:40,000 --> 00:00:40,990
of where it's viewed,

13
00:00:41,000 --> 00:00:46,990
or restrict the use of certain media-specific styles, like page breaks, to the

14
00:00:47,000 --> 00:00:48,990
devices that understand them.

15
00:00:49,000 --> 00:00:53,990
You can choose between three different types of syntax when declaring media types.

16
00:00:54,000 --> 00:00:58,990
First, you can use the @media blocks to group media-specific styles together.

17
00:00:59,000 --> 00:01:03,990
This allows you to have multiple sets of styles within a single style sheet.

18
00:01:04,000 --> 00:01:06,990
You can also use media types with the @import rule.

19
00:01:07,000 --> 00:01:10,990
You simply declare the media type after the location of the external style.

20
00:01:11,000 --> 00:01:15,990
The third and probably most common syntax for declaring media types is

21
00:01:16,000 --> 00:01:17,990
actually part of HTML.

22
00:01:18,000 --> 00:01:21,990
When using a link tag to link to an external style sheet, you can use the

23
00:01:22,000 --> 00:01:26,990
media attribute to specify which media type, or types, that you want to styles to apply to.

24
00:01:27,000 --> 00:01:30,990
Now, as you can see in the syntax, you can assign more than one media type of

25
00:01:31,000 --> 00:01:33,990
styles through using a comma-separated list.

26
00:01:34,000 --> 00:01:35,990
So what media types are available?

27
00:01:36,000 --> 00:01:40,990
Well, currently, we have all, which tells all user agents to apply the styles;

28
00:01:41,000 --> 00:01:45,990
braille for tactile feedback devices; embossed, which is intended for paged

29
00:01:46,000 --> 00:01:51,990
Braille printers; handheld for mobile devices; print for printers; projection

30
00:01:52,000 --> 00:01:56,990
for projected presentation devices; screen for screen devices; speech for

31
00:01:57,000 --> 00:02:02,990
speech synthesizers, such as screen readers; tty for teletypes or terminals; and

32
00:02:03,000 --> 00:02:03,990
finally, tv for televisions.

33
00:02:04,000 --> 00:02:08,990
Now truthfully, you probably won't use very many of these and support for the

34
00:02:09,000 --> 00:02:10,990
media types isn't universal.

35
00:02:11,000 --> 00:02:14,990
Many mobile devices, for example, choose to support the screen media type,

36
00:02:15,000 --> 00:02:18,990
rather than handheld, due to the browsing capabilities of those devices.

37
00:02:19,000 --> 00:02:22,990
Still, being able to have your site display one way on screen while controlling

38
00:02:23,000 --> 00:02:27,990
how the content prints and giving extra information to assisted devices is an

39
00:02:28,000 --> 00:02:31,990
amazingly powerful capability for designers to have.

40
00:02:32,000 --> 00:02:35,990
The other benefit we gain from media types is their forward-looking nature.

41
00:02:36,000 --> 00:02:39,990
As new devices come online, those media types can be added to the specification,

42
00:02:40,000 --> 00:02:44,990
and media specific properties can be created to help control how content is

43
00:02:45,000 --> 00:02:47,990
displayed or presented on those devices.

44
00:02:48,000 --> 00:02:51,990
As I mentioned earlier though, sometimes media types alone can't give us the

45
00:02:52,000 --> 00:02:55,990
control we need over how content displays on various devices.

46
00:02:56,000 --> 00:02:59,990
The rise of smartphones and tablets have created a segment of mobile devices

47
00:03:00,000 --> 00:03:03,990
that are increasingly being used to consume online content but that only

48
00:03:04,000 --> 00:03:07,990
offer inconsistent support for the handheld media type, preferring to support

49
00:03:08,000 --> 00:03:09,990
the screen media type.

50
00:03:10,000 --> 00:03:13,990
That means that these devices with their much smaller screen sizes would render

51
00:03:14,000 --> 00:03:17,990
the page using the same styles that are used for desktop browsers.

52
00:03:18,000 --> 00:03:21,990
To help deal with this, CSS3 introduced media queries.

53
00:03:22,000 --> 00:03:24,990
Media queries combine with media types and allow you to apply a little

54
00:03:25,000 --> 00:03:28,990
conditional logic along with the media type itself, so that you can filter

55
00:03:29,000 --> 00:03:34,990
when styles are applied, based on things like width and height, orientation, and color.

56
00:03:35,000 --> 00:03:38,990
Let's dig into media queries a little deeper by taking a look at the syntax.

57
00:03:39,000 --> 00:03:42,990
First, you can use the optional "only" or "not" keywords to filter out

58
00:03:43,000 --> 00:03:43,990
your media queries.

59
00:03:44,000 --> 00:03:48,990
"Only" is simply used to filter out media queries from being applied by

60
00:03:49,000 --> 00:03:50,990
non-supporting devices.

61
00:03:51,000 --> 00:03:53,990
Conforming agents are just told to ignore it, so you're only going to use it if

62
00:03:54,000 --> 00:03:57,990
you're trying to hide the media query styles from older browsers.

63
00:03:58,000 --> 00:04:00,990
The "not" keyword negates the entire media query,

64
00:04:01,000 --> 00:04:05,990
so the styles would apply to devices that do not meet the media query expression.

65
00:04:06,000 --> 00:04:09,990
From there, you move on to declaring the media type as normal.

66
00:04:10,000 --> 00:04:15,990
You can then use the "and" keyword to add as many as expressions as you'd like.

67
00:04:16,000 --> 00:04:19,990
Now these expressions allow you to check for certain media features, and even

68
00:04:20,000 --> 00:04:22,990
allow you to check for ranges of values.

69
00:04:23,000 --> 00:04:24,990
Here is a list of the current media features.

70
00:04:25,000 --> 00:04:28,990
Time is going to prevent me from going into all of these media types in more

71
00:04:29,000 --> 00:04:32,990
detail in this course, but it's worth noting that many of them deal with

72
00:04:33,000 --> 00:04:35,990
techniques that we're likely to use in the future, or deal with features that

73
00:04:36,000 --> 00:04:37,990
aren't widely supported yet.

74
00:04:38,000 --> 00:04:41,990
Other features, like width and height, are supported currently, and even allow you

75
00:04:42,000 --> 00:04:47,990
add a minimum and a maximum prefix to set upper or lower limits on those values.

76
00:04:48,000 --> 00:04:51,990
Let's take a look at a more specific example of syntax to see how you might

77
00:04:52,000 --> 00:04:52,990
use this in action.

78
00:04:53,000 --> 00:04:57,990
So here we have the media query that's to be applied if the media device type is

79
00:04:58,000 --> 00:05:02,990
screen and the width of the screen is between 0 and 480 pixels.

80
00:05:03,000 --> 00:05:06,990
This would be ideal for targeting mobile devices for smaller screens, as it

81
00:05:07,000 --> 00:05:10,990
would limit those styles from being applied unless these conditions were met.

82
00:05:11,000 --> 00:05:15,990
Although media queries are still relatively new, they are widely supported among

83
00:05:16,000 --> 00:05:17,990
modern browsers and mobile devices,

84
00:05:18,000 --> 00:05:22,990
so many designers are beginning to add them to their styles right now.

85
00:05:23,000 --> 00:05:26,990
So media types allow us to control when styles are applied based on the type of

86
00:05:27,000 --> 00:05:28,990
device being used by the client.

87
00:05:29,000 --> 00:05:32,990
Media queries allow us to further refine that process by creating a more narrow

88
00:05:33,000 --> 00:05:36,990
focus for when styles are used by various media types.

89
00:05:37,000 --> 00:05:40,990
What this means for you as a designer is that now you have an amazing amount of

90
00:05:41,000 --> 00:05:45,990
control over how your site is viewed by multiple devices and how the user sees

91
00:05:46,000 --> 00:05:56,000
and interacts with your content.