First, “Creating Custom Corners and Borders” is not about hacks. It’s a method of creating a particular kind of layout and pairing it with lean, semantic markup. Good CSS layout is about creating a tight, clean, underlying (X)HTML structure and then doing the minimum that is required to bring that structure to visual life. The CSS file(s) and image file(s) controlling the layout are downloaded once and stay cached in the visitor’s browser, saving considerable bandwidth over oldschool table design methods.
Further, the same structure can be displayed multiple ways (including text-only) — another advantage over table layouts, which don’t travel well outside the realm of traditional visual browsers, and which also don’t lend themselves to the needs of screen reader users unless a lot of additional work is done.
If this article were about using tables to create rounded corner effects, it would contain just as much code and just as many image files (if not more). Those who complain that this article is unnecessarily complex would find that a table layout with rounded corners was equally complex — at least when described step by step in a tutorial.
The fact that the technique involves the creation of small image files that must be combined to create a visual effect is not a problem in the article and it is not a problem in CSS; table layouts require the creation of many small pieces joined together; so do most Flash layouts. Web designs are made of parts just as movies are made of film clips edited together and banjos are made of wooden bridges, sounding boards, tuning pegs, and strings. You can’t carve a playable banjo out of soap; you can’t create many web layouts without images and snippets of code.
Having nothing to do with this article, there are CSS hacks out there and there is an appreciation of those hacks in some web design and development circles. Recently an article in a leading web design magazine complained about these hacks, but the author of that article — or at least, some of his readers — seemed to misunderstand why the hacks are out there.
The hacks are not out there because people like creating hacks. They are not out there so the people who created them can become famous. They are out there because more and more designers want to harness the benefits of standards-based design, but find their efforts stymied by bugs or flaws in one browser or another.
Before we gang up on the browser makers, note that when they began truly supporting standards circa 2000, they were creating software to support CSS layouts that didn’t yet exist. Few people were using CSS at all; those who did used it only in timid and limited ways (because existing browsers didn’t support anything more than that). The browser makers to the best of their ability gave us the support they thought we would need; but they didn’t have sophisticated CSS layouts on which to test their work. Thus the browsers we have are riddled with small problems through no fault of the manufacturers.
When a designer or developer discovers that a layout won’t work in IE5/Win or Opera 6 or some other browser, he or she has a choice:
S/he can go back to tables (abandoning the benefits of standards-based design).
Or s/he can go ahead with the layout, using a CSS hack to force the misbehaving browser to display the layout the same way other standards-compliant browsers do.
Those who create CSS hacks do so to solve problems for their users. If they publish those hacks, they also solve the same problem for tens of thousands of unknown colleagues.
Ever since the second web designer on earth viewed source on the first web designer’s site, web design has always been about sharing this kind of information so we can all get our jobs done. Freely sharing techniques in this way is generous and non-competitive. If a hack saves a thousand layouts and if the creator of that hack gains a little recognition for solving a problem that plagued many of us, ain’t nothin’ wrong with that.
But CSS hacks are one thing; methods of CSS layout are another. “Creating Custom Corners…” is about a method of CSS layout. Confusing hacks with methods is unhelpful.