Post | mennovanslooten.nl/blog

Getting to grips with CSS3 will be quite a task for most current CSS developers (if they're still around to witness its implementation, of course). CSS3 already contains an enormous amount of new selectors, properties, values and a truckload of new crazy layout and text possibilities. In this post I will focus on some changes that I believe will have the most immediate impact on the graphical possibilities of webpages.

Border images

The border-image property allows the developer to specify the use of custom images as borders in stead of the standard border styles (like solid and dotted) currently available. This is an extremely powerful graphical concept that will make life a lot easier for the graphic-heavy website developers.

Multiple columns

The column layout module is already partially functional in recent mozilla browsers. With it, developers can split sections up into multiple columns while retaining control over properties like the width, number and spacing. It has also been implemented (along with some other CSS3 features) in the fantastic Prince XML software. It is my sincere hope that this module will increase readability of long stretches of text online, but I'm sure that it will be (ab)used for all sorts of crazy stuff.

Background layering

Remember the incredible visual impact that CSS background-images had on webpages, back in the day? Count on background layering to up the ante. Imagine the possibility of having an arbitrary number of background images on elements, with the ability to position, repeat and even scale them individually.

Template-based layouts

This module is so weird, I don't even know where to begin to explain it. Imagine specifying your pages layout like this:

body {
  display: "ab"
           "cd";
}

This creates a 2x2 'grid' in your body. You can now fill these slots with your content elements like this:

div#navigation {
  position: b;
}

Causing the navigation to take up the top right corner of your page. How crazy is that?

The calc() value function

Quite a bit more down to earth than the layout module, is the new calc() function. I don't have to say more than just show you what every CSS code has been screaming for for years:

section {
  width: calc(100% - 20px);
}

I'm really looking forward to the cool stuff people will come up with when this stuff becomes available. I have to say though, these highlights are barely scratching the surface of all that is new. One thing is for sure, we're all going to have to re-learn CSS.