- [Voiceover] One of the great benefits of using
HTML and CSS to separate presentation and structure
is the ability to present the same content
in different ways to different devices.
CSS allows us to do that through the use of
Media Types and Media Queries.
Let's take a closer look at them.
Media Types were designed to give you the ability
to serve styles to user agent
based on that agent's device type.
This means, for example, that you can send
one set of styles to Screen devices
and another set to a printer
just by specifying the correct media type.
This allows you to change the design of your site
based on the context of where it's viewed
or restrict the use of certain media specific styles,
like page breaks, to the device that understands them.
The most common Syntax for declaring Media Types
is actually part of HTML.
When using a link tag to link to an external style sheet,
you can use the Media Attribute to specify which
media type or types that you want the styles to apply to.
You can also apply media types to @import blocks
as well as @media blocks.
The CSS 2.1 specification listed 10 different Media Types.
First was All, which tells all User Agents
to apply the styles.
Braille, for Tactile Feedback devices.
Embossed, which was intended for paged braille printers.
Handheld, for mobile devices.
Print for printers.
Projection for projective presentation devices.
Screen for screen-based devices.
Speech for speech synthesizers, such as screen readers.
TTY for teletypes or terminals.
And, finally, TV for televisions.
You may have noticed that I've referred
to most of these in the past tense.
That's because despite how forward-looking
these media types were, few were ever implemented.
The most recent list of Media Types
in the Media Queries level four specification
deprecates all of them except for the
All, Print, Screen and Speech.
So, if Media Types aren't the answer,
how can we control when and how styles
are applied based on devices?
For that, we turn to Media Queries
and Media Features.
These allow you to apply conditional logic
so that you can filter when styles are applied
based on things like Width, Height,
Orientation and Color.
Let's dig into Media Queries a little deeper
by taking a look at the Syntax.
As an example, here I have both the link
and the @media block syntaxes.
First, you can use the Optional, Only, or Not
keywords to filter your Media Queries.
Only is simply used to filter out media queries
from being applied by non-supporting devices.
Conforming agents are just told to ignore it,
so you're only going to use it if you're trying to hide
the media query styles from older browsers.
The Not keyword negates the entire media query.
So, the styles would apply to devices that do not
meet the media query expression.
Since the Not keyword can be a bit tricky to use,
you should be very careful to take into account
all scenarios that would result in the styles being applied.
From there, you move on to declaring a Media Type
such as Screen or Print.
You can then use the And keyword
to add as many expressions as you'd like.
These expressions allow you to check for certain
media features and even allow you to check
for a range of values.
Using Media Features to filter when styles
are applied gives us more flexibility in targeting devices.
Rather than targeting a specific type of device,
we simply target whether a feature is supported or not.
We have a wide range of media features
currently available to us
and more are being added as needed.
They're grouped in categories based on Screen Dimensions,
Display Quality, Color, User Interaction,
Environmental and Scripting.
On certain media features like width and height,
you can add a minimum and maximum
pre-fix to set upper or lower limits on those values.
Time is going to prevent me from going into
each of these media features in more detail in this course,
but it's worth noting that some of them deal with
techniques that we're likely to use in the future,
or deal with techniques that aren't widely supported yet.
Let's take a look at a more specific example of Syntax
to see how you might use media queries in action.
Here we have a media query that is to be applied
if the media device type is Screen
and the maximum width of the screen is 480 pixels.
This would be ideal for targeting mobile devices
for smaller screens as it would limit
these styles from being applied unless
those conditions were met.
So, media types give us limited control
of when styles are applied based on the type of device
being used by the client.
Media Queries allow us to further refine
that process by creating more narrow focus
for when styles are used by using various
Media Features.
What this means for you as a Designer,
is that now you have an amazing amount of control
over how your site is viewed by multiple devices
and how the User sees and interacts
with your content.