Slashdot Mirror
The Art and Science of CSS
nateklaiber writes "The Art and Science of CSS was a quick read (208 pages) and packed full of valuable code examples. Unlike other CSS books that teach you the specifics of CSS with vague examples (not vague in a bad way), this book teaches you specific examples and gives you extra resources. This book is somewhat of a cookbook of commonly used CSS methods. Each author brings their unique writing style to the table, and each chapter focuses on a specific aspect of design and its CSS and styling methods." Read below for the rest of Nate's review.
The Art and Science of CSS
author
Jonathan Snooks, Steve Smith, Jina Bolton, Cameron Adams, David Johnson
pages
208
publisher
Sitepoint
rating
5/5
reviewer
Nate Klaiber
ISBN
0975841971
summary
This book is a cookbook of commonly used CSS methods.
Chapter 1 starts with Headings. The author of this chapter gives a brief introduction to hierarchy and branding, and how you can achieve more control with your look and typography. As typography is discussed, he moves on to talk about image replacement and the many techniques available to us today. There is no perfect solution when it comes to image replacement, but the author does a great job of showing current methods, their advantages, and their disadvantages (including an in-depth section on sIFR).
Chapter 2 is all about Images. The author starts by showing you how to create a basic but aesthetically pleasing image gallery. The task at hand is to create the enlarged version, the thumbnail page, and the galleries page while keeping the markup lean and semantic. Each of these are put together very nicely with flair not usually seen in off the shelf image galleries. The author also discusses how to create images (in context) with captions, including a nice use of transparent PNGs. The authors creative use of captions give you options outside of the box (both semantically and philosophically) of normal captions that are seen all around the web.
Chapter 3 shows us that backgrounds don't have to be boring. This is a very simple chapter that discusses backgrounds of the past (repeating pictures, large pictures, etc), and then looks forward to the present in getting creative with your backgrounds. He uses a case study as an example, and it shows specifics of positioning and layering.
Chapter 4 jumps into Navigation. Different types of navigations are discussed (vertical, horizontal, tabbed, variable width, etc) and shown with specific examples. The author shows how to take from each of those to create advanced navigation systems using images and your semantic markup. I think that from this chapter a user could create an advanced navigation simply because the foundation is set pretty solid before he gets to the advanced section. This chapter goes hand-in-hand with chapter 1 when talking about image replacement.
Chapter 5 discusses the dreaded (sometimes feared) Forms. Forms come in all shapes and sizes and it is up to us to build them accordingly with the user in mind. The styling in this chapter spruces up what is a rather mundane form while giving you great flexibility and hooks to extend yourself. The author discusses the several different layout types (top aligned label, left aligned label, right aligned label) and shows how to enhance each. If you work with forms often, this chapter will help you whip up a clean interface for the task.
Chapter 6 is everybodys favorite chapter Rounded Corners. The author gives you an arsenal of tools (and knowledge) to attack the task of adding rounded corners. He discusses the different methods (horizontal stretching, vertical stretching, and full flexibility) and shows you how to achieve each keeping in mind the task of keeping the markup minimal and meaningful. We also get a brief glimpse into what CSS3 will have to offer us with multiple backgrounds per element.
Chapter 7 closes out the book with Tables. Tables still have a strong place in web development and the author shows you how to use tables properly (with semantic markup) and then how to give them a little visual jump-start and interaction. The markup presented here helps you give clear meaning to your tables as well as building with accessibility in mind (which is always important with tables, specifically). We round off the chapter looking at some interaction enhancements via Javascript that we can use with our tables (sorting, striping, and hovering).
Overall I found this book to be an excellent read. It was short and to the point, and gives the reader a great starting point (as well as inspiration). The book itself is well designed. My only qualms with the book is that the code examples are listed in full in many places, which gives less room for content related to the chapters. As I said in the beginning, this was a fairly quick read but well worth it. I would say that this is for an intermediate CSS developer, as specific CSS is not discussed in great detail but given to you as a way to achieve a specific design task. If you are familiar with CSS and need a quick way to achieve the tasks listed above, then this book is perfect for you.
You can purchase The Art and Science of CSS from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
Chapter 2 is all about Images. The author starts by showing you how to create a basic but aesthetically pleasing image gallery. The task at hand is to create the enlarged version, the thumbnail page, and the galleries page while keeping the markup lean and semantic. Each of these are put together very nicely with flair not usually seen in off the shelf image galleries. The author also discusses how to create images (in context) with captions, including a nice use of transparent PNGs. The authors creative use of captions give you options outside of the box (both semantically and philosophically) of normal captions that are seen all around the web.
Chapter 3 shows us that backgrounds don't have to be boring. This is a very simple chapter that discusses backgrounds of the past (repeating pictures, large pictures, etc), and then looks forward to the present in getting creative with your backgrounds. He uses a case study as an example, and it shows specifics of positioning and layering.
Chapter 4 jumps into Navigation. Different types of navigations are discussed (vertical, horizontal, tabbed, variable width, etc) and shown with specific examples. The author shows how to take from each of those to create advanced navigation systems using images and your semantic markup. I think that from this chapter a user could create an advanced navigation simply because the foundation is set pretty solid before he gets to the advanced section. This chapter goes hand-in-hand with chapter 1 when talking about image replacement.
Chapter 5 discusses the dreaded (sometimes feared) Forms. Forms come in all shapes and sizes and it is up to us to build them accordingly with the user in mind. The styling in this chapter spruces up what is a rather mundane form while giving you great flexibility and hooks to extend yourself. The author discusses the several different layout types (top aligned label, left aligned label, right aligned label) and shows how to enhance each. If you work with forms often, this chapter will help you whip up a clean interface for the task.
Chapter 6 is everybodys favorite chapter Rounded Corners. The author gives you an arsenal of tools (and knowledge) to attack the task of adding rounded corners. He discusses the different methods (horizontal stretching, vertical stretching, and full flexibility) and shows you how to achieve each keeping in mind the task of keeping the markup minimal and meaningful. We also get a brief glimpse into what CSS3 will have to offer us with multiple backgrounds per element.
Chapter 7 closes out the book with Tables. Tables still have a strong place in web development and the author shows you how to use tables properly (with semantic markup) and then how to give them a little visual jump-start and interaction. The markup presented here helps you give clear meaning to your tables as well as building with accessibility in mind (which is always important with tables, specifically). We round off the chapter looking at some interaction enhancements via Javascript that we can use with our tables (sorting, striping, and hovering).
Overall I found this book to be an excellent read. It was short and to the point, and gives the reader a great starting point (as well as inspiration). The book itself is well designed. My only qualms with the book is that the code examples are listed in full in many places, which gives less room for content related to the chapters. As I said in the beginning, this was a fairly quick read but well worth it. I would say that this is for an intermediate CSS developer, as specific CSS is not discussed in great detail but given to you as a way to achieve a specific design task. If you are familiar with CSS and need a quick way to achieve the tasks listed above, then this book is perfect for you.
You can purchase The Art and Science of CSS from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
A lot of the examples on the web are garbage. Try finding really good resources on liquid css tableless designs with code for cross browser support. It's a pain to find exactly what you want in many cases.
Contrary to popular belief, Unix is user friendly. It just happens to be particular about who it makes friends with.
http://ipinfo.info/netrenderer/index.php
Check that place out. It'll render in all versions of IE, it's free, and it's reasonably fast.
IE6 and below *IS* a pain in the butt, I totally feel your pain. I've had many a (LITERAL) headache from wrangling the box model with its hacky display.
Agreed, it is a cracking book that sets you on the right path. After that you can learn extras from sites like A List Apart, CSS Beauty, css Zen Garden, etc.
i bought this book a couple weeks ago. it is very good. shows you specific ways of doing things, special tips, and is basically just a very nice book that can be applied to real world specifics and give you new ideas for your own designs. we're definitely not going back to tables. i for one love css as it makes for cleaner code and is much more accessible for mobile users.
If you actually read the book, you would know that this is a book where you "learn by doing". I just finished this book and I thought it was a great read for some helpful CSS tips.
You are right that the book is not a comprehensive reference for browser variations, although it does bring up differences between the CSS specification and actual browser implementations (ca. 2007), when they are critical to the content being discussed.
For example, in the chapter on Backgrounds, the book points out the relatively limited browser support for the background-origin property.
In the chapter on forms, the book mentions that only in the latest generation of browsers can you actually style input elements by selecting for type (i.e. via CSS attribute selectors).
Although robust web development requires understanding the many browser quirks that abound, I can also understand the rationale behind the authors' approach in this book, which generally is implementation-agnostic.
They are betting that as time goes on, browsers will tend to converge to the spec, and antiquated browsers will represent less and less of the browser population. In other words, the book as written will only become more accurate with time (with respect to existing specs and browsers in actual use), while information about variations in today's browsers diminish to the status of curiosities.
There are no karma whores, only moderation johns
An 'em' is the width of one character 'm'.
Thus:
'1 em' is this wide: m
'3 em' is this wide: mmm
It's a pretty good metric.
Write your pages for mostly-standards-compliant browsers, then use http://dean.edwards.name/ie7/ to make them look right in IE. Sure, your pages will take an extra few tenths of a second to render in IE, but it saves you hours of fucking around to make it look right.
You're confusing em with ex, whereby 1ex == 1 x-height of the current font size at its current size.
Who doesn't like free music?