Saturday, November 17, 2007

rounded stuff

CSS3 will introduce the border-radius style that will finally allow rounder corners to simply be an element style property. Something like
.rounded{border-radius: 12px;}
will certainly reduce a lot of unnecessary markup muck that is currently used just to place an image on 4 corners of an element.

Most of my current web development(but definitely not all) is application development, where I usually know some about the user base. In these cases, I generally go with javascript (yes, done in a nice unobtrusive manor) just to keep the markup pure and free of the extra div's usually required for the css rounded corner techniques. If you are already using a javascript framework, this can become a piece of cake to implement. My current favorite combination is JQuery and the JQuery Corner script. Something like
$('.rounded').corner("round 12px") 
gets me there currently in a very unobtrusive way.

One of the payoffs of creating nice pure markup, and clearly separating style and behavior, is that when CSS3 is implemented in a browser that is the target for one of my web application projects, it becomes pretty simple to change from a javascript behavior approach to a style approach. The markup remains untouched, and all I'll have to do is remove one javascript behavior and trade it for one css style attribute.

No comments:

Post a Comment