Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.