Previously I wrote about how to shorten your CSS rules with padding and margin. Here are two other ways of reducing your rules and making your stylesheets less cluttered.

Border

If you have a container with a border that is one pixel wide, black and is the same for all four sides you can write it like this:

.myborder {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}

Or you can shorten the rule by writing it like this:

.myborder {
border: solid 1px #000;
}

Since all the values are shared for all four edges it is much easier to write the rule for all four at once.

Color

You may have also noticed that I shortened the hex value for the color from #000000 to just #000. Hexadecimal colors are written using six numbers or letters to declare the color. The 1st and 2nd are the red value. the 3rd and 4th are the green value and the 5th and 6th are the blue value. If the character is the same within these pairs then you can just write the one value and omit it’s identical twin.

Relative position is one of the most understood of all the CSS positions. Once you understand how it is supposed to be rendered it can be a powerful design tool for your more complex layouts.

To understand relative positioning first we need to take a look at static positioning. By default elements are positioned statically. Static elements flow normally within the document one after another based on the order of your markup. Here is a visual example of a statically positioned div with the id of “mydiv”.

Here’s the code:

#mydiv {
position:static;
}

Static position will ignore any top, bottom, left or right declarations. Normally you would never need to write a rule like this since static is the default value unless you are trying to override another rule.

Relative position.
Relative position is “relative” to the space the element would normally occupy. The element can be moved in the layout by using top, bottom, left or right.

Here’s the code:

#mydiv {
position:relative;
top: 20px;
left:-75px;
}

This rule tells “mydiv” to move -75 pixels from it’s left position, and 20 pixels from it’s top position.

Notice that the area where the div was positioned statically still maintains it’s space within the layout. Hope that clears things up!

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