Information Gift

The Shape of Things to Come

Before we get started, let me introduce you to WebKit. WebKit is the open source framework used by Safari and several other OS X applications, based on the Linux KHTML engine from KDE.

Recent Webkit builds implement new CSS3 properties which will someday make designers and html coders very happy indeed. Eventually these properties will allow non-rectangular designs that are trivial to implement, whereas today's browsers require complicated and sometimes tricky table structures to pull off.

For instance, to make a rounded-corner div using CSS3 all one has to do is add border-radius with an appropriate value to your CSS and you're done! If you set a background image for that div, then the image will be clipped by the the value of your border-radius: an easy way to give rounded corners to rectangular images w/o pre-processing. CSS3 also allows defining border images which can be set to stretch along with a div using liquid-layout techniques, all with much less code and effort than the traditional methods.

As of right now, there are no shipping browsers that support these CSS3 properties, the standard itself still being in draft form. In order to experiment with or view the demos I'll point to below, you'll need to download one of the nightly WebKit builds on an OS X box or view the screengrab examples. As the WebKit nightlies are self-contained, a build will co-exist peacefully with your existing version of Safari.

Here's a screengrab of this site [240k, png] viewed through one of the WebKit nightlies. Note the rounded-right edges on the right-hand column and how the 1px border doesn't yet quite follow the rounded lower-right corner on the blog entry divs. The CSS that defines corner radius is ignored by browsers that do not yet understand it.

An excellent example of a clipped rectangular background image [screengrab + example page].

Turns out Mozilla has implemented extensions to CSS that also allow rounded corners, available since NS 6. These extensions were created for use in XUL and in preparation for CSS3, but use a different syntax in implementation from the current spec. Safari currently recognizes Mozilla's shorthand syntax [-moz-border-radius] but not the explicit setting of individual corner radii, where the Mozilla/CSS3 deviation becomes more acute.

Form elements are also affected by the Mozilla extensions. Here's a screengrab of this site's search field and submit button viewed in Firefox.