Learn it fast with expert-taught software and skills training at lynda.com. Start your free trial

By James Williamson | Wednesday, November 17, 2010

Can you use CSS3 now?

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.

Another way to use CSS3 with Internet Explorer is to use the Progressive Internet Explorer or CSS3 PIE library. PIE is a small javascript library that adds limited CSS3 support to older versions of Internet Explorer. It’s free, easy to use, lightweight, and gives you a way to use CSS3 features such as border-radius, box-shadow, and gradients through a single line of code.

I also recommend taking a look at using Modernizr. Modernizr is free, small javascript library that provides detection support for a wide range of next generation web capabilities. Not surprisingly, CSS3 is among them. Although Modernizr won’t add capabilities to non-supporting browsers, it does make it much easier to provide fallback content to these browsers and devices. What’s more, it adds detection capabilities for HTML5 as well, making it a smart choice for anyone wanting to start working in HTML5 and CSS3.

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.

By James Williamson | Monday, July 12, 2010

HTML5 training: Taking a first look at HTML5

In all my years of teaching and writing about web design, I don’t think I’ve ever seen a topic explode in terms of interest level and passion as quickly as I have with HTML5. Despite the huge amount of interest in the topic, there is still a great deal of confusion about what HTML5 is and how to go about learning it. In my opinion, one of the best ways to approach HTML5 is by first comparing it to HTML 4 and learning the differences. That way, it’s easier to understand exactly what is changing in regards to HTML and cut through some of the hype and clutter that is currently surrounding the topic.

Although HTML5 represents an ambitious step forward in the evolution of HTML, it is largely a revised version of HTML 4. If you are comfortable writing HTML4, you should find yourself quite comfortable with the majority of the HTML5 specification. With that in mind, let’s take a closer look at the differences between HTML5 and HTML 4.

First, it’s important to note that the HTML5 specification is designed not just to replace HTML 4, but also the XHTML 1.0 and DOM Level 2 specifications. That means the serialization of HTML to XML and the DOM specification are now contained inside the HTML5 specification, instead of belonging to separate specs. It also contains detailed parsing rules that are designed to improve the interoperability of systems that use HTML documents. As such, the HTML5 Specification is much larger than HTML 4 and covers a lot more ground.

One of the first places you’ll notice a difference in writing HTML5 documents is in the doctype and character encoding. In the past, based on the version of HTML they were using authors have had to use long, arcane doctypes to trigger standards mode in modern browsers. You may recognize this code, for example:Now, rather than having to deal with multiple complex doctypes, you simply use a single doctype that declares the document as an HTML file. Since HTML is no longer SGML-based, no DTD is required. Character encoding is likewise simplified. All that is required now is a meta tag with a charset attribute. Here’s what the above code looks like in HTML5:

Much simpler!

There are, of course, new elements in HTML5 that are not part of HTML 4. These new elements assist with page structure and code semantics, allow embedded content, and include new phrasing tags that help add additional meaning to content within the page. By now, you’ve probably heard of new elements such as the section, article, and headervideo and audio

Forms undergo a dramatic update in HTML5 as well. Much of the work done on the Web Forms 2.0 specification has been added to the HTML5 spec. The result of this is new form controls and input types that allow you to create more powerful forms and more compelling user experiences. New form elements include date pickers, color pickers, and numeric steppers. The input element is now much more versatile, with new input types such as url, email, and search that will make it easier to control the presentation and behavior of form content both on the web and within mobile applications. It’s worth noting that HTML5 also adds support for the PUT and DELETE form methods, making it easier to submit data to a wider array of applications.

By far the addition to HTML5 that is getting the most attention is the introduction of several new API’s that are designed to make developing web applications easier across multiple devices and user agents. These APIs include the much talked about video and audio API, an API for building offline applications, an API for editing page content, one that controls Drag and Drop functionality, another that focuses on history, and one that controls Application protocols and media types. Other API’s like Geolocation, Web Sockets, and Web Messaging are associated with HTML5, but are defined within their own specifications.

Those are a few of the highlights of the differences between HTML5 and HTML 4, and should give you a good idea of how HTML5 will change the way that web sites and web applications are authored. Sign up for the lynda.com Online Training Library® New Releases announcement so you’ll know when my HTML5 tutorials are available.

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to our subscription library courses
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Start your free trial

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:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.