The CSS Anthology 169
| The CSS Anthology: 101 Essential Tips, Tricks & Hacks | |
| author | Rachel Andrew |
| pages | 380 |
| publisher | SitePoint |
| rating | 8 |
| reviewer | Bruce Lawson |
| ISBN | 0957921888 |
| summary | Structured Q&A guide for CSS beginners |
Author's credentials
Andrew is a long-term member of the Web Standards Project (WaSP) and programmer, technical project manager, technical team leader/senior developer and webmaster, according to her own bio.
Who's the book for?
The book's subtitle is somewhat misleading. There probably are 101 tips'n'tricks (I didn't count) but it's not the random miscellany that it implies. The information is structured so that a n00b could become proficient by reading the book from start to finish (I tested this out on a colleague). The tips'n'tricks structure does allow you to find what you're looking for in a hurry. The table of contents is easily scanned, and there is an excellent index.
The book doesn't offer advice on how to sex up the beauty of your site. That's fine for me; my current work involves replicating someone else's designs using xhtml and CSS, and as a coder I'm pathologically unable to design the type of showcases that you see at the CSS Zen Garden. A graphic designer might therefore find this book hard work; it jumps straight into a discussion of syntax, and there's occasional geek-directed statements (CSS supports multi-line C-style comments). Similarly, if you're completely new to html, this book probably isn't for you; there's lots of references to pre-CSS ways of working which could potentially be mystifying. Unusually for CSS books, there's a refreshing lack of polemic telling you why you should use style-sheets. If I read another history of the browser wars in a technical book, I shall scream.
So the book's constituency would seem to be those who know how to present information via html, and wish to take advantage of the smaller filesizes, greater flexibility and logical separation of the presentation layer from the mark-up that the (x)html/ CSS combination offers. The logical purity is my personal reason for moving to Web Standards; the trauma of writing text processing applications with VAX Fortran in the late '80s left me with the propensity to weep when I see html as sorely abused I mangled dear old Fortran.
Are you sitting comfortably? Then I'll begin.
Anthology kicks off in the conventional way for CSS books - controlling fonts and colours, styling hyperlinks, headings and the like. Each chunk is structured as a problem (How do I remove the indented left margin from a list?), a solution and sample code, and generally a discussion of related applications of the code, compatibility issues, accessibility notes etc. This is a pretty compact method of explication, and the basics of styling, syntax, pseudo-class order and the like are romped through in 40 pages, but not glossed over. The key to this is that Anthology assumes you know what you want to do, and shows you how to do it.
Chapter 4 (Navigation) is where the real meat begins - making navigation menus that are solely html unordered lists (because a menu is logically a list of links) and styling with CSS, adding rollover effects, styling navigation as buttons, changing the styling to a horizontal navbar, or even Amazon-style tabs without changing the mark-up. I suspect that, although these are techniques that can be found in most CSS books, the brevity and simplicity of the explanation will be revelatory to many. Chapter 5 (Tabular Data) may come as a surprise to those who mistakenly believe that web standards disallows the use of html tables, as it shows how to style tabular data - the examples are a spreadsheet and a calendar. Chapter 6 repeats the trick with that most mundane aspect of web development, the form.
Chapter 7 (Browser and Device Support) is about real-world CSS development. Unlike most books which instruct you to test in loads of browsers and leave it at that, this chapter lists all the main permutations of OS and browser (including tips on installing multiple versions of IE/ Win), and begins discussion of the tried and tested hacks to hide styles from Netscape 4, IE etc. All of this information is available on the web -- but for a newbie who isn't yet aware that it's possible to hide styles from certain browsers, it's a great way to introduce them to the murky practices of real-world CSS development. What's also refreshing in a computer book for n00bs is a discussion of how to seek help on lists and forums, with a guide to etiquette.
Chapter 8 (CSS Positioning and Layout) is where the stuff that stumps many a table-based designer begins. Along with fonts and colours etc, CSS can lay out the stuff on your page. I'm unsure about the success of this chapter; the Q&A structure is great if you're looking to build one of the sites that are explained (and the list is pretty comprehensive), but I came to the chapter hoping to cure a couple of bugs I'd found in a project I'd previously semi-successfully laid out with absolute positioning (A.P.).
Generally, I layout using floats as I also write the html, so it's easy to ensure that the markup spits out <div>s (sections) in the left-to-right, top-to-bottom order that I want to lay them out in. Suddenly, I had two projects that required A.P. for the first time, as it was not cost-effective to change the way that the client's CMS spat out the markup, so AP was required to position sections on the page regardless of where they appeared in the markup.
Anthology served me fine until I tested the page in IE and the layout was off. Nothing in the book gave me any pointers, and in the end I gave up Googling and just used a hack which exploits an IE parser bug to serve different co-ordinates to IE, after finding the hack co-ordinates through trial and error:
#APthing {position:absolute; top:34px; left: 758px; width:108px; height:88px;}
* html #APthing {position:absolute; top:19px; left: 785px;} /*for IE */
OK, so there may be a simple mistake I'm making -- but then, as far as absolute positioning goes, I'm the kind of newbie at whom this book is aimed, and I imagine that others will make the same mistake that I did. If the book had explained where I was going wrong, or given me the above hack, I'd've spent less time with Google and more time with Guinness.
Chapter 9 (Experimentation, Browser Specific CSS and Future Techniques) is successful, except for one small gripe. I'm glad that the author, although a member of the Web Standards Project, isn't an uber-purist. (I'm of the opinion that a little invalid code, if it's the only way to get the job done, isn't a hanging offense). So she shows how to implement IE-only proprietary CSS that can make colourful scrollbars, should you wish to do this. There's also a Mozilla-only CSS trick to allow curved edges to CSS boxes, which I implemented on my homepage that very evening.
However (here's the gripe), the most useful technique shown is one which allows fully-CSS flyout menus that don't rely on JavaScript. The author notes that it won't work for most people, as IE incorrectly restricts the hover pseudo-class to <a> tags only, while the CSS requires hovering over <li> elements.
Well, Yes and No. There's a well-documented and elegant hack which allows a proprietary Microsoft behaviour to be attached to the CSS that attaches a small JScript that corrects the IE bug, and thus allows this extremely useful CSS-only flyout menu to work in IE. I've used the technique myself when required to mimic the look and feel of a client's site while making it DDA/ADA accessible, and it works perfectly. To me, the omission of the IE hack from Anthology is an unfortunate oversight.
Summary
There's a couple of flaws in the book, though I suspect that in order to explain them, I've over-emphasised them. All in all, it's a solid, professional no-B.S. way for someone with a code-oriented mind to get them up to speed, satisfactorily and quickly; a motivated reader could be churning out standards-compliant, bandwidth-friendly sites after a few hour's experimentation. Ordering the book from the publisher's website was a good experience and, unusually, they have a money-back guarantee. As I said, I wish that I'd had access to Anthology when I was learning.
You can purchase The CSS Anthology: 101 Essential Tips, Tricks & Hacks from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
Learn online for free (Score:2, Informative)
Re:CSS is annoying (Score:3, Informative)
a.blue, span.blue, div#back {color: blue;}
Of course, you don't really need a.blue and span.blue. A simple
Re:CSS is annoying (Score:5, Informative)
color: blue;
}
and have it apply to anything with a class="blue", or
a.blue, span.blue, div#back {
color: blue;
}
to explicitly declare them. The commas being key in this one.
CSS W3C Standard (Score:3, Informative)
CSS 2.1 Specification [w3.org]
If you want to see the upcoming CSS 3 standard, or learn more about CSS, you can go here:
http://www.w3.org/Style/CSS/ [w3.org]
Re:Learn online for free (Score:3, Informative)
Might not be newbie friendly, but its got an extensive list of resources.
Re:Learn online for free (Score:2, Informative)
Re:Ok, let's take up a collection (Score:2, Informative)
I guess it's just easier to block the W3C validator [w3.org] instead.
CSS is not annoying, knowledge must be acquired (Score:2, Informative)
What people haven't mentioned (I didn't see anyway) is the fact that you can apply multiple classes to a single element. So you can have your "blue" class for blue colored text (although that is a very bad class name...think about if you change the color to green). So you can do...
color:blue;
}
font-weight:bold;
}
a{
text-decoration:none;
}
div#back{
border:1px solid red;
}
Then in your HTML...
<div id="back" class="info">
<p>this is some text</p>
</div>
<p class="info att">This desrves special attention, it should be bold and blue.</p>
The ability to add multiple classes to a single element is awesome!
Re:Free? What about the time factor? (Score:1, Informative)
When you need to get things done FAST, and learn while not in front of your computer monitor...
Um, this is CSS we're talking about, there's no use for CSS when you're away from your computer. The only time a book is better is in a meeting, when someone asks if such-and-such is possible with CSS...
Hey, what if suddenly your internet connection drops?
As already mentioned, download useful websites to your local computer.
Never forget that time is money, and learning online "for free" might cost you lots of hours that you could have well spent designing a website and getting paid.
Sure, there are two problems here. (1) Most of us don't have so much work that we can't take some time learning without losing billable hours. (2) You lose billable time learning anyways, whether it's from a book or online, you're making the wrong assumption that online resources are worse than books, there is no such correlation.
Look, for some people books are better, for others websites are better. Live with it and stop making half-assed arguments for one or the other.
Here's a handful of good CSS resources (Score:5, Informative)
- http://css-discuss.incutio.com/ [incutio.com]
- http://css.maxdesign.com.au/ [maxdesign.com.au]
- Layout-o-matic [inknoise.com]
- firdamatic [wannabegirl.org]
- http://www.quirksmode.org/index.html?/css/condcom
. html [quirksmode.org] - http://www.devguru.com/Technologies/css/quickref/
c ss_index.html [devguru.com] - CSS Quick Reference [webucator.com]
- 181 Manually selected references [cbel.com]
A couple of tips from me - Build and test your pages in Mozilla first. Even though MSIE still has a huge lead in mkt share, Slashdotters will be surprised to find out that Explorer is a stagnant sun dried dog turd, full of buggy, half-assed standards implementation. It's much easier to do it right first, then insert workarounds so the CSS displays correctly in Explorer. It's easier to achieve the results you want if you start at zero. Null the defaults so that all the implicit layout collapses. * { margin: 0; padding: 0; borders: 0; } If you find these links useful, please pay me back by checking your work on a Mac too. As a website user, I get really sick of seeing display wackiness - especially lines of type with squashed leading or running beyond the container div because nobody bothered to test in a Mac environment too.Maybe you should read a book / the spec (Score:4, Informative)
Firstly, it does not seem to be possible (unless I just haven't found it yet, please feel free to correct me) to say that I want style FOO to be the same as style BAR except with these changes.
What?? It is called Cascading Style Sheets for exactly that reason, it cascades!
Secondly, CSS' styling system is very, very limited. How do you say, I want this container to be big enough to fit this string into? You can't.
Big enough to fit what string? A container can fit any string with a proper overflow property.
This means that any kind of layout where you have sized objects with text in them --- such as columns, or a header --- has to be specified in fixed values.
This is simply not true. It is fairly simple to generate tabular layouts using pure CSS (that is what display:table-row and whatnot are for!)
You can't say, I want a graphic followed by a line of text followed by something that fills all the rest of the space.
Try this:
Seriously man.. CSS has lots of limitations (some of which will be addressed in V3, some of which aren't), but nothing like what you are spewing. I really suggest you read up some on the spec before you start bashing it so hashly.
Re:Here's a handful of good CSS resources (Score:3, Informative)
You wouldn't happen to know of a decent Mac-browser emulator would you?
Konqueror
If it works in Konqueror it should be fine in Safari. OmniWeb uses Safari renderer now and I don't think that anyone really uses IE for Mac anymore since it sucks hard (when I was still in High School the school got a brand new 766Mhz top of the line G4 and installed OS X Beta on it and I used that through X.2 on a daily basis before I graduated...oh how I shall miss thee, backroom OS X box that no one else got to use).
Mozilla on the Mac is the same as Mozilla everywhere so that covers Firefox, Mozilla, and Camino. I dunno about iCab, I haven't used that since I have 7100/66 back in 98 (running good old OS 8 with 24M of RAM and it was usable dammit).
Re:Here's a handful of good CSS resources (Score:2, Informative)