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.
Our goal is to have three versions of our site. One for just regular desktop browsing, one for tablet devices such as the iPad, and one for mobile devices. While media queries makes the process of serving those device's different style sheets rather easy, the process of organizing, structuring, and deploying those styles can be a bit challenging. There are many strategies you can employ to serve your styles across devices and some will need to be tailored to your specific situation. In this movie, I want to discuss one such deployment strategy as I preview how we are going to modify our site for tablet and mobile deployment.
So I have the tours.htm opened here in a browser, in this case Google Chrome. Now I want you to notice this is how the site looks when viewed in a desktop browser. I have a lot of available width here on my screen, so I can see the layout as I intended it on larger screen sizes. However, if I begin to reduce the size of my screen, you will notice that when I get to a certain point, the layout changes. So this is a layout that's going to be presented to tablet type devices or smaller screen sizes. Our menu changes from being over here on the left-hand side to being a horizontal menu.
And notice if I scroll down, these are almost unaffected. They're a little tighter, but then I notice the sidebar has gone and these two items are sort of floating, they're below blow everything, and the footer has reduced a little bit too. We have some clipping going o, on the background content. Now however, if I scroll down even further, I'll see what the site would look like on a mobile device. Now here we have a very different presentation. Now you know your mobile device screens are going to be a lot smaller and they're applying to a lot more limitations. So you'll notice that the menu is going back to a vertical menu, but we're not using background images anymore. We're reducing the amount of content that the mobile device has to download. Speaking of that, the image that accents this article has gone and each of these tour details are represented as a single icon now.
Our sidebar's still there, but now they're single sidebars stacked vertically and you can see the footer has changed dramatically. Now what about these guys? Well, I've added some additional functionality for mobile devices, for example, when you hover over these you're going to see the description just sort of comes out. That will respond to a touch event in most touch screens, so we're going to give our mobile users a more compact experience, but they're still going to get the same content that we're wanting for them. Okay, so how in the world do we do this? Well, media queries have allowed me to serve up separate style sheets, so we know that, but you have to develop a strategy for this.
You have to start looking at your site as a larger entity and thinking how is this going to transform to a smaller size? What are the things that I'm going to need to resize, get rid of, change in terms of how they're going to be viewed to sort of plan for that deployment? We start talking about mobile devices, you even start taking about functionality. You know, is the site going to function the same way? Am I going to need to respond to touch events? Maybe certain content doesn't need to be served up. You can see for example that this image doesn't make all of our screen sizes. It's actually resized for the smaller browser.
The page headline doesn't make it. The background graphics that we're using here for our menu changes. So there are a lot of changes that go on there and there's a lot of strategy and planning. I've to really sit down and think, okay! If I'm targeting this particular screen size, how is my layout and how is my functionality going to need to change? Now I'm going to close this and go back into my code editor, now which in this case is Dreamweaver, and I want to take a look at three style sheets. Now first, I want to concentrate on how they're being served. Notice that our main style sheet is applying to all media screen and projections.
So any media device that asks for screen and projection are going to get these styles and that's the majority of the devices out there. iPad, the iPhone, they're asking for screen styles. Very few mobile devices actually ask for handheld media type. If I wanted to, I could add handheld to that particular list and also get the styling. Now why is that important? Well, you'll notice that the tablet style sheet is responding to a media query that is basically targeting it based on a minimum and a maximum width. The mobile is also targeting a minimum width and a maximum width for a much smaller screen size.
We also have a meta tag within the viewport. This is basically the viewport meta element. We're going to talk more about that a little later on when we talk about targeting IOS devices specifically, but other than that, I want to take a look at the style sheets themselves. main.css is the same style sheet we've been working with for pretty much the entire course. It's huge. It contains all of the styling rules for everything in our site. Tablet.css, you'll notice, is considerably smaller. It's only about 161 lines of code and the mobile style sheet is only around 240 lines of code.
So essentially, what I'm doing is I'm not trying to reinvent the wheel here. Most of the base level styling is still served through main.css. However, tablet.css and mobile.css are written so that they will overwrite the main.css where the layout has to change. So this is just one strategy of employing your styles this way. Another strategy would be to go ahead and have totally separate style sheets for each one of these with full styling if you'd like. I just find this to be a little bit more efficient from the writing standpoint. And I keep in mind that this is a single, just one strategy for deploying content through media queries.
I could've embedded all my styles in a single style sheet and served them through the use of @media block. That would lower the server requests for your CSS files. Or I could have created modular style sheets and imported the individual styles with media queries using @import. Now in the end, what is important is that you focus on the specific needs of your site and how they might change over time. Now understanding your site's specific needs, goals, and limitations will really help shape your strategy. Now with a strategy in mind, in our next movie, we're going to take a look at writing styles for targeting a specific screen size.
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.