CSS3 Template Layout

November 10th, 2008

Like many developers who had seen the work-in-progress CSS3 Layout specification I was immediately horrified. As one commenter on Reddit said: "Argh. ASCII-art drawing for columns?" which summarizes my initial feeling pretty well.

Now I felt that way until seeing this example from the CSS3 Layout spec document:

I could immediately determine what the template was trying to do and how the document was going to look. Even if it is kind of crazy at first glance I'm dying for something like this to be implemented. To create an equivalent document using the CSS that we have now - or even Tables - would absolutely futile.

Even the syntax isn't that bad when you look at it. When examining the example I can see that there are three significant rows of content (two of which are 2em high and one of which will expand to fill the full height) and two spacer rows (each are 1em high). Thinking about how to implement something like this using normal CSS now makes my mind explode in frustration - especially in cross-browser manner.

So while this templating layout is still, very much, in the pipe dream category (no one will even touch it until IE implements it) I think it has a lot of merit and should be strongly examined - especially beyond the initial shock of the new syntax.

Honestly, this is just a goldmine waiting for some enterprising developer to come along and use the syntax to build a solution that'll work in all current browsers (maybe a server-side, or JavaScript, tool that'll process the template and inject the right style rules using a grid CSS framework).

Tags: css3, css, w3c

21 Comments on 'CSS3 Template Layout'

border-image in Firefox

August 13th, 2008

For the upcoming Firefox 3.1 release a lot of work has been going into improving its CSS support (specifically, in relation to the CSS 3 specification).

One areas that have received solid implementations is that of border-image. This is a new CSS 3 module that makes the exact slicing of images (and their positioning around an element) quite easy.

The most obvious use case for them exists in constructing beautiful scalable buttons. And there is, perhaps, no better use case than the one provided by the iui library: replicating portions of the iPhone user interface in a pure-CSS manner.

Here are two examples from the iui library (slightly tweaked to support both WebKit's and Mozilla's implementations of border-image).

You will need a nightly release of Firefox in order to have the following demos work properly.

The button on the top right ("Search") is mostly implemented using the following CSS:

With toolButton.png looking like:

The premise behind border-image is complex, but easy to learn. When used in the manner shown above you are, effectively, providing slice offsets into the provided image - telling the browser how to position the slices.

For example the 5s in the border-width and border-image indicate that there should be a 5px-wide border on the left and right of the button. The contents of the border should be populated with the left and right-most 5 pixels from toolButton.png. Since a horizontal border width value is provided it is possible to scale the contents of the button horizontally (inserting more contents will allow it to continue to work properly).

The 0s, on the other hand, indicate that entirety of the button background should be consumed by toolButton.png - and that none of it should be used to show the border (border-image can be used as a crude mechanism for injecting background images). Because of this the image won't be able to gracefully scale vertically.

CSS3.info provides another example that shows how the stretching and rounding work.

with the following base image:

Rounding:

Stretching:

By tweaking the stretching of the border-image you can end up with some truly-compelling results.

We can see another one in a second iui button:

With the following CSS being used:

together with this base image:

border-image has a large number of compelling use cases. It's fantastic to see some coordinated efforts by browser vendors to make their implementations common-place.

Tags: mozilla, css3, css, firefox

19 Comments on 'border-image in Firefox'