CSS Instant Results

5 comments | Posted: 13 April 06 in Books, by Nathan Smith

CSS Instant Results This book promises, and it delivers. I was a bit skeptical about the title, because there are so many quick-fix products available, few of which actually work. However, CSS Instant Results is true to its name, offering solutions a variety of common web design situations. Not only does this book address many different problems, it also shows you several distinctive approaches to tackle each one. I especially liked that all the source code came included on a CD. This was a welcome change from the typical “download code at this URL” approach.

The author, Richard York also wrote Beginning CSS for Wrox Publishing, so when this guy talks about CSS, you know that he is speaking with authority. Meaning, to be approved to write another book on the same topic, by the same publisher, reflects that one knows a great deal about that particular subject. His explanations are thorough, well written and methodically straight forward.

My one and only qualm would be his use of XHTML 1.0 Transitional for most of the code examples. I am of the same opinion as Roger Johansson, that transitional doctypes should not be a final goal, but that one should “transition” from that doctype to a strict one instead. Really the only example given in this book that would require Transitional comes where he uses an <iframe> for a tab simulation. For the most part, the code translates to 1.0 Strict just fine.

That aside, the actual CSS addressed is top-notch. Here is a run-down of each of the topics covered: Tab-based navigation, Multi-column layouts, Dynamic drop-down menus (2 approaches), Web-based slideshow, Custom borders and rounded corners, Webmail interface, Input forms, File viewer, and Web-based calendar. Allow me to expound upon what I liked about each of those chapters.

In the tab-based navigation chapter, he describes how to do a two-stated background roll-over using images and CSS. He also shows how to create “liquid” tabs, that expand to fit the size of a word therein. For instance, this would allow you to use a longer phrase like Employment instead of Jobs, and still be able to reuse the same code and graphics.

In the multi-column layout chapter, he describes several ways to tackle the liquid 3-column layout. This has been affectionately dubbed the Holy Grail by web designers, because many have lost their lives in search of the perfect layout (okay, maybe not died, but shed tears). This was a great chapter, because it condensed many of the techniques seen at Layout Gala, explaining why a particular method works in a given context, and when to use each.

He then moves on to cover pure CSS drop-down menu methods, with a tip of the hat to Eric Meyer for the original ideas. This doesn’t work in IE6, so he shows the necessary CSS hacks and JavaScript wizardry in order to trick IE into compliance. Throughout this book, the famous IE7 JavaScript is used and referenced, originally concieved by Dean Edwards. Essentially, it forces IE6 to adhere to web standards roughly the same as Firefox, Safari and other good browsers. It’s a shame such a fix doesn’t exist for Opera’s quirkiness.

I digress. The web-based slideshow chapter is really cool, and you may have seen this in use at various web technology conferences. Basically, instead of using a proprietary program like PowerPoint or Keynote, it uses a full-screen browser view to simulate a slide based presentation. Similar implimentation has been done by Eric Meyer, with a later Ajax-ified version by Robert Nyman.

The custom borders and rounded corners topic was also quite applicable. We all know the trick of having the bottom portion of a rounded box in a container, and then giving some other inside element the top part. York shows you how to have rounded corners in a cross-browser, liquid / flexible layout scenario. This is a very handy and universally re-usable technique.

The last three chapters of this book deal with skinning specific interfaces, modeled loosely after the look and feel of Mac OSX. He shows how to emulate or re-create the functionality of email client elements, commonly seen in Microsoft Outlook or Thunderbird. He also makes a monthly / yearly calendar. What I found the coolest of all the examples though, was the sneak-peek of his Hierophant project. In his own words:

[It is] an open source PHP-driven framework and content management system. In case you’re curious, the term “Hierophant” refers to ancient Greek priests, who are said to have had the ability to make the mysterious or esoteric easy to understand. I chose this name because I wanted to write a complex PHP framework that made complex and sometimes difficult tasks easy for the average user.

While the system is not yet available for use, he does give away all the code necessary to write the front-end of it. I tell you, just from having glimpsed at the interface, I can’t wait to see how the whole thing will turn out. It looks to take the functionality of a typical operating system, and apply this to browsing one’s own available directories and files online, via a web browser. If you’re having trouble visualizing my description, check out this screenshot.

I guess that about wraps up this review. If you are looking for some hands-on, practical code examples for how to fully harness the versatility of CSS in your own upcoming projects, then put this on your list of books to consider. In a nutshell, this is a book I wish had existed when I was first learning CSS.

Discuss This Topic

  1. 1 Yannick

    Sounds good Nathan. Would you say it would still be a good buy for those of us who have already read Web Standards Solutions or CSS Mastery ?

     
  2. 2 Nathan Smith

    Yannick: While there is probably some overlap in the material, I still think that CSS Instant Results is a pretty solid book in its own right.

     
  3. 3 Chris Harrison

    Definitely going to look into this one. I think there’s a lot of overlap on a lot of the titles covering CSS… but what I’ve found is that certain books work better for certain people… I like having a wide selection on hand for my coworkers… so that they can go through books that best match their learning style.

     
  4. 4 Richard York

    First of all, thanks for such a flattering review. I appreciate the scope and depth with which you reviewed my book.

    I have to take issue with one statement though, “He also has a few name attributes on various elements. He repeats the same id for each, rendering name redundant.”

    Unfortunately, browsers only submit fields to a web server who have a valid name attribute, and clicking a label with a “for” attribute will only activate the corresponding field with the same id attribute, so while it may seem redundant to include both, it’s not. Here’s a live example on Peter-Paul Koch’s Quirks Mode website.

    http://www.quirksmode.org/oddsandends/forms.html

    It probably would have helped to have mentioned that in the book, otherwise, who’s to know why they are both there?

    Thanks again for the review!

     
  5. 5 Nathan Smith

    Richard: Thanks for the clarification. The review has been edited accordingly. I guess that’s why you’re the one writing the book, and I’m just a reader! You’re welcome for the review, by the way. Sorry I didn’t do the book more justice.

     

Comments closed after 2 weeks.