The Mixed Bag of Tricks

And so we come to the last chapter of the book.

It's always sad when you reach the end of a book like this, especially on a subject as diverse as CSS3, but this is not the end. In fact, we couldn't be further away from the end—we’re still just beginning this adventure.

What I've shown you so far is only the tip of the iceberg. If you’re in any doubt, take a look at the main CSS index on the Mozilla Developer Network. I haven't even begun to explore CSS Layout or CSS Animation yet; both of these topics would easily take up a full book all of their own, as would an exhaustive rule/property followed by description list style text.

However, books in the Succinctly series are designed to be compact and easy-to-read with just enough information to get you in the right direction, and it's always a difficult decision to decide what to leave out.

As with any new technology, the best way to learn it is to play with it. Playing is an invaluable skill and learning tool that often gets lost in the modern-day IT industry with tight deadlines and tricked-out release schedules. What I hope I've presented here is enough information to at least prevent you from having to waste time understanding what it is you’re playing with.

For the rest of this chapter, I'm going to round things off with a few notable mentions of easy-to-understand CSS3 functionality that I felt deserve a mention.

CSS Columns

We've all been there, tearing our hair out trying to get the column widths just perfect so we can get a nice and balanced multiple-column layout in our page design.

Hours are spent tweaking, measuring, and tweaking again until we get an almost-perfect combination of rules and content. Then someone decides to drop an image in the sidebar that pushes things out by 1 pixel, and BAM! The entire layout crumbles into a smoldering heap.

Well this should no longer affect you, thanks to CSS columns.

Create a div with a very long paragraph of text, something like the following:

Code Listing 72: A nice, long paragraph of text inside a div element

If you render this, you should see something like:

99. A rather large paragraph with default styling

It's certainly not the nicest of layouts, but if you resize the display, it'll flow and word wrap correctly. If you wanted to split it up into three columns (like a newspaper might), you'd have a rather difficult job on your hands.

You'd almost definitely need to use JavaScript, because you'd need to work out how much text could fit into each box. Then you'd need to make sure the columns were resized appropriately, a task which calc() could help you with—but it's still a lot of work.

Instead, you could use the CSS3 columns rule. Add the following two rules to a style sheet and attach them to the previous HTML.

Code Listing 73: CSS rules to enable multi-column layout

Rendering this instantly takes care of the layout and the flow for you. Notice, however, that this rule still requires vendor prefixes, and while the general layout works, some of the extended rules in the module are either incomplete or not yet implemented. You can find the full details here.

If you have a compatible browser, then rendering the HTML in Code Listing 72 with the rules in Code Listing 73 should give you this:

100. Multi-column layout made easy

CSS Transformations

While transformations are yet another topic that could fill an entire book, there are some basics that are easy to experiment with. Create an HTML document and add the following markup and CSS rules to it:

Code Listing 74: HTML and CSS rules to create a beige, centered div

When rendered, this should give you the following:

101. It's just a standard, beige div

Now add the following extended rule to the style sheet and re-render the output:

Code Listing 75: Extended CSS rule to rotate our div

You should have a div rotated at 45 degrees:

102. Our div is now rotated.

As with CSS columns, there is still one case where vendor prefixes are needed, and that’s on Safari. IE, Firefox, and Chrome all work without needing prefixes in current versions.

You can also apply the following:

• scale(x,y)
• scalex(value)
• scaley(value)
• skewx(value)
• skewy(value)
• translate(x,y)
• translatex(value)
• translatey(value)

The actual definition of each function’s purpose can be found on MDN, but scale allows you to grow and shrink an element, skew allows you slope, an element and translate allows you to move an element. There are others that allow you to produce all kinds of great effects, and many of these properties can be animated, too, allowing even more to be achieved.

There's still more, such as multiple backgrounds, layered elements, 3D transforms, flex boxes, CSS shapes, and the list goes on.

For now, however, I hope you've learned a little of the power you now hold in your browser. When this is combined with the new element types, layout possibilities, and JavaScript API's available in the full HTML 5 spec, it's easy to see how far the HTML platform has progressed.

It wasn’t that long ago that most websites were still fairly static and black and white; now we’re starting to see some truly amazing visual affects being made possible, with developers every day finding new and engaging ways of bending this functionality.

It's a platform that's only going to get better, and one that's destined to become the universal user interface for most software. CSS3 is something that every web developer needs to learn both now and for the future—if you don't, then you risk getting left behind.