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.

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

Here’s a fun game for you web standards geeks. How many HTML elements can you name in 5 minutes? Below is my badge for naming 76! It’s not exactly fair since I’ve been studying them for the last week. I gave an XHTML/Web Standards talk last week and needed to brush up on my elements. The timing was great. How many can you name?

76