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.
One of the things you have to deal with when using any emerging technologies such as CSS3 is the lack of support in older browsers. There are many strategies, workarounds, and hacks you can use to either force support or provide fallback content for non-supporting devices or browsers. We're going to discuss a lot of those all the way throughout the title. In this movie, I want to take a moment to talk about detecting for CSS3 support. Often one of the best strategies for dealing with CSS3 support is to provide one set of styles enhanced with CSS3 for modern browsers and another set for older or non-supporting devices.
So the first thing you want to do is download the Modernizr library. So I am going to scroll down and I can find a couple of links to download this. One is the really big Download link. Now this is the minified version. If you want the uncompressed version, there is also a link for that directly underneath that as well. So, all you have to do is click on the Download button and save it to a central location on your hard drive. Some place that you're going to be able to find it and use it on all of your projects. Now once it's downloaded, it's ready to use. Now if you want to learn a little bit more about it, there is a nice documentation section on the website.
When you switch to that, you'll not only get a little background about what is Modernizr, but if you're detecting for a specific feature, for example we are going to be detecting for HSLA, you can find out exactly how to write your code to detect for that feature once Modernizr has been enabled. So I encourage you to check that out, there is lot more information on the site. Once you've downloaded the Modernizr library, I advise you obviously to keep one copy of it sort of in a central location, so you can use it on your projects. But you'll need to make a copy of it also in your Exercise Files. So if you go in the Chapter_01 folder, you'll find a folder for 01_05 and inside that you'll find a folder named _scripts.
We have transparency going on here. We have these boxes overlaying each other with drop shadows. So there is a lot of really cool visual styling here that relies on CSS3. Now if we preview this in Internet Explorer, this is Internet Explorer 8, which doesn't feature a lot of CSS3 support, you can see that particular property, HSLA, is not supported. So we get sort of this really ugly sort of un-styled content. That's not something I really want to present to my users, even though they're using Internet Explorer. I mean, maybe it's not their fault. So I'm going to switchback over to my code editor and in Dreamweaver the first thing I am going to do to use Modernizr is add a class tag to the HTML tag.
Since this selector uses HSLA, we'll detect for that. So right in front of the box1 selector, I'm going to type in .hsla because that is the class that's going to be added to my document. So I'm just running a nice descendent selector here. The only time this selector will ever be applied is if a browser or device supports HSLA. Now again, you can look back at the documentation on the Modernizr website to find out what all those class values are. Okay, so now I need to provide some alternate content just in case that's not supported. So I'm going to go ahead and copy this selector.
This is probably the fastest way to do this, and then paste it. I just need to replace the stuff that Internet Explorer doesn't support. So the first thing I'm going to do is get rid of this background color declaration and provide a hex value here. So, here I'm just going to provide a hex value of #51341a. I'm going with a darker color there. And same thing for the foreground color. I need to go ahead and get rid of the HSLA declaration and here do #e1d8b9.
Just sort of a khaki or sand color. Now the border I'm going to leave, but I still need to replace that color attribute. So the color on the border is going to be #cb7d20. These three properties that add the box shadow to our file aren't supported in Internet Explorer. So I'm just going to go ahead and get rid of them. Again, Modernizr is not going to add these features for the browser. It's simply going to detect for them. So we have to provide that alternate styling. Now I need to get rid of the HSLA in front of the box1, because that is the alternate selector.
So now I have two of these: one that's detecting for the support that feature, and one that's applied if the browser does not support it. I need to do the same thing with box2 and box3. So box2 is going to get the .hsla in front of it as well. So we made another descendent selector there. Then I'm going to copy and paste this. Now if you're wondering what is all the stuff you're seeing here? This is actually an exercise we're going to be doing a little bit later on. So all these features we're going to be covering and talking about. But I need to do the same thing here. The first thing, I'm going to move that to class attribute so that I don't forget that.
I certainly don't want to forget that. Then the next thing I want to do, just double-checking something here, is replace these values. Now we don't have multiple background support, so I'm going to go ahead and get rid of the second background declaration there. I'm also going to get rid of the HSL background color and replace that with background of #e1d8b9. There we go. Same thing for color. I'm going to get rid of the second color declaration. I'm going to give this a color value of #51341a.
Same thing for border here. I'm going to leave the 4 pixel solid border. Go ahead and replace the color and the color here is going to be #952. All right, the rest of the stuff, I can just go ahead and get rid of. All right, now I'm going to do something very similar to box3. First thing I'm going to do is HSLA, so that I have the support there. Then I'm going to once again copy and paste this. Make that a little bit easier. Now, box2 and box3 are exactly the same other than their position.
So I can literally go back up to this box2, copy the background color and border, and then in box3, just go ahead and get rid of all of this bottom stuff, right underneath padding, and then just paste that in, because this is the same. All right, so now I can go ahead and save this. Let's check and make sure that Modernizr is working. Again, if I preview this in Chrome, I still see that same rich styling. I still see all of my CSS3 styles coming through, but again, updating this in Internet Explorer, now I see my non-CSS3 styling.
So while it's not as visually compelling, it is readable and it does provide viewers with alternate styling that is at least acceptable if not visually stunning. Now using Modernizr is fast and easy. It only requires the addition of a couple of class selectors to your file. While it doesn't detect for every CSS3 feature, and I think it's important to point that out, it can make presenting fallback content to older or non-supporting browsers much easier and I encourage you to try it out in your own projects.
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.