Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Making it easier to serve content to multiple devices has always been one of the goals of separating structure, content, and presentation. A common practice in CSS2 is to use media declarations to serve the proper CSS for that device. One of the shortcomings of this technique is that many devices never really embraced media declarations as intended. Other devices, such as mobile devices, exist in such a wide variety of sizes, resolution and capabilities that a single media declaration is unable to serve their needs.
CSS3 addresses this with the addition of media queries. Media queries help you extend media declarations by additionally filtering the application of styles through the use of things such as screen size, resolution, orientation, and aspect ratio. This functionality allows you to have an amazing amount of control over how your sites render across different device types. Now consider the following example. Now, if I'm looking at this site on a large monitor, I see the layout that's targeting larger screen sizes.
However, if I reduce the screen size or view this on an alternate device, I get a different layout, targeting tablets or smaller screen devices. If I reduce the screen size even further or view this on a handheld device, I not only get a different layout, but I also see enhanced capabilities designed to target the mobile environment. So how do media queries work? Well, actually they're quite simple and if you've already been declaring media types for your style sheets, it's really just a matter of adding one or two items to your existing media declaration.
Now here is a sample media query. Essentially, media queries are just media type declarations that then checked for specific media features and here the media query would check to make sure that the styles are applied to not just screen devices, but only color screens. Now we'll get to specific filters we can use for media features in just a moment, but before we get into that, let's take a closer look at media query's syntax. Media queries contain a media type and one or more expressions.
The expressions contain media features which are then evaluated and used to determine whether the styles are applied or not. You can further refine media queries by adding keywords such as "and," "not," and "only" to the mix. Now, "not" and "only" can be used to filter out media types. "Only" is particularly helpful as a crude way of detecting for media query support. Now this syntax for example would be ignored by devices that don't support media queries.
You can also comma- separate a list of media queries. In this context, commas are treated like the logical "or" operator. Now in this case, if one of the expressions return true, the entire list is applied. Media queries can also be used in several different places. Depending upon how you access your styles within your sites, it's helpful to know some of the variations on media query syntax. Now if you're using a link to access external styles, the syntax that we've been using here is just fine.
If you're creating modular style sheets and are using @import to bring in external styles within existing style sheets, you'll want to modify @import to include a media query as you see here. You can also apply media queries within style sheets. By using an @media block to surround styles, you can filter styles within individual sheets as well. I also want to mention that if you don't declare a media type, "all" is assumed. So if you're filtering results to apply to all media types, you can simply exclude the media type and the syntax will still work just fine.
Okay, so what type of media features do we have to filter our results? Let's take a look at the full list. We have width, height, device-width, device-height, orientation, aspect-ratio, device-aspect ratio, color, color-index, monochrome, resolution, scan and grid. Now note some of the features expect an explicit length value, while other use keywords or integers to return a value. In the case of items like color, the device checks for bit-depth.
Since anything over zero would indicate a color device, it's sufficient just to say color. Note also that ratios are expressed as two values separated by a forward slash. The two values are compared to the width and the height of the device to establish the correct ratio. Many of the required lengths and values have specific values or restrictions and requirements. So be sure to examine the specification to make sure your formatting the request properly. Some features also except a minimum or a maximum prefix.
This allows much more flexibility as you check for minimum height or maximum width instead of a fixed value. As you can see from this list, most of the media features allow you to set minimum or maximum values. You might also be curious about what the difference is between items such as the device-height versus just plain old height. Well, height indicates the actual height of the viewport while device-height refers to the height of the device's screen itself. Any device prefix checks the device's information rather than the information from the current viewport.
So when can you start using media queries? Well, right away, especially if you're working on mobile devices. As you can see most modern browsers and mobile platforms support media queries with the exception of Internet Explorer although support for media queries should appear in IE 9. Now that we understand what media queries can do for us, in our next movie we'll begin to explore the process of writing style sheets for multiple screen sizes and devices.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.