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.
Serving content for specific devices often requires a lot of trial and error. The iPhone and iPad support for media queries makes using them a natural choice for tailoring site content specific to those devices. The media queries we've written will work with both the iPad and the iPhone. However, there are a few more things that we can do to make the experience better for users on those devices. So, I have the tours.htm open and here we are going to be modifying the mobile.css style sheet, so you can find that in the _css directory of the same folder, 08_06.
I'm going to switch over to mobile.css real quick and what I want to do is scroll down to line 144. We're going to add the interactivity that I was displaying earlier about how you know, we really can't display the entire tour description. It would really cause us long vertical lines. So in order to make that a little nicer for the users, we are going to basically hide the tour descriptions at first and then based on a click, animate those and then sort of expand them. So, what I am going to do is modify two selectors here.
The div.tourDescription and the hover selector. First thing that I want to do is declare a height property on the tourDescription and that's essentially just going to allow me to clip my content. So all those icons are right around 150 pixels tall when you mix in the headline, so that's going to clip them, and then I'm going to take the overflow and I am going to hide that. So that's essentially just going to show the icons and the headline. Now, I need to do a transition and thankfully we know how to do those. So I'm going to do -webkit-transition.
We're going to do a really simple transition here. We are going to the transition the height. I could say all, but I really only want the height affected, to be quiet honest with you. We're going to make that happen over about three quarters of a second, so 0.75 seconds and we are going to use ease as the timing function. I'm going to copy that, paste it a couple of times, and then do Mozilla and do the just sort of generic last. You know, people ask me why do the generic last? Well, essentially Safari browsers might support WebKit for quite some time now, but when they draw the prefix it's the last one here so it'll apply this one instead of this one.
So if there's a difference in implementation, the correct one is served. All right, so let's go to our tourDescription:hover and then inside that I'm going to increase the height. So, remember it's the height that we're animating and I'm going to increase them to a maximum size of 430 pixels. That's going to ensure that I can see all of them including the tallest one. I am going to again make overflow: hidden this time instead of visible. That way just in case one of them for whatever reason does get a little taller, it is not going to spill over them and below it. I'd rather content be clipped than spill, and I'm going to change the cursor to the pointer, so I want people to know that they can click on that.
All right, so I'm going to go ahead and save that. Now, hover events in the iOS are treated as touches. This implementation can be a little buggy. So if you really, really, really want to make sure that you're doing this properly, read up on iPhone and iPad development and learn more about those touch events so that you can script for them. Now, the next thing I need to do is make sure that the iPhone is displaying our page at the desired size. So, I'm going to switch back to my source code. Now, you might be thinking, "Well, wait a minute. I though the media queries are handling that for us." They kind of are, but see here is one of the issues with designing for the iPhone or the iPad.
Those browsers are designed to show your website or any website for that matter as the website would actually view online. This is kind of the whole web concept that they are trying for. So, showing the zoomed out view of your website is very common and it's a feature. It's not bug. It's actually designed that way. So, by default Safari on the iPhone, its default is to render your page simulated 980 pixels of width. So even if you specify that you are targeting this particular device, it still might show your screen in a much larger size.
So what I am going to use is I am going to use what's known as the viewport meta element. So, directly after this last link, I'm going to do a meta tag and the meta tag I'm going to do is going to have the name of the viewport. Now, what I'm going to do after this is give it a content and the content is going to be equal to width=device-width, minimum-scale=1.0,maximum-scale=1.0 and that's going to be my meta tag.
Okay, now let's talk about what these things are going to be doing for us and I guess I can leave it self-closing. It's not going to hurt anything, right? Okay, so, essentially what we are saying here is we are saying"Hey! Make the width of the page equal to the width of the device." So don't zoom it, don't zoom it up, don't zoom it back. Make it 100% of the device width. Now the other things that we're passing here are optional. For a minimum-scale of one and a maximum-scale of one, that's our way of basically saying don't allow any pinch scaling for this device.
This site is going to behave more like an application that sort of frozen if you will. Now you can allow scaling. There's nothing wrong with that. I am just sort of showing you how you can do that and there are other attributes that you can use to prevent scaling as well. You can use no scale for example instead of a Boolean value on that. If you want to learn more about viewport, go to developer.apple.com and search for "Using the viewport." It's a very long URL, so there is no way I can read it all out to you, but if you just search for that, you'll find a fantastic page on using the viewport meta element to control how your site functions on an iPhone.
There's an amazing amount of control to be had through the use of this meta tag. All right, now I'm going to go ahead and save this and now I want to preview it. Okay, now I am going to go ahead and access this page on an iPhone. All right, so I'm pulling this up in the Safari WebKit browser. As you can see the page is displaying at a one-to-one ratio. It's displaying the exact size I wanted to. It's not zoomed back. Notice that if I try to pinch and scale it, I cannot pinch and scale that. If I scroll down the page and find my tour descriptions, now if I touch one of those it animates, and if I scroll down and touch another one it animates as well.
So I get the same transition. So it's looking exactly the way that I want it to. Awesome! The mobile development world is a fast- moving, not always well-documented place. If you're serious about optimizing your site content and changing its presentation for mobile devices, I recommend learning more about not just the media queries that we've learned here and the viewport meta element, but the individual platforms such as the Android, mobile WebKit, and all of the other mobile platforms as well.
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.