I have to admit I was completely surprised when I learned Google was launching a new browser. They kept the secret under lock and key kudos to them.

I’ve been test driving it for the last two days and it seems like a great new browser, it’s a little faster than FF3, Safari and IE8, it’s got a decent user experience and I’ve found it to be extremely stable.

But more than all the new fancy new features, I’m glad it came out of the gate with excellent support for Web Standards. With FF3, Safari and IE8 the browser landscape has change dramatically over the last few months. I’m starting to see the light at the end of the IE hack tunnel. I’m starting to see what it might be like to design once and not worry about browser testing.

Which one is best? I’m not sure, I’ll keep banging away at all four to see if there is one clear winner but it’s obvious the biggest winner are the HTML junkie, CSS jockey and JavaScript hero.

A more and more users upgrade to browsers that support Alpha transparency, there are increased options for designers. A great way to get a visual effect on your images without manipulating the originals is through the use of overlays.

Say you have a picture of John Wayne:

Now this is great but you want it to look a bit older, weathered and aged. If you position an overlay on top of this image that contains some yellowness and some dust and scratches you can get that effect without changing the original.

Here’s the overlay:

What you need to do now is position the overlay over the top of the original picture of the Duke. It’s z-index needs to be higher and it’s position needs to be exactly over the top of the original. See example

Volia! that’s it. New style without changing the original.

Yesterday I gave the second in a series of talks on web standards. The topic was a high level look at CSS. Below are the slides.

| View | Upload your own

If you’ve ever written CSS you’ve probably run into issues related to CSS styles which are in conflict. For instance:

.blue { color: blue; }
#red { color:red; }

<p id=”red” class=”blue”>Sample Text</p>

The id is trying to make the text red and the class is trying to make it blue. Who wins? It all depends on specificity. Below is a table that explains CSS specificity.

With the example above the text would be rendered red because the ID has higher specificity than the blue class. To figure out what style takes precedence you work your way across the table. Inline style? Nope. ID? Yes. then that rule is more specific. If they both have IDs then you move again to the right to classes and elements.

The above example would render the following:

p = 0,0,0,1 - not a very specific rule but will cascade quite nicely
p.error = 0,0,1,1 - the introduction of the class negates any piling up of elements (e.x body div ul li span em )
#special p.error - the ID  is higher in specificity. Attributes which are in conflict will use the ID’s attribute values.

For a full explanation see the W3C’s specification.

I recently gave an internal Web Standards at Iron Mountain Digital. This is the first of three parts. The audience was other UX designers as well as engineers. I’m playing with my presentation style feel free to comment.

| View | Upload your own