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.
Chances are if you're watching this title one of the questions about CSS3 at the very top of your list is, can I use it now? Well, the short answer is yes, you can. Just like any emerging technology, however, you need to develop a strategy for deploying CSS3 on your sites that accounts for non-supported browsers or devices. By now you've probably come to terms with the fact that websites don't look exactly the same across different devices and browsers.
If you've been designing sites for a while, you probably already have a strategy in place for dealing with browser inconsistencies. In most cases, your existing workflow will work just fine for integrating CSS3 into your sites. However, there are some specific considerations that you need to be aware of when dealing with CSS3. So let's take a moment to discuss strategies for introducing it into your sites. First, make sure that using CSS3 makes sense for the site itself.
Now, occasionally we get so caught up in using the latest features and technology that we lose sight of the needs of our users. Before using any of the new capabilities of CSS3, make sure that using them actually enhances your design. Once you've settled on using CSS3, it's best to approach it as a means of enhancing the design of your site rather than driving it. Make sure you have a solid layout and design, without relying on CSS3 techniques to make it work. Then gradually enhance your design with CSS3 to present a much more robust experience to those using supporting devices.
This will allow you to present functional designs to your users regardless of the device they are using. This approach, called progressive enhancement, is a common way of dealing with device inconsistencies for both styling and behavior and it's a great foundation for any CSS3 deployment strategy. It's worth mentioning here as well that if you're providing fallback content for non-supporting devices, make sure that the absence of CSS3 features doesn't actually harm the design.
Features like multiple backgrounds, transparency, and drop-shadows can cause content to either look odd when absent or even cause readability issues with text. In those cases, make sure that alternate styles are presented that ensure the clarity of your content. Since many of the workarounds for providing CSS3 support are time-consuming, result in larger and slower pages, and can cause rendering errors if not executed properly, it's a good idea to think about whether the extra effort is actually worth it.
In many cases, simply providing those users with a more basic functional site is the better solution. Any current discussion on utilizing CSS3 would be incomplete without dealing with Internet Explorer. So what's the deal? Can you use CSS3 with Internet Explorer? While Firefox, Opera, Safari and Chrome, have all been gradually adding support for CSS3 to their browsers, the same is not true for IE. Until version 9 is released, CSS3 for the most part will not work in Internet Explorer.
That alone is enough for some designers to ignore it and frankly that's a shame. One browser's shortcomings should not prevent you from enhancing the design of your sites. When dealing with Internet Explorer specifically, you have a few choices in how to progressively enhance your designs. First, you could simply write CSS 2.1 base styling and let IE ignore the selectors or properties it doesn't support. For more complex designs or for cases where the lack of CSS3 styling would cause rendering issues in IE, you could pass alternate style sheets for Internet Explorer to use through the use of conditional comments.
So I would encourage you to go out and explore its capabilities. If you want to learn more, stick around. We'll explore Modernizer in a little bit more detail later on in this title. Without a doubt, CSS3 gives designers an exciting set of features to use with styling page content. However, its evolving nature and inconsistent support requires you to have a solid strategy for its use.
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.