Review: Practical CSS3

practical-css3

It’s been a while since I wrote anything here, as mentioned elsewhere, but I’ve just spent the day with Practical CSS3: Develop and Design, by the amazingly Wookiee–like Chris Mills.

Get off My Lawn

Aside from having my name in it, this is a pretty essential book. Aimed at developers that aren’t stupid but don’t know much CSS, this book will allow you to hit the ground running and annoy your fellow front–end developers as you stomp all over their turf — just make sure it’s not MY turf. I prefer to do fairly in–depth reviews, so here we go.

CHAPTER 1: Introduction to CSS3 and Modern Web Design

Back in the day, this web design lark was rather convoluted. If you wanted rounded corners, you used images. Chris reminds you of many of these old–fashioned traits in this introduction chapter, and then slowly introduces you to these new–fangled “spangly web innovations” that make everything so much easier. You get a nice little round–up of all the CSS3 Modules, a quick run through of things like vendor prefixes, pseudo classes, and a handy CSS Selectors Reference.

CHAPTER 2: Building a Solid Cross–Browser Template With HTML5 and JavaScript

If you use Dreamweaver or some other fancy IDE all day, you might not spend much time writing the basics; instead, clicking things that generate your code for you. In his second chapter, Chris walks you through a basic HTML5 template from the ground up. I’m a huge believer in hand–coding markup, so I think everyone should know how to do this without relying on tools. Once you know the how and why, then it’s okay to use things like Dreamweaver. Also covered here and the newer elements, coding styles, and even JS libraries to plug the gaps for the older browsers (commonly known as polyfills).

CHAPTER 3: Spicing up your Fonts and Text

One of the great things about Chris is that he’s A TRUE GOD OF METAL, and you can see the metal shine through in this chapter about web fonts. I don’t recall the last time I saw so many medieval fonts in one book. Amazing. You’re also going to learn some serious font knowledge and how to use them properly on your sites. Farewell, regular font stack.

CHAPTER 4: Enhancing Boxes with CSS3 Bling

BRING ON THE BLING! This is the stuff that most people seem to want to know about: rounded corners, box shadows, gradients… oh my! But as Chris knows you’re in the real world where people still use older browsers (i.e. IE), he introduces you to things like CSS3PIE to give those older version of IE some bling, too. The chapter finishes by showing you how to build a banner ad for a heavy metal band called DEAD HAMSTER. I mean, come on, how many books can you name that include ace things like that!?

CHAPTER 5: Animated Effects Using CSS3

In this post–iOS world, where Flash is a dirty word (thankfully!), CSS has upped its game and started moving things around a bit. In this chapter, Chris covers CSS Transforms, (2D and 3D) Transitions, and Animations. Just don’t use them all at once, please? There is a lot to get through with these examples, but with a dash of Monty Python, Chris makes things very easy to understand. Treat this chapter as a reference to which you return often, rather than something to read twice and expect it all to stick.

CHAPTER 6: Using CSS to Implement Icons

Icons are EVERYWHERE these days (especially at github.com, where they went a bit overboard). The Big Fella talks you through several methods of applying these little fellas in this chapter: from individual images, to sprites, and through to icon fonts.

CHAPTER 7: CSS3 Layout Chops

This chapter is a bit more cutting edge and covers Multi–Column Layouts, Flexbox, Grids, Regions, and Exclusions. You get to meet Bruce the Dungbeetle, too. I’d stayed away from even reading about Flexbox until this book, as it seemed to be all over the place. In fact, Chris mentions it changed dramatically as he was writing the book. Hopefully, it’s stabilised now. Chris walks you through Multi–Column Layouts, Flexbox, and Grids with some really easy to understand examples. I’d not heard about Regions and Exclusions before this book, but I wish they both worked TODAY. I think it’s madness that we’re only just getting these things in 2012. All we need now is browser support! Anyway, what an ace chapter. I got loads out of this one.

CHAPTER 8: Responsive and Adaptive Design

Aside from all the Bling of gradients and rounded corners, the next thing that gets most people excited at the moment is responsive design, which Chris covers here in a nice retro fashion. I’ve been doing the whole responsive thing for a while now, and yet I still managed to come away with a fair bit of new knowledge from this chapter. Great to see DEAD HAMSTER back from the grave, too.

CHAPTER 9: Styling HTML5 Media and Forms (Bonus downloadable PDF)

Another casualty of the post–iOS world: using Flash for online video delivery. This can get quite involved, depending on the level of codec support and file sizes you want to offer. Chris talks you through using the <audio> and <video> elements, and how to harness the controls with JavaScript. Finally, he talks you through some of the lesser–mentioned pseudo–classes, such as :required and :optional, :valid and :invalid, and :in–range and :out–of–range.

BONUS: The Practical CSS3: Develop and Design Cheat Sheet (Bonus downloadable PDF)

Aces High! Get this printed out and stuck on the wall next to your nerd station, stat!

Conclusion:

If you’re a back–end developer that wants to know a whole lot more about CSS, then buy this book. If you’re a front–end developer that fancies polishing up your skills and learning a few things you didn’t already know, then buy this book. And buy some heavy metal albums to listen to while you’re reading it. I can recommend the mighty Conquest of Steel.

Previously…

Where was I?

where-was-i

It happened again. I started the year with every intention of blogging often in 2012, but then it stopped. This time, however, it was due to illness. I was in bed for most of January and February, thanks to migraine. … Continue reading

CSS3 Enterprise

header

Using CSS3 in the workplace with minimal trouble & strife About this article Web Designer Magazine approached me to write a CSS3 article back in February 2011. Having spent the last few days making a client’s site looking good in … Continue reading

Learn to Code

learn-to-code-header

I came across this new resource earlier today: Make your New Year’s resolution learning to code. Sign up on Code Year to get a new interactive programming lesson sent to you each week and you’ll be building apps and web … Continue reading

2011 Came and Went

2011-header

I didn’t blog in 2011. Not once. It’s not like nothing happened; it was eventful. I got married. I wrote some stuff. I took my Wife to Paris. The Child left the little pond to become a Big Fish. I … Continue reading