SitePoint Design View

Introduction

Welcome to Design View #62.

I had an interesting moment of clarity during the week.

While working on some layout changes for sitepoint.com, I came across an ugly positioning bug in Internet Explorer 8 -- a side column inexplicably plastered smack dab in the middle of the main content.

After exhausting all my finest IE-layout ninja tricks to no avail, I was left scratching my head. Where to now?

Picking my way through the markup, I was reminded that we attach an all-purpose, "fix-all" IE-only style sheet. Could that be the issue? Sure enough, the moment I cut away the style sheet, IE8 rendered the page like a dream.

It made me recall those traveling shows with the miracle healers depicted in old movies, and suddenly "our poor, star-crossed son has raised up, cast off those rickety crutches, and walked -- Hallelujah!"

It started me thinking, could we actually be at that mythical place we've all dreamed about -- the point where all the major browsers support practically all the standards and features they should? Have we reached that moment in time where we can stop using our creativity to make crippled browsers appear normal? Can we dare instead to start thinking about what might be possible with modern, young, healthy browsers?

Today I thought we might look at some of the new browser features coming into view and whether they're of any use to us right now.

Enjoy.

Alex Walker
Editor
SitePoint Design View

High Quality Designs at a Low Cost!

Are you a designer seeking amazing layouts and looking to put some extra money in your pocket?

• Over 1000-plus designs for ONLY $49.
• The best selection of Web, Flash, Flash-enabled, Newsletter, and Logo templates on the Web.
• Complete web sites (HTML or Flash) for only $29 extra.
• A FREE year of dedicated server hosting with a platinum membership.

To start making professional designs and earning extra money, click here!

Summary

• Introduction
• CSS3: To Infinity and Beyond!
• Take Our Personas Quiz, Win a $100 Amazon Voucher!
• Latest Tutorials
• Hot Discussions
• New Blogs

CSS3: To Infinity and Beyond!!

Let's face it. Mozilla puts out a lot of alphas, nightlies, and developer releases, so if you'd ignored last week's offering -- Firefox 3.6 alpha -- you could probably be forgiven.

However, this time there were actually some good reasons for web geeks to pay attention. Among other goodies, the new additions include support for:

• the -moz-background-size property
• multiple background images
• the rem length unit
• CSS gradients
• improved display:table rendering

Now let's be clear, this IS an alpha release that will only ever be used by a tiny percentage of the Firefox userbase. Nonetheless, it does raise the real prospect of us seeing these features in the standard Firefox release before the year's end.

So, let's take a closer look at a few of the headline-grabbing features.

Multiple Background Images

Although there was a little buzz generated when Mozilla first introduced -moz-border-radius -- giving you simple CSS rounded corners -- I personally remember finding the effect a little underwhelming at the time.

For me, the concept of multiple background images was always going to be the killer feature -- allowing us to do some awesome tricks with layout sans the need for superfluous markup to hang it all on.

The basic syntax is a no-brainer. Instead of listing a single image source for your background-image property, you list up to a maximum of four comma-separated images.

You can also specify up to four values for the respective background-repeat and background-position properties:

I have to say, I *did* find the stacking order to be slightly counter-intuitive. The second listed image tucks UNDERNEATH the first image, and so on. But as long as you're aware of this it's no problem.

So, which browsers currently support this feature?

At this moment, multiple background images are only fully supported in Safari 4.0, Chrome 3.0, and Firefox 3.6 alpha (Minefield). You can see my example in action by pointing any one of those browsers at this URL:

 http://www.sitepoint.com/examples/css3/multi.html

So, is this worth using today?

One of the first problems I hit with sending this code to other browsers, is that they reject just taking the first image and ignoring the others. The comma is enough to kill the whole declaration in those browsers, leaving the background blank.

However, I found (nod to @shaynet) that as long as you first declared the background-image in its standard, single-image format, Opera and older versions of Firefox and Safari were perfectly happy to simply ignore any newer CSS code that follows.

And although it's true Internet Explorer REFUSES to play along, we're free to use conditional comments to send the simpler, single-image code to IE like this:

In short, I think this feature is usable and worthwhile today, but you ARE going to need to be mindful about using it gracefully.

