Wednesday, February 02, 2005

CSS Attribute selectors


Kudos to Macromedia for supporting attribute selectors in Dreamweaver. Attribute selectors let you apply conditional css formatting to html elements based on the contents of it's elements.

The first place where this seems like it would be very handy is in form elements. I invariably have to create separate class files for input elements.

It feels redundant having to type something like

<input type="checkbox" class="checkbox" ...

Attribute based selectors allow you to create a style like this:

input[type=checkbox] {width:20px; height:20px;}

You then just use <input type="checkbox" ... to set up your checkboxes in your page. They style gets applied based on the contents of the type attribute.

You wouldn't want to do this with just the input selector because you probably want a different default for type="text". Most likely considerably wider. ;)

There are several types of matching rules that can be used with the attribute selectors that let you do things like match parts of a value or combine them for multiple attribute selection.

Unfortunately, Microsoft is giving us yet another reason to adopt Firefox. Internet Explorer is completely unaware of attribute based selectors and ignores them. You're stuck with the class based selectors if you have to support IE.

Of course what I'm really hoping for is that Flash and Flex will make the idea of styling forms obsolete.

No comments:

Post a Comment