James Williamson |
Wednesday, November 17, 2010
Chances are, if you are a web designer or developer, you’ve at least heard of CSS3. If you haven’t had the time to dive into the modules yourself, you’re no doubt wondering if it’s ready to use now. Well, the short answer is yes, it is! There is, of course, more to it than that. As with any emerging technology, you need to develop a strategy for deploying CSS3 on your sites that accounts for either inconsistent or non-existent support between browsers or devices.
By now, you’ve probably come to terms with the fact that web sites 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 for dealing with these will work just fine when adding CSS3 to your sites. However, there are some specific considerations you need to be aware of when dealing with CSS3, so let’s take a moment to discuss strategies for introducing CSS3 into your sites.
First, make sure that using CSS3 makes sense for your site. 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 is a great foundation for any CSS3 deployment strategy. It’s worth mentioning here as well that if you are providing fallback content for non-supported devices, make sure the absence of CSS3 features doesn’t harm your design. Features like multiple backgrounds, transparency, and drop shadows can cause content to either look odd when absent or cause readability issues with your text. In those cases, make sure that alternate styles are presented that ensure the clarity of your content.
In learning about CSS3, you are bound to come across many solutions for enforcing or adding support for CSS3 features in older browsers. While there are some great solutions out there, keep in mind that many of theses workarounds are time consuming, result in larger and slower pages, and can cause rendering errors if not executed properly. Make sure that the extra effort is 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. While Firefox, Opera, Safari, and Chrome have all been gradually adding support for CSS3 to their browsers, the same is not true for Internet Explorer. Until version 9 is released, many of the new features in CSS3 will not work in Internet Explorer at all. That alone is enough for some designers to ignore CSS3, 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, you have a few choices in how to progressively enhance your designs. First, you can simply write CSS 2.1 base styling and let it 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, you could pass alternate style sheets to Internet Explorer through the use of conditional comments. Conditional comments are a widely used technique for addressing the specific styling needs of Explorer, and are a great way of overwriting unsupported CSS3 styling.
CSS3 gives designers an exciting set of new and enhanced features to use when styling page content. However, it’s evolving nature and inconsistent support requires you to have a solid strategy for using it. Be sure to carefully plan which features you want to use, and how you are going to account for this styling in unsupported devices. Having such a strategy in place will allow you to enhance your user experience in modern browsers while still providing solid functionality to older browsers and devices. Keep an eye out for our upcoming CSS3 course to learn more about these techniques, and many of the new features and capabilities in CSS3. In the meantime, the accompanying video from my HTML5 First Look course gives a good basic overview of CSS3.
Tags: CSS3, HTML5, James Williamson
Check out these popular Web courses.
Thanks for signing up.
We’ll send you a confirmation email shortly.
Sign up and receive emails about lynda.com and our online training library:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.