Join James Williamson for an in-depth discussion in this video Media types and media queries, part of CSS Fundamentals.
- View Offline
- [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.
CSS Fundamentals covers the basic concepts, terminology, and techniques you need to read and write CSS. It's for people who want a big-picture overview before taking hands-on courses. Author James Williamson explains how CSS affects text, borders, backgrounds, and images; how CSS works with HTML; and how the W3C's evolving CSS specification impacts designers. He also reviews some of the most popular CSS editors and frameworks and lists online tools and resources for further study.
- What is CSS?
- Basic selector types
- Using CSS with HTML
- How browsers render CSS differently
- Exploring CSS specifications
- Checking browser support
- Working with fonts
- Understanding the box model
- Adjusting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids