Table of Contents for

CSS Secrets

Foreword

Ah, the good old days. Back in the previous millennium, we had just two CSS-capable browsers, and what they did was a fairly limited subset of a fairly limited specification, so you could fairly easily keep a complete map of what worked and what didn’t in your head. That map included the bugs in each implementation, as they had many errors and oversights, some of them verging on the comical. Heck, some bugs were so fundamental that they made the browsers’ layout behavior completely incompatible, forcing us to come up with a whole army of parser-bug-exploiting hacks just to work around the differences!

Wait a minute. The old days were horrible. Glad we’re done with all that!

Things really have gotten so much better in the last several years, CSS-wise. Browsers have, for the most part, converged on compatibility, and where they are incompatible, it’s nearly always because one browser doesn’t support a feature that another does, as opposed to both of them trying to support the same thing differently, and usually badly. The specifications have pushed capabilities forward even as they’ve added features that recreate the convoluted tricks of old in much simpler, more compact ways. CSS has far more features and far more power than ever before—but, as we all know, with great power comes great complexity. It’s not even a case of intentional complexity: when you combine enough working parts, no matter how simple each may be, interesting things can and do emerge. (For more on this topic, see The LEGO Movie.)

But it’s exactly that unintended complexity that gives CSS the ability to surprise us with emergent features we never expected, or even planned. There are secrets to be found in the intersections of properties and the bending of values. You can carve corners with gradients, animate elements, increase clickable areas, even create pie charts…and so much more. CSS has capabilities that we only dreamed of back when I was but a lad, possibilities beyond anything we imagined. It’s added abilities that I once thought could never be expressed in a compact, human-readable manner—animations, to pick one example. It’s advanced far enough that I’m confident there are many, many secrets yet to be discovered. Perhaps you’ll discover some of them.

Until that day arrives, there are plenty of fascinating techniques that have already been unearthed, and few have done more than Lea Verou to find and share them with the world. From her blog posts to her open source contributions to her dynamic, interactive talks all over the world, Lea has amassed a formidable reserve of CSS knowledge. This book is a beautiful distillation of that knowledge. You now possess a guide to some of the most interesting, surprising, and useful techniques that CSS has yielded, a guide compiled by one of the brightest minds in the field. What Lea has prepared for you in these pages will enrich, delight, and—yes—even astonish.

Go forth, learn well, and let these discoveries be secrets no more.

— Eric A. Meyer