5 new CSS features you can use if you drop IE6

It is time for most sites to drop IE6, especially for projects that are just getting started. If you do make this choice, it is important to realize that there are some new CSS features that you can begin using, and some old habits worth dropping. While there are many sites that describe CSS bugs in IE6, I found no websites that describe working examples to improve your CSS and HTML if you simply drop support for it.

Here are 5 examples from my own project, Haiku Village.

1. Attribute Selectors

You can use attribute selectors for any arbitrary attribute, but I have used it exclusively for form elements.

<style>
input[type="submit"] {
  margin-top: 5px;
}
</style>

<input type="submit" value="Save" />

This will help you delete those arbitrary class names you made up to select certain types of inputs.


2. Multiple Classes on a Single Element

This is best described with an example:

<style>
.icon {
  background: transparent url(/images/icons.png) no-repeat scroll 0 0;
  padding: 2px 0 0 20px;
}

.icon.trash {
  background-position: 0 -80px;    
}
</style>

<span class="icon trash">Delete</span>

With IE6, you either needed to make a class name of "icon-delete", or nest one element inside of the other.


3. Sibling Selectors

There are many ways to use sibling selectors. My most recent use of them is to add borders between the list items in a sub menu:

<style>
ul.menu li + li {
  border-left: 1px dotted #DADADA;
  padding-left: 8px;
}
</style>

Normally, you would need to introduce a "first" or "last" class name to make the borders only appear between items, and not on the outside.


3. Child Selectors

If you know that a certain style should only apply immediately within an element, then simply insert a ">" into your stylesheets:

<style>
ul.menu > li {
    float: left;
    margin-right: 7px;
    padding: 3px 0 1px;
  }
</style>

This will ensure that other list items within this list item do not receive the style. It also prevents the necessity to define a new class name, such as "menu-item"


4. Use :hover on any element

I started web development in 1995, and until recently, I never considered using the :hover meta selector for anything besides the "a" tag. Remove this from your mind, because it is no longer the case. I use :hover to expose some icons when you mouse over a haiku:

<style>
.haiku .actions {
  visibility: hidden;
}

.haiku:hover .actions
  :visibility visible
}
</style>

Most of us have probably worked around this by either introducing an arbitrary "a" element with an "href='#'", or by adding a class name during a 'mouseover' event.

5. New properties available

There are plenty of new properties that you can start using. The most significant are:

• min-width/min-height
• max-width/max-height
• background-attachment - You can use a value of 'fixed'

There are hacks to make all of these work in IE6, but that's the point: You should stop the hacking. Also, did I mention transparent PNGs?