Make sure your design works nicely with older browsers (you're no worse off than before, after all) but inject an extra layer of richness for an increasing base of users with these newer browsers. The time to start experimenting is now.

Background-size

As you might guess, background-size allows you to scale the CSS background imagery you're using. 

Currently background-size lacks support anywhere in its pure CSS3 format, but each of Opera, Chrome/Safari, and the Firefox 3.6 alpha support it with their own custom markup.

That markup looks like this: 

If you're using any of those browsers you can see that code in action here.

So, can we use this now? 

Again, the short answer is yes. Proprietary controls like these will always be ignored by other browsers, so there are no technical issues with using it.

For me, it's simply less clear exactly where I'd want to use this property, since the rescaling process is rarely kind on the imagery.

So, if you can mock up an attractive example using this feature, I'd like to see your work.

CSS Gradients

The CSS background gradients feature seems to me to be the most viable new aspect, even though currently it is only supported in the Firefox alpha, Safari 4, and Chrome 3 browsers.

Like the background-size code this is browser-specific code, although each team introduces a new value for the standard background-image rather than creating an entirely new CSS property.

At its simplest, it looks a bit like this:

As you can see above, the Mozilla (Firefox) and WebKit (Safari/Chrome) code is similar but not identical. Both require start and end colors for your gradient, as well as directional coordinates (that is, top, left, right, bottom, and so on).

While both WebKit and Mozilla can do radial and linear gradients, they handle the process slightly differently. Where Mozilla prefers to use two separate property values (that is, -moz-linear-gradient() and -moz-radial-gradient()), WebKit uses a single property value with an extra parameter (for example, -webkit-gradient(radial,…).

To keep it simple, I'm going to stick with linear gradients today.

While CSS gradients always require a minimum of two colors to work, both methods allow you to set multiple color waypoints that your gradient will transition through.

The syntax for a rainbow gradient would look like this:

Interestingly, IE can also do a reasonable job with simple gradients (which excludes rainbows) using a filter property that has been around since the days of IE5.

The IE-friendly syntax looks like this:

There are two things you need to know about this code.

Firstly, yes it's ugly, but you can see where the start and end colors are being set.

Secondly, believe it or not, the obscure GradientType parameter in fact sets the direction of your gradient. Set it to 0 for a vertical gradient and 1 for horizontal. As far as I can tell, it's impossible to do diagonal gradients or color-stops with this filter in IE.

As I see it, there are three real attractions to using CSS gradients.

1. Unlike images, CSS gradients scale proportionately with the element containing them, allowing them to expand and contract depending on the amount of content.
2. CSS gradients are very efficient, allowing you to generate large, flexible, textured areas of tone with only a few lines of code. That translates directly into faster pageload times for your users.
3. There are plenty of situations where images may be blocked by the user for security or bandwidth reasons. CSS gradients will increasingly give you complex tones places that images can't go or aren't wanted -- arguably most importantly, on Safari on the iPhone.

So, can we use it now?

Again, as long as you're sensible, the answer is yes.

Clearly the newest versions of Safari, Chrome, and Firefox have good gradient support. IE provides passable gradient support. That represents roughly half the browser market before the feature has been introduced to the main Firefox release.

The remaining browsers can be given a garden-variety background image, which is exactly how you would be handling gradients now anyway.

Summary

It's easy to mount a counter argument against using new browser features -- it's always too early and the technology is too young. However, you need to play with any tool to become skilled with it, and gradients and multiple backgrounds are going to be the front-end developers' bread and butter in the years ahead.

I think playtime starts now.

Take Our Personas Quiz, Win a $100 Amazon Voucher!

We recently decided to create some personas to aid the design process here at SitePoint. Personas are fictitious representations of your site's most common users. Admittedly, this is the first time we've ever used personas in shaping our design decisions -- better late than never!

Read on to learn more about how you could help us improve these personas, and earn yourself a $100 voucher to spend at amazon.com!

Introducing the SitePoint Personas

These personas will be invaluable for helping us shape future versions of sitepoint.com. However, rather than keep them as a purely internal tool, we thought it might be fun to share our personas with you, our readers.

Allow me to introduce, for your reading pleasure, the SitePoint Personas (read the full article or read about the process that Matt followed to create them):

Erin Kikuchi the front-end coder	Samuel Johnson the workaholic business owner	Raj Sumandra the forum junkie	Marco Gonzales the troublemaking teenager
Harvey Randolph the newbie hobbyist	Susan Kieslinger the enthusiastic blogger	Joseph Forrest the Googling geek	Scott McInnes the visually impaired student

We've also created a short Which Persona Are You? quiz, so you can find out which of these personas you are most like.

Win a $100 Amazon Voucher

Take this quiz before September 4th and you'll go in the draw to win one of five amazon.com vouchers worth $100. Not bad for less than a minute of your time! Take the quiz now.

We'd love to hear what you think of these personas. Did we describe you to a tee? Are there any "typical users" that we've glaringly omitted?

Related Links

• Introducing the SitePoint Personas
• Build your Own Data-backed Personas
• The SitePoint Personas Quiz: Which One are You?

That's all for this issue -- thanks for reading! I'll see you in a few weeks.

Alex Walker
design@sitepoint.com
Editor, SitePoint Design View

You are subscribed as:
[email]

• Unsubscribe from this list.
• Manage your subscriptions.
• View the newsletter archives.

Mailing Address:
48 Cambridge St, Collingwood, VIC, 3066 Australia

Phone: +61 3 9090 8200