So I downloaded it and I started to use it. I love the ability to resize text areas and there is a Web Inspector (only for OS X) that allows you to see what properties are available to HTML nodes and their styles.

So I was using it and I noticed something: Safari now styles submit buttons. Do you remember that aqua button that you could never do anything to? Well now it responds to border stylings and the like. Interesting.

One of these tricks is to make IE pretend like it knows how to use the :hover pseudo-class on all tags.

If you have ever tried to do a suckerfish dropdown then you have gone through the same thing: excitement as you have learned how to use structural markup to create a dropdown and then frustration as your work has been nullified by IE. The fix involves creating duplicate selectors of those using :hover, but instead of using :hover, replace it with a class name .hover. Making what are essentially duplicates and managing more content doesn’t sit well with me. The other trick to getting suckerfish to work in IE is to use JavaScript. The script will add a class definition to the tag when a user’s mouse if over the element and then removes the class when the users mouse is no longer over it. Since this method uses JavaScript to solve one problem, why not make it solve both?

The Code

There is a requirement to using this code and that is you will need prototype 1.5

var HoverBehavior = Class.create();
HoverBehavior.prototype = {
  initialize: function() {
    $A(document.styleSheets).each( function(stylesheet) {
      $A(stylesheet.rules).each( function(rule) {
        if( rule.selectorText.match(/:hover/i) ) {
          stylesheet.addRule( rule.selectorText.replace(/:hover/ig, '.hover'), rule.style.cssText );
        }
      });
    });

    $A(arguments).each( function(arg) {
      $$(arg).each( function(tag) {
        Event.observe(tag, 'mouseover', function() { Element.addClassName(tag, 'hover'); });
        Event.observe(tag, 'mouseout', function() { Element.removeClassName(tag, 'hover'); });
      });
    });
  }
};

In summary, it loops through all of the stylesheets and for each stylesheet, it loops through all of the rules. The first part of the initialization will only work in IE. When looping through the rules, IE uses the rules attribute while others use cssRules. Since this is only meant for IE, I am not going to bother making it cross-browser.

While looping through all of the rules, it is checking the selector text to see if :hover is in that text. If so it will append a new CSS rule to the stylesheet. The selector text for that rule is just like text of the matched selector; however, all instances of :hover have been replaced with .hover. The new rule’s style is simply a copy of the matched selector.

That covers part 1 of the suckerfish fix, part 2 is to add the mouseover, mouseout states to the tags using :hover.

Usage

After the page has been loaded, then it is time to create a new instance of the HoverBehavior class. Since this is only for IE, it would be wise to use IE conditionals as that your other users, who are using complaint browsers, shouldn’t have to process any unnecessary code.

<!--[if lt IE 7]>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
  new HoverBehavior('li');
//]]>
</script>
<![endif]-->

The constructor can take any number of arguments that you would give to prototype’s $$ function, which are like CSS selectors themselves. I could have also done something like:

• new HoverBehavior('#nav li', '#footer li');
• new HoverBehavior('li', 'p', 'span');
• new HoverBehavior('*');

The reason I don’t assume the last one in that list is because I don’t want to kill the user’s browser. Instead of being lazy and choosing all of the elements, I only want to put the mouseover, mouseout functionality on the elements that need it.

The “web” edition of this tool makes some hefty claims concerning creating valid xhtml/css based layouts. A normal person would reasonably expect a webpage promoting a tool used for webpage creation would most likely be built with the said tool. This would demonstrate the level of quality, the level of EXCELLENCE made possible by purchasing and using it.

Let’s have a look…

First we use a little browser called Firefox and a plugin called web developer to examine the layout of this page. By turning off CSS rendering we can examine the structure and determine how the creators approached the design process.

We clearly see that the developers of the expression site have chosen to use a table based, transitional approach (tables for the main layout, css to move things around within the columns). Well ok, I would have expected them to show off the “css layout” capabilities of the tool a bit more, but this in and of itself is still an acceptable practice.

With Expression web you can: “Validate your site with Compatibility reporting and use the Accessibility report to verify your site against Section 508 and W3C Content Accessibility Guidelines (WCAG).”

Well ok – let’s do some of that to the Expression Web “features” page and see what we get! (using Firefox’s handy developer tools of course).

WHOA! Did they not even listen to their own marketing garbage? 144 Errors! No DocType? Are you kidding me?

The validation report is littered with opening tags that are never closed, closing tags that were never opened, several tags that are not part of ANY of the w3 HTML specifications, dozens of properties on tags that are also not part of any specification, Don’t believe me – see for yourself

Bravo to our good friends at Microsoft for setting such a great example and leading the masses to a more standards compliant internet! (and for giving web standards geeks something to hate on)