Author: Dan Cederholm
Publisher: A Book Apart
Last year, I reviewed a book on HTML5, written by Jeremy Keith and published by A Book Apart (closely associated with A List Apart and An Event Apart). ABA is developing a series of books related to web design and development; each targets a particular topic, and focuses on the most important or prevalent aspects of the topic material. This got off to a good start with the HTML5 book, the first in the series. Since then, ABA released a new book focused on CSS3, which is the focus of this review.
Enter CSS3 for Web Designers. This book introduces some interesting uses of CSS3, and the application of those capabilities to modern browsers in a variety of ways.
Dan Cederholm may well be the most qualified person to write a book on CSS3, even a brief one. He has already written three other books on CSS, and is well-known in the web industry. That said, without even opening this book, it helps to know the reader will be in good hands.
The book has a supporting website, where you can see some of the effects in action, and download the sample code.
In the following sections, I’ll briefly summarize the contents of each of the book’s chapters. Hopefully I will do it justice in providing a clear picture of what is contained within!
Using CSS3 Today
The book starts with a brief history of CSS, leading up to the current state of CSS3. It lists the uses of CSS, and the benefits it provides. Next is a list of CSS3 properties that are usable now; each of these items comes with a description, a usage sample, and an outline of browser compatibility. It’s important to note that the compatibility listings as of when the book was published – the values will have since changed. Also included is the use of vendor-specific prefixes; these help to ease the process of using CSS3 in browsers that don’t yet support the standard properties, but have experimental support in place.
Understanding CSS3 Transitions
The information provided here helps to set the stage, as transition effects are used throughout the following chapters.
Hover-Crafting with CSS3
text-shadow, RGBA colour, and transitions. He also shows the use of
opacity in a separate example.
Transforming the Message
A long-standing pain point of web design hass been the inability to use multiple background images for a single element. The workaround was to use nested elements, usually empty
div elements, each with a background image. This was frequently applied to give a block element rounded corners, for example. Never mind that CSS3 also supports rounded corners, there are other cases where having multiple background images for one element can be useful. One such case is the parallax effect, as seen on the Silverback website (resize the browser window to see the vines move).
Dan shows the use of the updated
background property; previously the property would only accept one background image, but now it can take multiple images, each with their own positioning. This effect is demonstrated on the book’s website, linked above – it is the starry background, which is actually made up of four images layered on the
Form elements normally look pretty plain with the default styles. They have long been the target of cosmetic customization, from background colour to borders. CSS3 provides for rounded corners, and gradient backgrounds, and text and box shadows, which Dan demonstrates. The result is a set of form elements that look very different from the default renderings.
This book is not anywhere near comprehensive; if it were, it would be a much thicker tome, and probably much less appealing. Instead, the focus is bang for the buck; the techniques shared are of immediate value, and can be used today. Granted, there is the issue of compatibility (*cough*Internet Explorer*cough*), but the author takes pains to provide for graceful degradation. This is important, as web developers cannot wait for the CSS3 spec to be complete and widely supported; rather, some bits can be widely used now. That is the focus of CFWD.
As mentioned, the author emphasizes the use of graceful degradation to ensure that noncompliant browsers get a reasonable experience, if not a perfect one. This is achieved with the provision of browser-specific property prefixes; future-proofing is provided by use of the standard, un-prefixed property as well.
The bottom line: CSS3 is an evolving standard, with certain portions that are usable now in most browsers. CFWD provides concise coverage of these features, and shows how to use them in creative ways in a variety of browsers. It’s not comprehensive, but it makes a useful reference when checking CSS syntax for maximum cross-browser compatibility.