Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Before we focus on the specific needs of iOS devices, I want to take a moment to discuss basing styles off of device orientation. It's very common now for devices such as the iPad to change displays based on the orientation of the device itself. Let's take a look at how we can respond to that with media queries. So I have the tours.htm from the 08_05 folder. Pretty much the same thing we've got going on and we have sort of removed the mobile device style sheet so we can just kind of play around with their tablet styles. And what I'm going to do is change my media query.
I'm going to remove the sort of minimum and maximum width and what I'm going to do is replace this minimum width into this media query function. I'm just going to pass in orientation:portrait. So obviously we have two keywords here and we have portrait and landscape. Now my landscape orientation is going to be my main styles, the big ones. Only when it gets into that smaller screen size, portrait if you will, would have served up the other one. Now this is not exactly how I would do this.
It's really just sort of just showing you how the orientation keyword works. Essentially, if you wanted to really customize your layout for tablet devices, you could serve up two tablet-oriented layouts. One for landscape and one for portrait and this is one of the ways that you could filter which one gets sent to that particular device. Let's test it out. So if I save this and just preview this say in Chrome, you'll notice that when the aspect ratio of my screen is wider than it's taller, I receive the landscape and if I shrink it down so that the actual screen size is taller than it is wider, there it is, I get my portrait styles. Really cool, right? Now it's really tempting to use those.
I mean it is really tempting to use them, but you need to understand that not all devices currently support it. In fact right now it's supported by Android, Firefox, and WebKit, except for some reason the iPhone oddly enough. So it will work with some mobile devices, but not all of them. So as the implementations evolve on this, this is going to be a very useful technique for creating separate portrait and landscape versions of your site. So be sure to keep an eye on how support for this evolves, especially within the mobile world, if you want to really get that level of specificity of creating layouts that look one way on landscape and one way on portrait.
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.