Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
179 lines (95 sloc) 10.7 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Book Review: CSS Mastery and Bulletproof Web Design | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="Thanks to Lucian and his awesome web standards library, I got to read CSS Mastery and Bulletproof Web Design. Here is a short review of the two. I &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/book-review-css-mastery-and-bulletproof-web-design.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/web-2-0-jargon.html" title=" Web 2.0 Jargon">&#x276C;</a>
<a class="next" href="/my-illustration-on-the-word-it-book.html" title=" My Illustration on The Word It Book">&#x276D;</a>
</nav>
<header>
<time datetime="2007-04-21T00:00:00+05:30" pubdate><span class='month'>Apr</span> <span class='day'>21</span> <span class='year'>2007</span></time>
<h1 class="entry-title"><a href="/book-review-css-mastery-and-bulletproof-web-design.html"> Book Review: CSS Mastery and Bulletproof Web Design</a></h1>
</header>
<div class="entry-content"><p>Thanks to <a href="http://tribolum.com">Lucian</a> and his awesome web standards library, I got to read <a href="http://www.cssmastery.com/">CSS Mastery</a> and <a href="http://simplebits.com/publications/bulletproof/">Bulletproof Web Design</a>. Here is a short review of the two.</p>
<p>I completed both the books in a day - which doesn&#8217;t mean the books are thin on content but rather they are both very easy to read.</p>
<h3>CSS Mastery by Andy Budd with Cameron Moll & Simon Collison</h3>
<p>This is by far the better of the two books - in terms of coverage and organization. Andy Budd gives a very succinct summary of the basics of XHTML, CSS, Visual Formatting Model (in 2 chapters) which covers a lot of details that I had not realised about CSS - especially about positioning. I didn&#8217;t know that if you use <code>position:relative</code> on an element, it continues to occupy the original space it was supposed to be in - while it is not the case if you use <code>position:absolute</code> , <code>float:left</code>, or <code>float:right</code>. Perhaps, the fact that I hardly use <code>position</code> is also to blame.</p>
<p>The next chapters each deal with specific aspects of using CSS styling - like background images, lists, forms, layouts etc. What I love about the book is it covers all of them in depth with equal focus on accessibility and flexibility of styling each. There is a dedicated chapter that covers all the different bugs that crop up in <a href="http://www.microsoft.com/windows/ie/default.asp">IE</a> and the fixes for them. In fact, I didn&#8217;t know the fix for the <a href="http://www.positioniseverything.net/explorer/doubled-margin.html">Double Margin Float Bug</a> for IE. The book shows me a miracle cure by simply using <code>display:inline</code> on the floated element. Instead of googling around for solutions, all you need is this book by your side to fix your IE 6 woes.</p>
<p>The final two chapters are by <a href="http://www.colly.com/">Simon Collison</a> and <a href="http://www.cameronmoll.com/">Cameron Moll</a> who take us through a sample page using the techniques we have seen in the book.</p>
<p>The book is a great compendium of tips and techniques that are found on the web written very simply in a manner that is easy to grasp.</p>
<h3>Bulletproof Web Design by Dan Cederholm</h3>
<p>I read this book after reading CSS Mastery and in a way was expecting to see the answers to all my CSS troubles (since it was about Bulletproof Web design!). <a href="http://simplebits.com">Dan</a> had started the introduction warning us not to think of it as the ultimate answer to any CSS trouble. Many of the techniques that Dan covers are already covered in CSS Mastery. Dan spends a lot of time on designing with percentage font sizes which as he says are quite confusing and can easily go out of hand on complex designs and sites. This book is a good introduction to the designers who are looking to convert from tables based designs to tableless layouts that are accessible and easy to maintain.</p>
<p>For a bulletproof solution to using rounded corners, Dan describes a method that works for static text (or text whose length is known) but does not provide an answer to text whose length is not known - which is more of a common occurrence with the rapid rise of Content Management Systems. As such, this book does not address the issue of designing for sites whose content is always changing and whose width and heights are never known in advance - and that is the major issue that I face in my work. How can I float images (in an image gallery) and expect them to remain floated if the captions become too long and break the float?</p>
<p>In a way, I had expected that Bulletproof Web Design would be the answer for the problems given by dynamic html and content that is unpredictable. But it was a lot more basic and I didn&#8217;t find it giving critical insights in that regard.</p>
<p>Technorati Tags: <a class="performancingtags" href="http://technorati.com/tag/web design" rel="tag">web design</a>, <a class="performancingtags" href="http://technorati.com/tag/css" rel="tag">css</a>, <a class="performancingtags" href="http://technorati.com/tag/css mastery" rel="tag">css mastery</a>, <a class="performancingtags" href="http://technorati.com/tag/bulletproof web design" rel="tag">bulletproof web design</a></p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2007-04-21T00:00:00+05:30" pubdate><span class='month'>Apr</span> <span class='day'>21</span> <span class='year'>2007</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
</span>
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2007-04-21-book-review-css-mastery-and-bulletproof-web-design.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar" src="http://a2.twimg.com/profile_images/1696865113/me_normal" height=48> <a href="http://twitter.com/divya">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2013 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/book-review-css-mastery-and-bulletproof-web-design.html';
var disqus_identifier = 'http://nimbupani.com/book-review-css-mastery-and-bulletproof-web-design.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>