Of the many interesting arguments raised during our recent discussions centering around Greg’s Spiffy Corners and markup in general, one point was difficult to argue — ’If you say this isn’t the answer, what’s your alternative?‘
Fair point too.
At the time, I successfully skated around a real answer to that question but, with a Design View due and nothing to write about, I decided to take a crack at an answer. The alternative I published last month was quite raw, but with plenty of help from Lox, Matt, Kevin, Tom and Craig, Spanky Corners is now at a stage where we think it’s relatively robust, useful and usable to a wide range of web developers.
The advantages are easy to recognize.
- Super low-fat HTML
- No practical limitations on corner radius
- Valid XHTML (strict) and CSS
- Tiny graphic requirements
- We generate the images and CSS for you!
The only foreseeable drawbacks we see are:
- Dependence on a minimum HTML structure (i.e. single paragraphs can’t work).
An IE6 user scaling his/her font-size up will see a small gap develop at the top left I’m still not convinced there isn’t a way around the IE6 issue, so let me know if you hit paydirt.
Spanky is tested in IE6, IE7, Firefox 1.5, Safari 1.0 and Opera 8.53.
We decided to totally ignore IE5+5.5 support as those browsers don’t support list-images well enough. In practice, we recommend using conditional comments to strip the rounded graphics from IE5 altogether.
Hope you find it handy, and if you stumble across any improvements, lets us know. It’s certainly a work-in-progress.
Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 40+ of SitePoint's book covers.