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]
- <div class="outer">
- <p>This is some text before a float - <span>This is the float</span> - and this is some text that follows the float. If you check in Opera you will see that the float stays on the same line as the text that precedes it as long as there is enough available space. </p>
- </div>
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:
- *{margin:0;padding:0}
- ul{list-style:none;}
- .outer{
- width:40%;
- border:1px solid #000;
- padding:10px;
- overflow:auto;
- }
- li{
- border-bottom:1px dotted #000;
- margin:0 0 1em 0
- }
- span{float:right;}
- <ul class="outer">
- <li>Left<span>Right</span></li>
- <li>Left<span>Right</span></li>
- <li>Left<span>Right</span></li>
- </ul>
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.
- <ul class="outer">
- <li><span>Right</span>Left</li>
- <li><span>Right</span>Left</li>
- <li><span>Right</span>Left</li>
- </ul>
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.
March 5th, 2008 at 1:46 pm
Just got my copy this morning, Paul. The UPS guy just HAD to wake me up in order to deliver it too.
March 5th, 2008 at 2:22 pm
Hi Dan,
That arrived quickly. Hope you didn’t throw it back at the UPS guy for waking you up. 🙂
March 5th, 2008 at 3:24 pm
Yeah, good job on the reference Paul. 🙂 Interesting about the float too.
March 5th, 2008 at 3:30 pm
Great to see this finally out in the wild Paul – congrats to you and Tommy for a superb reference book : )
March 5th, 2008 at 3:31 pm
Thanks John and thanks for your contributions on the live reference site also – much appreciated 🙂
March 5th, 2008 at 4:30 pm
Well, that would explain the crumple on one of the corner covers…
Nah, I’m just kidding (about the corner). The book is smaller than I thought it would be though (actual size and shape, not page count). It’s about the size of one of the “Visual Quickstart Guide” series books. I was expecting something about 10-15% larger.
March 6th, 2008 at 3:40 am
Thanks Dave 🙂
Dan, I think Sitepoint were trying to keep the book smaller (size wise) so that it would be handier to carry around and keep closed.
I found some of the bigger size books awkward to use as they take more desk space and harder to look at while you are working on the computer etc.
March 6th, 2008 at 10:48 am
Darn it, my copy still hasn’t arrived yet 🙁
March 6th, 2008 at 12:16 pm
keep “close” – I meant to say. You can keep it closed but it won’t be much use that way 🙂
March 6th, 2008 at 9:18 pm
Yeah, I know Paul. I was talking to Shayne Tilley about it the other day. 🙂
March 11th, 2008 at 2:24 pm
I’m really enjoying to so far Paul, nice job. Definitely two of the great minds in the field. I’m happy to see you guys are getting your due.
March 12th, 2008 at 6:01 am
Thanks Sara:)
March 18th, 2008 at 8:05 pm
I picked up this book, it was great, however I am more of a visual learner. I enjoy the online tutorials such as lynda.
March 19th, 2008 at 3:21 am
Hi 999 thanks for your comments 🙂
The book is not meant to be a tutorial but a complete CSS reference which you can refer to time and again to find out exactly how things are supposed to work. I find I refer to it daily (even though I wrote half of it) as there are just too many things to keep in your head at all times.
It will work hand in hand with other tutorials as you can look up the exact details of the properties you are using and gain a fuller understanding of what’s going on.
The more you get into CSS the more useful the book will become and is the sort of book you should keep next to the computer so you can quickly look up a property to see the correct values and behaviors.
The book will provide you with the bricks to build your layouts but other tutorials will show you how to stack those bricks to make a house:)
March 23rd, 2013 at 12:43 am
I think I’m happy to see you guys are getting your due.
March 23rd, 2013 at 12:58 am
I cerebrate Sitepoint were trying to rest the book smaller (size politic) so that it would be handier to disseminate around and keep blocked.
I plant both of the bigger filler books gawky to use as they bear many desk space and harder to see at patch you are excavation on the machine etc.