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.
In this movie, I want to take a closer look at media types and their recent
extension, media queries.
Media types allow you to control which styles are served to a user agent, based
on that user agent's device type.
This means that you can send one set of styles to screen devices, another
set to a printer, and yet another set to a screen reader.
This ability 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
devices that understand them.
You can choose between three different types of syntax when declaring media types.
First, you can use the @media blocks to group media-specific styles together.
This allows you to have multiple sets of styles within a single style sheet.
You can also use media types with the @import rule.
You simply declare the media type after the location of the external style.
The third and probably 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 to styles to apply to.
Now, as you can see in the syntax, you can assign more than one media type of
styles through using a comma-separated list.
So what media types are available?
Well, currently, we have all, which tells all user agents to apply the styles;
braille for tactile feedback devices; embossed, which is intended for paged
Braille printers; handheld for mobile devices; print for printers; projection
for projected presentation devices; screen for screen devices; speech for
speech synthesizers, such as screen readers; tty for teletypes or terminals; and
finally, tv for televisions.
Now truthfully, you probably won't use very many of these and support for the
media types isn't universal.
Many mobile devices, for example, choose to support the screen media type,
rather than handheld, due to the browsing capabilities of those devices.
Still, being able to have your site display one way on screen while controlling
how the content prints and giving extra information to assisted devices is an
amazingly powerful capability for designers to have.
The other benefit we gain from media types is their forward-looking nature.
As new devices come online, those media types can be added to the specification,
and media specific properties can be created to help control how content is
displayed or presented on those devices.
As I mentioned earlier though, sometimes media types alone can't give us the
control we need over how content displays on various devices.
The rise of smartphones and tablets have created a segment of mobile devices
that are increasingly being used to consume online content but that only
offer inconsistent support for the handheld media type, preferring to support
the screen media type.
That means that these devices with their much smaller screen sizes would render
the page using the same styles that are used for desktop browsers.
To help deal with this, CSS3 introduced media queries.
Media queries combine with media types and allow you to apply a little
conditional logic along with the media type itself, so that you can filter
when styles are applied, based on things like width and height, orientation, and color.
Let's dig into media queries a little deeper by taking a look at the syntax.
First, you can use the optional "only" or "not" keywords to filter out
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.
From there, you move on to declaring the media type as normal.
You can then use the "and" keyword to add as many as expressions as you'd like.
Now these expressions allow you to check for certain media features, and even
allow you to check for ranges of values.
Here is a list of the current media features.
Time is going to prevent me from going into all of these media types in more
detail in this course, but it's worth noting that many of them deal with
techniques that we're likely to use in the future, or deal with features that
aren't widely supported yet.
Other features, like width and height, are supported currently, and even allow you
add a minimum and a maximum prefix to set upper or lower limits on those values.
Let's take a look at a more specific example of syntax to see how you might
use this in action.
So here we have the media query that's to be applied if the media device type is
screen and the width of the screen is between 0 and 480 pixels.
This would be ideal for targeting mobile devices for smaller screens, as it
would limit those styles from being applied unless these conditions were met.
Although media queries are still relatively new, they are widely supported among
modern browsers and mobile devices,
so many designers are beginning to add them to their styles right now.
So media types allow us to control 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 a more narrow
focus for when styles are used by various media types.
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.