CSS3

The future of webdesign part II

In part two of the interview series we’ve dubbed “the future of webdesign”, we have an interview with Veerle Pieters, one of the best webdesigners on this planet, and a lovely lady as well!

Check it out:

Andy Clarke’s Transcending CSS is a book that anyone involved with client-side web development should read.

For web designers who know some code there is plenty of forward thinking material about the importance of semantic HTML; for coders with an eye for design there is lots of food for thought about colour, style and inspiration; for everyone, there are some genuinely innovative tips on using CSS to tie it all together.

Are you dying to play with some of those CSS3 features that Opera‘s implementing, or is it just me? Well, it turns out there’s a way we can play with them already.

There’s a little program that takes XML+CSS and turns it into PDF‘s. It’s called PrinceXML, which already supports all those wonderful little CSS3 selectors the Opera folks are making us salivate over. The only downside here, is that PrinceXML isn’t a web browser, but a printing program. It’s still very useful and gives us a good playground to practice on.

Here’s a partial list of CSS3 selectors PrinceXML supports:

• E ~ F
• E:not()
• E:nth-child()
• E:nth-of-type()
• E::before
• E::after

Have fun!

We seem to be geting a nice partner in promoting CSS3: David Storey from Opera. His latest post shows you how to make buttons with CSS3 and without images. It’s a great post with some simple examples of how you can use text-shadow and rounded corners to create good looking buttons. Check it out!

As one of our readers has pointed out to us, the latest (3.5.6) release of the KHTML rendering engine passes all of the tests in our CSS selector testsuite – making the Konqueror 3.5.6 browser the most CSS3-compatible of all.

Also in the latest release is the implementation of text-overflow: ellipsis. It really is a shame that only a tiny proportion of web users have access to this excellent browser.

David Storey, Chief Web Opener at Opera, has announced on his blog that the latest internal builds of the Opera browser have advanced CSS3 selectors support.

Some of the new selectors are already enabled in the builds, while others have been implemented but not yet enabled due to technical reasons. All are hoped to be available in a future release version.

IE7 is gaining market share and we can start to use more CSS3 selectors in our day to day code. Because of this, it’s worth a quick reminder that the more semantic we make our (X)HTML, the easier to implement the selectors will be.

For example, imagine the opportunities with the XFN microformat; by combining this with the partial attribute selector, you can add a little flourish to your pages.

Dave Hyatt over at the WebKit blog announced that the WebKit nightly now supports multiple columns. I’ve updated the css3 preview page for multi-column layout to match this great news, and I hope more browsers will pick up one of the best new features of CSS3!

The latest issue of the UK's .net magazine features an interview (update: the interview is now available to read here) with the general manager of the Internet Explorer team, Dean Hachamovitch.

He raises the point that not every internet user wants their browser upgraded every year, saying:

During the open mic session [at the Mix conference], someone said "please don't ship a browser every year – I can't handle that"… [There] are people who say, "I'm using an extranet in order to get my billing done and I'm scared. I really don't want browser changes because this is how I get paid".

The WebKit developers are working hard on new CSS3 features. Last night Dave Hyatt mailed the webkit-dev mailinglist and blogged about the fact that box-shadow is now completely supported. I've quickly created a preview page for it. Then fellow CSS3 enthusiast Nicholas Shanks spoke to me on IM today and told me that the WebKit developers are working on supporting multiple column layouts as well. If you upgrade to the latest nightly, you can see their progress!