Domain: csszengarden.com
Stories and comments across the archive that link to csszengarden.com.
Stories · 9
-
CSS Zen Garden Turns 10
mlingojones writes "The CSS Zen Garden — an attempt to showcase the power of CSS, from ye olden days when most sites used tables for layout, when CSS2 was bleeding edge, when IE5 was the most popular web browser — turns 10 today. In celebration, the maintainer Dave Shea is reopening the project for submissions, with a focus on CSS3 and responsive design." -
CSS Turns 10 Years Old
An anonymous reader writes "Cascading Style Sheets celebrate their tenth anniversary this week. The W3C put together the CSS10 site in recognition of this milestone with a Hall of Fame, essays from the past decade, a gallery, and more." I was glad to see the CSS Zen Garden selected for the Hall of Fame, and disappointed (but not surprised) that no browser on my computer correctly renders the Acid2 test. -
Håkon Responds to Questions About CSS and...
You submitted questions for Håkon Wium Lie on June 20. Today we have his answers, not only to the (+5 moderated) questions we sent him, but to a bunch of others he thought would also be interesting to answer.> Where... by bcat24 > > Do you think the W3C development process is too slow? I know that > you guys want everything to be perfect, but it seems to take far > longer than necessary. CSS 3 shows promise and I wouldn't want it > to die a slow death in standardization.
No, I don't think W3C is too slow. W3C isn't the bottleneck, browsers are. The dominant browser on the web hasn't been updated for years, and it doesn't make sense for specifications to get too far ahead. Rather, the CSS Working Group in W3C has focused on specification maintenance and achieving interoperability between implementations. This work is not so glamorous and some people — even within W3C — would prefer if they concentrate on new specifications. However, I think the focus on interoperability (which has resulted in CSS 2.1) has been crucial to the success of CSS.
CSS3 is a set of specifications that are developed more or less independently of each other. The best way to push a specification forward is to implement it. In the past year, we've seen some encouraging CSS3 implementations come along. For example, Mozilla supports multi-column layouts, Opera supports media queries, Prince supports cross-references and Safari supports borders and backgrounds. A few years from now, I think a select group of CSS3 modules will be interoperably supported in all browsers.
> Why is CSS such a good idea but a pain to use? > by rar > > CSS is clearly very useful for separating style from content. But > apparently people tend to have problems when using it for layouts. > Would you say this is because people have not yet understood how to > properly do layout in CSS, or is it CSS that is lacking in this > area? What can be done to improve the situation? --- Would the web > benefit from HTML and CSS being complemented with some kind of > "layout language"?
I think layout and style should be tackled by the same language and the two are intertwined. Trying to split the two is like splitting the HTML specification in two, one specification describing inline elements and the other describing block elements. It's not worth the effort.
I think CSS is capable of describing beautiful and scalable layouts. The CSS Zen Garden has been a eye-opening showcase of what is possible today. If MS IE had supported CSS tables, another set of layouts would have been possible. So, there is still lots of potential in the existing CSS specifications which should be the next milestone. Beyond that, the CSS Working Group has started work on a new CSS3 module for advanced layout. Feedback is welcome.
> CSS Evolution! > by eieken > > Is the wave of webpages designed completely in CSS what you > intially intended when you came up with CSS? Do you see that > changing? Is that good or bad?
I saw a clear need for a web style sheet language when proposing CSS in 1994. I also wanted CSS to fully describe the presentation of a web pages -- not just add some styling. All in all, I think it has turned out quite well. It has taken longer than I expected, but the scale -- due to the growth of the web -- is more than anyone could imagine.
I used "I" too many times in the previous paragraph. It's important to realize that CSS is a community effort rather that one man's work. Bert Bos joined me early and we worked out the initial designs on a whiteboard during the summer of 1995. The www-style mailing lists and the W3C CSS Working Group have also been crucial in ensuring the success of CSS.
If you're interested in the history of web style sheets, you'll find plenty of material in my PhD thesis on the subject.
> Two questions (cut to 1.5 by editor Roblimo) > by Dolda2000 > If you were allowed (perhaps by court order, which wouldn't be > unthinkable) to force Microsoft to do one (1) change in Internet > Explorer, what would that be?
I would force them to support one (1) single web page before shipping IE7, namely Acid2. By using a tiny amount of resources to get Acid2 right, Microsoft can save web designers and users endless amounts of frustration in the future. It would also be an honorable thing to do. This is what Microsoft's W3C representative wrote in 1998:
Microsoft has a deep commitment to working with the W3C on HTML and CSS. We have the first commercial implementation of HTML4, we were the first vendor anywhere to implement even portions of CSS, and we have put a tremendous amount of energy into seeing CSS mature to Level 2. We are still committed to complete implementations of the Recommendations of the W3C in this area (CSS and HTML and the DOM).
May I have one (1) more change? Please? Then I would make IE7 support TrueType downloadable fonts. Microsoft's record in fonts isn't that bad. They made their core fonts available for anyone to use, and IE supports downloadable fonts. Unfortunately, only the proprietary EOT format is supported. A few lines of code would be sufficient to support zipped TrueType fonts as well, and this would unleash a new wave of typography on the web. (To protect yourself, make sure you use a browser where author style sheets can be turned off — Shift-G in Opera). > As a bonus question: What do you think of Slashdot's CSS? ;)
The new design looks great! The style sheets behind the scene are more complex than what the average web page needs. But, we wouldn't expect anything average from Slashdot, would we?
> 6) Opera > by taskforce > > Opera 9.0 seems to offer a lot of decent additions to Opera's > standards pool. How satisfied are you personally with the work the > team has done on implementing standards, and is there anything in > there you feel is superflous and anything you would have preferred > to see which wasn't in there?
I'm very proud of the standards support in Opera 9. Acid2 is an obvious favorite of mine and seeing that smiley face makes me very happy.
Among the more experimental features is support for Audio in HTML5. Web applications can now make sounds in a sensible way! Combined with the canvas element, developers can create Flash-like content without resorting to a proprietary format.
Having support for Bittorrent is also great. From a technical point of view, it makes much sense. Also, it's a political statement of sorts.
During the development of Opera9. Geir Ivarsøy, who founded Opera with Jon von Tetzchner, died after fighting cancer for years. Geir did a spectacular initial CSS implementation in Opera, thus convincing me to join the company. In music, the 9th is legendary. Beethoven, Schubert, Bruckner and Mahler all did 9 symphonies. Opera 9 was Geir's last symphony.
> Included styles, aliases > by Spy der Mann > > I always wanted to have "included" substyles or "aliases" in my > CSS definition, to save redundancy. > > (For includes) > > .class1 { color:#ff0000; } > .class2 { background-color:#ffffff; } > .class3 { include:class1,class2;font-weight:bold; } > > (For aliases) > > @alias color1 #ff0000; > @alias color2 #ffffff; > @alias default_image url('/img/image1.jpg'); > > .class1 { color:color1; } > .class2 { background-image:default_image;background-color:co lor2; } > > This way we could change colors or images for a whole webpage > by editing a reduced number of lines. > > Had you considered any of these ideas in the past? If so, > why were they rejected?Yes, aliases and constants have been considered. As David Wheeler noted, "Any problem in computer science can be solved with another layer of indirection."
CSS is already an indirection. Instead of putting properties and values directly on elements, it associates properties and values with selectors. What you (and others) are proposing is to add another layer of indirection. By doing so, one could possible write shorter, more manageable style sheets. However, there are also some downsides. It requires a new syntactic construct (@alias) and implementations must be able to remember a list of aliases. What if aliases are defined in one style sheet and referenced in another -- should that work? If so, what if the first style sheet isn't available?
For CSS1, the downsides of aliases were considered more significant than the benefits.
> Definition of pixel > by Sara Chan > > The word pixel meant "picture element", but CSS redefined it >to mean something quite different (a particular subtended angle >of view [w3.org]). This causes confusion: CSS pixels are not pixels. >(Indeed, I have seen misinformed comments on Slashdot due to >that confusion.) > > My question is this: why call the subtended angle a "pixel", instead of >something else (e.g. "subangle")? If CSS wanted to use the subtended >angle for something, that is fine, but calling it a pixel seems to follow >the approach of Humpty Dumpty "When I use a word, it means just >what I choose it to mean".
In most cases, a CSS pixel will be equal to a device pixel. But, as you point out, the definition of a CSS pixel will sometimes be different. For example, on a laser printer, one CSS pixel can be equal to 3x3 device pixels to avoid printing illegibly small text and images. I don't recall anyone ever proposing another name for it. Subangle? Personally, I think most people would prefer the pragmatic "px" to the non-intuitive "sa".
> Vertical CSS Support > by infestedsenses > > As a developer who works with CSS every day, I find one > complication that continues to bother me in my daily work. > Support for CSS has always been good on the horizontal scope, > but vertical positioning has always been quite complicated. > Alone the procedure to affix a footer to the bottom of a screen > in dependance of the amount of content is unnecessarily difficult, > spawning hackish solutions such as "footerStickAlt" > [themaninblue.com]. Centering an object in the dead center of a > page also requires strange procedures such as this one [wpdfd.com], > which still aren't ideal (try making the viewport really small). The old > table method provided much easier methods for this. What are your > thoughts on this and do you see improvement following in future > CSS revisions?
Indeed, the CSS formatting model allows more control horizontally than vertically. This is due to (typically) having a known width, but an unknown height. As such, the height is harder to deal with.
However, CSS2 fixed positioning allows you to place content relative to the viewport (which is CSS-speak for window) instead of the document. For example, by setting position: fixed; bottom: 0 on an element, it will stick to the bottom. This works in Opera, Safari and Mozilla-based browsers. IE6 doesn't support it, however. It remains to be seen if IE7 will support it.
> About Microsoft... > by Chabil Ha' > > With MS's next browser release (IE 7), you mentioned in other > interviews that their decision to not supprt CSS2 was more a political > decision than a mechanical one. Aside from their obvious desire to > dominate the world, what politics do you think are in play that make > them not want to conform to the standard, and what do you think would > change that landscape so that they would have some initiative to > fully support it?
Great question. It's quite clear that Microsoft has the resources and talent to support CSS2 fully in IE and that plenty of people have reminded them why this is important. So, why don't they do it? The fundamental reason, I believe, is that standards don't benefit monopolists. Accepted, well-functioning, standards lower the barrier of entry to a market, and is therefore a threat to a monopolist.
From that perspective, it makes sense to leave CSS2 half-implemented. You can claim support (and many journalists will believe you), and you also ensure that no-one can use the unimplemented (or worse: buggily implemented) features of the standard. The only way to change the equation is to remind Microsoft how embarrassing it is to offer a sub-standard browser. And to use better browsers.
Another reason for not making a IE too good is that it will compete with Windows. A modern browser is an application platform; the combination of HTML, JavaScript, CSS and DOM allows developers to target the web instead of Windows, Linux, or Mac.
> From linvir > How long since you last used Linux?
I'm using it right now. Ubuntu on a IBM Thinkpad X41 is the environment I live in. Ubuntu rocks -- especially with Opera on top! (And Emacs right underneath.)
> From Rob T Firefly (844560) > Why the curly brackets?
The initial CSS proposal didn't use them, instead relying on newlines to separate statements. TimBL didn't really like that and I therefore borrowed the curly braces from the C programming language. The syntax for comments came along as well. I think it works quite well.
> why not XML? > by slashdot.org > Simple question (hopefully simple answer ;-)): why > did you not use XML?
The simple answer is that the development of CSS preceded XML by a year or so. However, if XML had been available, would we have used it? Probably not. And I suspect Brendan Eich of JavaScript fame would answer the same way on behalf of his language.
XML is a great syntax for structured data, but not suitable for all languages. Still, I think the SGML-based syntax for the FOSI style sheet language.
> Padding > by Anonymous Coward > Why was the decision made to make padding apply outside > of the width of a 'box', rather than inside, which would seem > to make more sense?
It makes sense in some situations, but not in others. For example, when a child element is set to width: 100%, I don't think it should cover the padding of its parent. The box-sizing property in CSS3 addresses this issue. Ideally, the issue should have been addressed earlier, though.
> by nuzak > why not float: > DSSSL had this sort of thing solved before HTML even existed, > let alone CSS. But scheme is too scary and icky, and the W3C > believes in a principle of least power, so CSS has to be fully declarative, > static, and crippled until patched later.
You're wrong about DSSSL -- it didn't support floating text (as in having text wrap around images) at all. And the DSSSL specification only became publically available around 1996, years after HTML.
> by MagicM > How frustrating is it to write a specification knowing > that you're at the browser vendors' mercy?
That's part of the game. I don't think any specification has a birthright to be fully supported by all browsers. There should be healthy competition between different specifications. I believe simple, author-friendly specifications will prevail in this environment.
Microformats are another way of developing new formats. Instead of having to convince browser vendors to support your favorite specification, microformats add semantics to HTML through the CLASS attribute. And style it with CSS.
> New standards > by iamsure > > In your work at Opera, you have clearly paved a path that includes > going beyond the W3C standards. Whether it is WhatWG > implementations, or new functionality specific to Opera (2dgame), > you are pushing into new territory. Can you explain why W3C isn't > sufficient, and why efforts at Opera to expand beyond the standards > differ from Microsoft's embrace/extend model?
It's a fair question. The WhatWG was set up when it seemed as if W3C didn't care much about browsers anymore. That has definitely changed and work items from WhatWG are now channeled into W3C (e.g., XMLHttpRequest).
At Opera, we sometimes include experimental features before they have been standardized. When this happens they are labeled as such, but we still try to document them. For example, we support some Opera-only CSS properties for XML. If these features gain traction, we are happy to work with other organizations to standardize them. If they don't become popular, the features will most likely disappear.
> Beyond HTML > by pr1000 > How far can CSS be taken beyond the web page--that is, > have generalized or non-web specific features for such things > as page formatting or type setting? Do you plan/wish/hope to > take it farther than it currently is?
Yes, I think it's possible to take CSS further in several directions. I'm eager to see CSS being used in paper-based publishing and I joined the board of YesLogic — which makes the Prince XML to PDF converter — to make sure they added my favorite features. Bert and I used Prince to generate PDF from HTML and CSS sources for the third edition of our book. W3C just published a new Working Draft which describes features for printing, e.g., footnotes, cross-references, and even generated indexes.
For mobile units, I think Media Queries will be important. For example, they can express that large images should not be sent to mobile devices.
Another great opportunity for CSS is Web Applications. Just like documents, applications need to be styled and CSS is an intrinsic component of AJAX. The "AJAX" name sounds great, but allow me to propose a few alternate spellings that I find more accurate:
- AJACX: Asynchronous JavaScript, CSS and XMLHttpRequest
- ADJACS: Asynchronous DOM, JavaScript and CSS
- ADHJACS: Asynchronous DOM, HTML, JavaScript and CSS
- AJAHCS: Asynchronous JavaScript, HTML and CSS
- AJACS: Asynchronous JavaScript, HTML and CSS
Opera, Mozilla and Safari developers are collaborating in the WHAT WG and in W3C to make sure we have interoperable specifications for AJAX. I mean, ADHJACS.
> by crush > Is the difficulty of producing a layout that consists of > three or more columns of equal height justification for > adding some new feature to the specification to make this easier?
I don't think so. CSS2 defines a table layout that can be used for this purpose. The problem is, and I'm repeating myself here, that the dominant browser doesn't support it. Adding yet more features to the specification wouldn't help.
> How come, we um, lie?
Right. My name is, um, a bit troublesome to pronounce in English. But I'm a nice person who generally tells the truth. I often tell non-Norwegians that my first name is pronounced "howcome". That's close, but not quite. It does make for a great email address like howcome@opera.com, though.
So I may be a Lie, but I'm just a little white one :-)
-
A New Era in CSS Centric Design?
byrnereese wonders: "The media never fails to point out how the age of Web Two-Point-Oh has helped to drive the adoption of Ajax into the Internet industry, but rarely does anyone point out that it has also help popularize CSS-centric design practices -- the Slashdot redesign being only one example. But now that we, as programmers, feel comfortable ditching the use of font tags, finally grok div's, understand absolute vs relative positioning, and can work around all of IE's CSS bugs, what is the next step for HTML and CSS? Several standards or conventions seem to be coming to forefront: one is building standards around the HTML structure itself so that wildly different designs can be achieved via style-sheets alone (e.g. CSS Zen Garden and The Style Contest), the other being the standardization of CSS classes (e.g. micro-formats) so that semantic meaning can be derived from the class name we use to label our content. Both show an interesting potential for how this technology is evolving. So here is the question for all the visionaries out there: where is this taking us? What's next for HTML? What's next for CSS?" -
10 Best Resources for CSS
victorialever writes "Since one could have noticed an increasing number of websites that are employing CSS and an increasing number of resources talking about how great CSS is, it seems to become impossible not to jump on the CSS bandwagon as well. The 10 Best Resources for CSS provides an impressive list of the CSS resources which have recently become essential for web-developers. Among them - CSSZenGarden, The Web Developer's Handbook, Stylegala, PositionIsEverything etc." -
Suggested Curriculum for 'Complex Websites' Class?
StudMuffin asks: "I teach graduate computer science courses at a Big 10 university to grad students, who have never programmed before and are studying Human-Computer Interaction or other Information Science specialties. These courses are usually their first dip into the programming pool, so we have tons to cover in three months. This fall, I have been asked to take over and redesign our 'Complex Website' course, which is getting a bit long in the tooth. This course has traditionally been about database backed websites with server-side scripting. My only requirements are that there be coverage of PHP and that we have basic instruction about persistence using a database (which must be MySQL). However, I believe that the nature of 'complex' websites has changed, with XHTML, CSS, Javascript, web services, and so on. Sites like Google Maps make the browser feel like a fat client and are making the web browser a true window onto enormous data sets, and take into consideration the MoRAS of small views on large worlds. What do Slashdot readers consider a reasonable curriculum would be for a redesigned course like this?" -
The CSS Anthology
Bruce Lawson writes "I've read a lot of CSS books, but this one is the one I wished that I'd read when I was learning, and I suspect that other slashdotters may concur. It is firmly pitched at the coder rather than the designer, takes you from CSS virgin to upper intermediate level, with good attention to the process of (re)designing with CSS, legal issues such as Accessibility (section 508), and assumes that you're not scared of mark-up." Lawson offers this disclosure: "I should immediately disclose that I've worked for two different companies that have published the author, Rachel Andrew, but I have no connection with the publishers, or this book." Read on for the rest of his review. 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 credentialsAndrew 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.
SummaryThere'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. -
Web Standards Solutions
William Nichols writes "With a couple of projects coming up that are going to require complete W3C CSS and XHTML validation (with 1 client requiring just a pure CSS layout) I thought it was time to brush up on some CSS knowledge, and maybe learn a new thing or two. I have spent the past week with a newly released book (and one of the smaller CSS books out there), the Web Standards Solutions The Markup and Style Handbook. The author, Dan Cederholm, has now become my right hand man, so to speak." Read on for the rest of Nichols' review. Web Standards Solutions: The Markup and Style Handbook author Dan Vederholm pages 253 publisher Friends of Ed rating 8.5 of 10 reviewer William Nichols ISBN 1590593812 summary A clear reference on designing with XHTML and CSS through a standards based approachWith the title Web Standard Solutions (which we will refer to as WSS from here on), you might expect this to be a book that is going to solve your problems, and without disappointment that is exactly what is does.
WSS takes a problem based approach instead of the commonly used project based approach to teaching you the value of designing to strict standards. I found this approach very refreshing, WSS kept my attention by presenting a problem, and then presenting 3-5 solutions on how to accomplish the task at hand. With each example Dan takes you through several ways to achieve the required result. Each of the methods shown are common patterns that different developers/designers would use, and the pros and cons of each are well articulated.
A lot of you may know Dan from his Simplebits. website. If you frequent Simplebits you will immediately recognize his style in the writing of WSS. Much like the mini quizzes that are used on his blog, this book is really a compilation of the hurdles that you are likely to face when trying to design to strict standards, and the solutions presented will get you over them.
WSS will also help the budding developer realize the business value of designing to standards. Once you start designing with standards, search engine rankings can jump, continued maintenance becomes a breeze, and the accessibility to screen readers (or other requirements) can be elegantly met.
One of my favorite parts of the book is the in-depth techniques used to style lists. WSS shows you how to take a regular non-formatted list and, using CSS, style it in several ways: as a vertical shopping list; without bullets and indenting; with custom bullets; and eventually as a horizontal navigation bar with changing bullets.
This book really stands out when covering the most basic foundations of layout such as paragraphs, lists, headers, titles and the like. The first half of the book really gets into the proper use of the most basic CSS techniques and proper selection of tags for headings, quotations, etc. While the second half of the book requires you to use what you have learned along the way to start building CSS based layouts.
If you are a regular at some of the advanced sites like CSS ZenGarden or A List Apart this book may be a little basic for you. Even still you will probably be able to take some techniques from it that you can use, this book is really more for the designer that is capable but not quite deadly with their CSS knowledge.
Overall I would give Web Standards Solutions the Markup and Style Handbook an 8.5 out of 10. I really think it does a fantastic job at keeping the reader interested in the subject (something that is often very hard to do in technical books) and will definitely be a great business tool for you. A quick read it is, but a valuable reference that has earned a spot next to my keyboard, my 3 bars of caffeinated soap, and the trusty case of bawls.
You can purchase Web Standards Solutions: The Markup and Style Handbook from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page. -
Dynamic HTML: The Definitive Reference (2nd Ed.)
honestpuck writes "Many years ago I learnt my AppleScript skills from a book by a gentleman by the name of Danny Goodman and I was happy to find him tackling the subject of dynamic HTML in "Dynamic HTML: The Definitive Reference". Indeed this is the second edition and seems supremely up to date." Read on for the rest of honestpuck's review. Dynamic HTML: The Definitive Reference (2nd Ed.) author Danny Goodman pages 1343 publisher O'Reilly rating 9 reviewer Tony Williams ISBN 0596003161 summary Truly definitive reference for a huge topicGoodman has tackled a complex subject. With changing standards and even quicker changing browser compatibility it can be a nightmare trying to get a dynamic web site working across disparate browsers and operating systems. A guide that tells you exact syntax and exact compatibility can be invaluable, but is only as good as the research behind it, an area where I cannot fault Goodman.
This volume covers XHTML, CSS and DOM with a large smidgeon of JavaScript. It's not an easy book to get into and consume in large chunks as it does little hand holding but as I was prepared to knuckle down and work at the topics (with much help from various web sites such as CSS Zen Garden) I found it perfect for me. Goodman has recently released JavaScript & DHTML Cookbook which I have found to be a marvelous volume to assist the process of understanding these technologies, though I am still looking for a good, up to date tutorial on CSS (recommendations welcome).
The target audience would be best summed up as those who have done a fair amount of HTML hand coding and some work in dynamic HTML. The book also adds that you should have "the basics of client-side scripting in JavaScript" and I would agree, when I first acquired this book my JavaScript skills were exceptionally primitive (mainly at the 'plug in example' stage) and found the latter sections of this book heavy going and not much help; now that I am a better JavaScript programmer I find these parts much easier to understand and use.
The book is divided into four parts, 'Applying Dynamic HTML,' 'Dynamic HTML Reference,' 'Cross References,' and 'Appendixes'. I found the first part particularly helpful when converting my old site across to a more dynamic CSS-based site as it helps with various strategies for making sure your content works across browsers and various methods for making sure that visitors with older browsers and search engines can still retrieve valid pages. Goodman's approach of increasing complexity through this part also suited a movement from a straight HTML site to one using XHTML and CSS. This is also where Goodman's writing can shine: it's an excellent guide to all the technologies and acronym soup. The appendices are marvelous, from 'A,' a list of colour names with their RGB value, through a list of character entities to a 50-page list of all HTML tags, their attributes and if they are supported in the two HTML 4 and three XHTML 1 standards.
The reference parts are well structured with extensive notes on browser support and which particular standard (DOM 1, DOM 2, CSS 1, CSS 2, or none) the tag or attribute comes from. For example, in the DOM section the reference gives you the object name, which versions of Navigator and Explorer support it, the DOM version (if any), a short explanation, then an object reference example, list of properties, methods and event handlers. For each of the properties it gives an example, the type and if it is read-only or read/write. For methods it gives the return value and parameters. This sort of attention to fine detail is taken throughout the book. You end up with a book 1343 pages long and a 51 page index. Goodman mentions in his preface that the book now encompasses 'more than 15,000 unique instances of properties, methods and event handlers,' a figure I'd believe.
O'Reilly have their usual page for this book that includes a sample chapter in PDF, the Index, Table of Contents and an Errata page. There are few Errata and only one in the code examples. Speaking of examples, you can download the complete set of code examples from the book.
There is also a page at O'Reilly for the author, Danny Goodman with links to some excellent articles and book excerpts on dynamic HTML and JavaScript.I found this a hard book to review, as are most references. The questions I asked were: one, Does the book cover all the material?; two, Is it correct?; three, Is it easy to find the entry you want? and four, Are the entries laid out in an easy to understand manner? In these criteria this volume rates well, with the added bonus of some good material in the first section for understanding the nuances of dynamic HTML in a multiple browser, multiple operating system world.
If you are doing a lot of work in dynamic HTML then this book is probably an essential. While I don't consult it every time I start working on HTML when I run into trouble it is the first place I turn to make sure my syntax and browser compatibility are straight. This book ain't cheap, and it ain't small but I'd recommend it for your desk if you're working with web sites.
You can purchase the Dynamic HTML: The Definitive Reference (2nd Ed.) from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.