November 9, 2005

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.

Posted by Lewis Francis at November 9, 2005 4:49 PM

You should read your news. 1356 unread news items...

It looks nice BTW, let's see if the next version of IE will support this. I personally don't like all the round corner-retro look but you can certainly make nice things with CSS3.

Posted by: mare at November 10, 2005 9:20 AM

Very cool, Lewis...I will def. check it out. When is CSS3 going to be finalized?!!! I NEED last:child to work EVERYWHERE!

It is my wish that by CSS4, Flash will be obsolete. (puts on flame suit and roller skates)

Posted by: al.yukna at November 10, 2005 6:03 PM

Current WebKit builds require -webkit-border-radius to enable corner rounding; apparently due to the lack of a finalized CSS3 spec.

Posted by: Lewis Francis at May 3, 2006 12:24 PM
TrackBack URL for this entry:

Listed below are links to weblogs that reference 'The Shape of Things to Come' from Information Gift.
Post a comment

Remember personal info?

Voigt-Kampf verification (needed to reduce spam):