This past year I have been working on a CSS reference book along with Tommy Olsson and so I am pleased to announce that the book has just been released by Sitepoint.

Therefore I am taking this opportunity today to plug it a little as I am quite proud of the result as it took a lot of research and hard work. I believe Tommy and I make a good team because of Tommy’s extensive technical knowledge and astute understanding of the finer details of the specs (something that often goes above my head), and my practical knowledge on a day to day basis with how CSS works in the real world.

Who is the book for?

The book is mainly a reference book — it’s the sort of book you should keep close to your computer so you can look things up easily when you need to know exactly how something should work and what problems you may expect when using it. There are compatibility tables for the most common browsers and the book is formatted in an easy to use fashion; oh, and it looks great also.

Most competent CSS designers will already know how the most common properties work but I can guarantee that you will find something useful in the book no matter what your level. It is not a tutorial book and it is not aimed at beginners, nor is it a “how to” book but should be used as a reference and an aid to a deeper understanding of CSS. If you have a working knowledge of CSS then you will possibly get more out of this book initially but beginners should also keep a copy handy that they can grow into.

Advanced CSSers will already know many of the concepts and perhaps also understand how to decipher the W3C CSS specifications better than others, but I can tell you that even though I wrote half the book I find myself referring to the book itself rather than the W3C specs to check up on the finer details when my memory fails me (it happens to all of us as we get older).

Many bugs and browser peculiarities are mentioned but it is not an exhaustive list of every known bug as that would make it unwieldy and was not the real purpose of the book.

I learned quite a few things during my research for the book and even things I thought I knew inside out would often surprise me when looking at the finer detail of how they work. For example, it is often stated that floats must come first in the HTML to allow the content that follows to wrap around the float. This is not 100% true for all preceding content but only for preceding block level content.

If a float has an immediately preceding line box then the specs say that User Agents should keep the float on the same line as the line-box as long as there is enough room to fit. This might be better explained with an example.

[CSS]
*{margin:0;padding:0}
.outer{
width:40%;
border:1px solid #000;
padding:10px;
overflow:auto;
}
span{
float:right;
background:red;
width:100px;
height:100px;
}

[/CSS]

As you can see from the code above there is some preceding text on the same line before the float. According to the specs the float should float to the right but still stay on the same line as the preceding line-box. If we run the code in the latest versions of Opera and Firefox you will see that Opera in fact will render this correctly but Firefox gets it wrong.

Figure 1

As you can see in Figure 1 above Opera displays the float on the same line as the preceding text correctly. Firefox gets it wrong, as would IE (Safari will also render this correctly).

Assuming all browsers rendered this correctly this would then allow us to apply mark up as follows:

The result is seen in Figure 2 below.
Figure 2

To achieve the same effect that Opera is showing we would have to re-arrange the HTML for other browsers so that the float comes before the inline content as follows.

Figure 3
The result is seen in Figure 3 below.

Although it’s only a small change it really shouldn’t have been necessary if the User Agents followed the specs correctly. Also the above HTML makes less semantic sense with the words left and right being juxtaposed. There are of course other ways to have done this and the first word could have been floated left instead so its not a great issue but is still interesting to note and understand.

I hope that this has whetted your appetite and should you wish to check it out, why not visit the online reference where you can contribute and make this a growing resource for CSS.