CSS nifty corners? = slow rendering time

Finally, it seemed like a perfect CSS solution to produce that 2.0-cliche rounded corner style had arrived, with nifty corners. This script goes where no others had previously dared: it draws rounded corners onto your rectangle by injecting hundreds of tiny elements, each with a background color to simulate the pixels in an antialiased curve.

Willmayo.com took this and added a spin with nifty speech bubbles. Elegant! Effective! Cool! but - does it behave?

It satisfies all the criteria a CSS purist might appreciate: it uses no images, it is cross-browser compliant, uses CSS classes to style the corners, and it does a really nice job. Visually, these nifty corners are perfect.

So I tried it out. With a baby on the way, I thought it would be a prime opportunity to make a Web-2.0 styled birth announcement, using as many 2.0-design cliches as I could tolerate. I also used it as an opportunity to try out a few interesting scripts, incuding CSS speech bubbles, simpleviewer, the simple guestbook, and lightbox.

In development, I was pleased with the nifty corner effect. For each <div> branded with the "rounded" class, the script did its finicky rounding magic, and everything looked great - so the page was published. Then people started writing comments on the page, where each comment was styled as a CSS speech bubble. The problem I found was as the number of comments grew, the page was taking 10, 20, 30 seconds to render. The page would render immediately, but to scroll and see the comments I had to wait until the Bubble effect had finished working. That wait was often in excess of 40 seconds. As the number of comments reached and exceeded 45, the wait time was intolerable, and I had to switch the rounded corners off and go for a more rectangular solution.

One may ask, is it really worth putting all that extra script on your page, to achieve an effect that could be done with a few little quarter-round images and a couple of <div> wrappers? Well, there are good arguments for either side. This nifty effect is really easy to apply, doesn't require all the extra HTML wrappers, and keeps your semantic markup pristine in case you are using the same HTML for a variety of media. The download size is relatively lean. On the other hand, once loaded the script fluffs up your page with a remarkable amount of new HTML elements, which (if your computer is elderly or memory-deficient like mine) is noticable since the browser suddenly gets rather needy and responsiveness starts to "chug". And as in my experiment, if the effect is applied to many elements, the latency is substantial.

So to summarize, CSS speech bubbles with the "rounded" effect, and the nifty CSS rounded corner technique it employs, is excellent if you only have 2-3 bubbles on the page, but it is not appropriate for a page with many such instances. Use sparingly and with caution.