CSS3 enables responsive designs and more

If you've been in the web design trade from the mid-1990s, you'll remember that back then, all designs were table-based and the styling was entwined with content. Cascading Style Sheets (CSS ) were introduced as a way of separating design from the content. It took some time for web designers to step into the bold new world of CSS-based design but sites such as http://www.csszengarden.com paved the way, showing just what could be achieved, visually, with a CSS-based design. Since then, CSS has become the standard way of defining the presentational layer of a web page, with CSS 2.1 being the current ratified version of the CSS specification. CSS3 has yet to be fully ratified but that doesn't mean that large portions of it aren't fully usable today. The W3C working group note at http://www.w3.org/TR/CSS/#css3 is as follows:

CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification. The CSS Working Group intends that the new CSS modules will not contradict the CSS2.1 specification: only that they will add functionality and refine definitions.

Much of the draft W3C specification reads (by necessity) like legalese. In simplistic terms, what matters to us is that CSS3 is built as a set of 'bolt-on' modules rather than a single consolidated whole. As CSS 2.1 is at the core, none of the techniques you use with CSS 2.1 today are abandoned. Instead, certain, more mature modules (as not all modules are at the same state of readiness) of CSS3 can be actively used today, without waiting for the entire specification to be ratified.

The bottom line—CSS3 won't break anything!

Perhaps the most empowering point of note is that there is no penalty in older browsers for including properties that they do not understand. Older browsers (including Internet Explorer 6, 7, and 8) will happily skip over CSS3 properties that they can't process. This gives us the ability to progressively enhance areas of a design for the better-equipped browsers, whilst ensuring a reasonable fall back for the older ones.

How can CSS3 solve everyday design problems?

Let's consider a common design hurdle we all face on most projects—to create a rounded corner on a screen element, perhaps for a tabbed interface or corner of a boxed element such as a header for example. Using CSS 2.1 this could be achieved by using a sliding doors technique (http://www.alistapart.com/articles/slidingdoors/), whereby one background image sits behind another. The HTML could look as simple as this:

<a href="#"><span>Box Title</span></a>

We add a rounded background to the <a> element by creating two images. The first, called headerLeft.png , would be 15 pixels wide and 40 pixels high and the second, called headerRight.png in this example, would be made wider than we would ever anticipate the header being (280 pixels, here). Each would be one half of the "sliding door". As one element grows (the text within our <span> tags), the background fills the space creating a somewhat future proof rounded corner solution. Here is how the CSS in this example looks:

a {
  display: block;
  height: 40px;
  float: left;
  font-size: 1.2em;
  padding-right: 0.8em;
  background: url(images/headerRight.png) no-repeat scroll top right;
}
a span {
  background: url(images/headerLeft.png) no-repeat;
  display: block;
  line-height: 40px;
  padding-left: 0.8em;
}

The following screenshot shows how it looks in Google's Chrome (v16):

It solves the design problem but requires additional markup (semantically the <span> element has no value) and two additional HTTP requests (for the images) to the server to create the onscreen effect. Now, we could combine the two images into one to create a sprite and then use the background-position: CSS property to shift it around but even with the bandwidth economies that provides, it's still an inflexible solution. What happens if the client decides they want the corners to have a tighter radius? Or a different color? We'd need to re-make our image(s) again. Sadly, until CSS3, this has been the reality of the situation we, as frontend designers and developers have found ourselves in. Ladies and gentleman, I've seen the future, and it's CSS3 shaped! Let's revise the HTML to be only:

<a href="#">Box Title</a>

And, to begin with, the CSS can become the following:

a {
  float: left;
  height: 40px;
  line-height: 40px;
  padding-left: 0.8em;
  padding-right: 0.8em; 
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-image: url(images/headerTiny.png);
  background-repeat: repeat-x;
}

The following screenshot shows how the CSS3 version of the button looks in the same browser (Chrome v16):

In this example, the two previous images have been substituted for a single 1 pixel-wide image that is repeated along the x-axis. Although the image is only 1 pixel wide, it is 40 pixels high, hopefully higher than any contents that will be inserted. When using an image as a background, it's always necessary to "overshoot" the height, in anticipation of content overflowing, which sadly makes for bigger images and greater bandwidth requirements. Here, however, unlike the entirely image-based solution, CSS3 takes care of the corners for us with the border-radius and related properties. Client wants the corners to be a little rounder, say 12 pixels? No problem, just amend the border-radius property to 12px and your work is done. The CSS3 rounded corners property is fast, flexible, and supported in Safari (v3+), Firefox (v1+), Opera (v10.5+), Chrome (v3+), and Internet Explorer 9. Microsoft are so excited about IE 9's support of the feature that (I hope you feel my slight sarcasm seeping through here) they have even designed an interactive page demonstrating the various effects that can be achieved with the border-radius property . View this demonstration at the following URL:

http://ie.microsoft.com/testdrive/html5/borderradius/default.html

CSS3 can take things further by eliminating the need for a gradient background image by producing the effect in the browser instead. This property isn't as well supported but with something along the lines of linear-gradient(yellow, blue), the background of any element can enjoy a CSS3 generated gradient.

The gradient can be specified in solid colors, traditional HEX values (for example, #BFBFBF) or using one of the CSS3 color modes (more on these in Chapter 5, CSS3: Selectors, Typography, and Color Modes). If you're happy for users of older browsers to see a solid background instead of a gradient (as opposed to nothing), a CSS stack something like this would provide a solid color in the event of the browser being unable to handle the gradient:

background-color: #42c264;  
background-image: -webkit-linear-gradient(#4fec50, #42c264);
background-image: -moz-linear-gradient(#4fec50, #42c264);
background-image: -o-linear-gradient(#4fec50, #42c264);
background-image: -ms-linear-gradient(#4fec50, #42c264);
background-image: -chrome-linear-gradient(#4fec50, #42c264);
background-image: linear-gradient(#4fec50, #42c264);

The linear-gradient property instructs the browser to start with the first color value (#4fec50, in this example) and move to the second color value (#42c264).

You'll notice that in the CSS code, the background-image linear-gradient property has been repeated with a number of prefixes; for example, -webkit-. This allows different browser vendors (for example, -moz- for Mozilla Firefox, -ms- for Microsoft Internet Explorer, and so on) to experiment with their own implementation of the new CSS3 properties before introducing the finished article, at which point the prefixes are unneeded. As stylesheets by their nature cascade, we place the un-prefixed version last, meaning it will supersede the earlier declarations if available.